포트폴리오 사이트 제작 계획 (2) [ESLint, Prettier] 세팅

일단 NextJs, React, TypeScript로 프로젝트를 시작했고 아래는 package.js이다.

 

{
  "name": "port",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.1.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

 

 

[ESLint, Prettier] 세팅

아마 첫날 가장 힘들었던 건 esLint와 prettier 설정인데 노트북을 다시 사고 처음부터 세팅하니 기억이 안나서 더 헤맸다.

 

그래서 혹시 모를 미래를 대비해 아래의 순서를 기록한다. (vscode 기준)

 

1. esLint, prettier 확장자를 설치한다.

 

2. default formatter를 세팅한다.

 

3. setting.json 파일을 세팅한다. 

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "always"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "files.associations": {
    "*.tsx": "typescriptreact"
  },
  // editor.defaultFormatter, editor.formatOnSave 이 두 설정을 꼭 해주자
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.settings.useSplitJSON": true,
  "json.schemas": [
    
  ]
}

 

4. eslint.config.mjs 파일을 설정한다.

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  "plugin:prettier/recommended",  // Prettier 설정 추가
];

const eslintPlugins = [
  ...compat.plugins("prettier"),  // Prettier 플러그인 추가
];

export default {
  ...eslintConfig,
  plugins: eslintPlugins,
};

 

5. .prettierrc 파일을 원하는 코드 포맷대로 설정한다.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80
}

 

! 만약 저렇게 했는데 안되면 아래 명령어로 ESLint와 Prettier가 충돌하지 않도록 설정해보자.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

 

 

사실 이걸 꼭해야되나 싶고 원한다면 그냥 기본 포맷으로 해도 되지만 사람이 불편해야 배울 수 있는 거 아니겠는가? 

위 과정대로 하니 일단 .prettierrc 기준으로 저장시 자동 세팅되는 걸 확인할 수 있었다.

 

다른 더 쉬운 방법이 있다면 다시 한 번 이 주제로 글을 작성해보고 싶다.

 

아무튼 다음부터는 본격적으로 개발 얘기를 할 수 있을 거 같다.