Next.js 프로젝트에 ESLint와 Prettier 설정하기

안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다.

들여쓰기가 맞지 않아도, 변수를 선언하고 사용하지 않아도, 모든 곳에 any 타입을 사용하여도 어플리케이션은 동작합니다. 동작하니까 문제가 없는 것 같아보이지만 사실 문제가 있습니다. 가독성도 나쁘고, 유지보수가 어렵습니다. any를 남발하였으니 compile time 잡을 수 있었던 문제들이 runtime까지 갑니다.

프로젝트에 ESLint와 prettier를 추가하여 최소한의 코드 품질과 일관된 코드 스타일을 보장하는 방법을 알아봅니다.

프로젝트 생성

// 생성
npx create-next-app <MY-AWESOME-APP>

// config 파일 생성
touch tsconfig.json

// 프로젝트 실행
npm run dev

// typescript를 설치하라는 다음과 같은 메시지가 출력됩니다.
// Please install typescript and @types/react by running: npm install --save-dev typescript @types/react

// @types/react-dom, @types/node를 추가하여 설치합니다.
npm install --save-dev typescript @types/react @types/react-dom @types/node

// 프로젝트 실행 및 정상 작동 확인
npm run dev

tsconfig.json

절대경로 임포트를 위하여 baseUrl를 .(root)로 설정, strict를 true 설정하여 더 빡빡한 type checking으로 변경합니다. 이외 나머지 설정은 개인 및 팀의 의견에 맞춰서 변경하면 될 것 같습니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

ESLint와 Prettier 설정

모든 세팅이 끝나면 ESLint가 linting을 담당하여 코드에서 문제점을 검사하고 고쳐줍니다. 그리고 Prettier는 formatting을 담당하여 일관된 코드 스타일을 따르도록 변환해줍니다.

ESLint

아래 명령을 실행하면 ESLint 셋팅을 어떻게 할 것인지 묻는 질문들이 나타납니다. 차례대대로 완료하면 .eslintrc.js 파일을 생성해줍니다.

npx eslint --init

? How would you like to use ESLint? …
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

차례대로 다음과 같은 응답을 선택하여 진행합니다.

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript

Local ESLint installation not found.
The config that you've selected requires the following dependencies: eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

✔ Would you like to install them now with npm? · Yes

이렇게 생성된 .eslintrc.js 파일에 설정을 추가, 삭제하여 사용할 수 있습니다. 제 설정은 다음과 같습니다. 각 항목에 대해서 간단한 설명을 추가하였으니 본인에게 알맞게 수정하시면 됩니다.

// .eslintrc.js
module.exports = {
  env: {
    // 전역 변수 사용을 정의합니다. 추가하지 않으면 ESLint 규칙에 걸리게 됩니다.
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended", // 해당 플러그인의 권장 규칙을 사용합니다.
  ],
  parser: "@typescript-eslint/parser", // ESLint 파서를 지정합니다.
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX를 파싱할 수 있습니다.
    },
    ecmaVersion: 12, // Modern ECMAScript를 파싱할 수 있습니다.
    sourceType: "module", // import, export를 사용할 수 있습니다.
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    // ESLint 규칙을 지정합니다. extends에서 지정된 규칙을 덮어 쓸수도 있습니다.
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
  },
  settings: {
    react: {
      version: "detect", // 현재 사용하고 있는 react 버전을 eslint-plugin-react가 자동으로 감지합니다.
    },
  },
};

Prettier

.prettierrc.js 파일을 생성하고 원하는 설정을 추가합니다. 제 설정은 다음과 같습니다.

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 160,
  tabWidth: 2,
};

ESLint와 Prettier를 함께 사용하기 위해서 다음과 같이 설치를 합니다.

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

eslint-config-prettier는 Prettier와 충돌할 수 있는 ESLint 규칙들을 꺼줍니다. eslint-plugin-prettier는 Prettier가 ESLint의 규칙으로써 동작하도록 만들어줍니다.

다음과 같이 규칙을 추가합니다.

{
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended", // 해당 플러그인의 권장 규칙을 사용합니다.
    "plugin:prettier/recommended", // plugin과 eslint-config-prettier 설정을 한번에 합니다.
  ],
};

eslint-config-prettier v8.0.0부터 prettier/react와 같은 추가적인 exclusion이 필요 없어졌습니다.

VS Code에서 자동으로 코드를 고치는 법

앞의 설정을 모두다 했다고해서 eslint가 자동으로 코드를 고쳐주지는 않습니다. 개발자가 일일히 손으로 고치는 것은 너무 번거로운 일이니 vscode의 도움을 받아 이를 자동화하겠습니다. settings.json 파일을 열고 다음과 같이 추가합니다.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "files.autoSave": "onFocusChange"
}

이제 코드를 저장할때 마다 eslint가 동작합니다. cmd + s를 누르는 것도 번거로우니 자동 저장 옵션을 추가합니다. 모든 설정이 끝났습니다.

추가하면 더 좋은 설정

husky와 lint-staged를 이용하여 staged 상태의 파일들을 commit하기 전에 eslint를 강제하여 문제있는 코드는 remote repo에 올릴 수 없게 만들 수 있습니다. 여럿이 함께하는 프로젝트라면 확실히 도움이 됩니다.

husky v4와 v6의 설정이 다릅니다. 공식문서를 확인하세요.

마지막으로 제가 사용하는 프로젝트 설정을 공유합니다.

Back to Posts