React + TypeScript 환경에서 ESLint, Prettier 설정하기

이번 포스팅은 React + TypeScript 환경에서 ESLint와 Prettier 설정하는 방법에 대해서 알아보려고 한다.

개발을 진행하다보면 일관적이지 않은 코드들 때문에 코드 정리를 하는데 많은 시간을 쓰게된다. 혼자하는 프로젝트라면 어떻게 코드를 작성하든 문제될게 없지만 여럿이 함께 진행하는 프로젝트라면 일관된 코드 스타일이 중요하다.

왜냐하면 내가 작성하는 코드를 누군가가 읽게 될텐데 코드가 일정한 규칙에 의해 작성된다면 코드를 읽고 이해하는데 많은 도움이 될 것이기 때문이다.

일정한 규칙에 의해 코드를 일관되게 작성할 수 있게하여 코드의 품질을 높여주는 도구가 ESLint와 Prettier이다.

• ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다.
• Prettier : 코드의 스타일을 잡아주는 포맷팅 기능을 한다.

하지만 ESLint와 Prettier를 같이 사용하게되면 코드 포맷팅 부분에서 충돌이 나기때문에 ESLint로 코드의 문법을 검사하고 Prettier로 코드 포맷팅을 할 수 있도록 설정해보겠다.

ESLint + Prettier 설정하기

먼저 CRA를 통해 React + Typescript 개발환경을 설정했다고 가정하고 진행하겠다.

ESLint와 Prettier를 사용하기 위해선 아래의 패키지들이 필요하다. 하지만 CRA에서 맨 아래 두 개는 지원해주기 때문에 두 개를 제외하고 설치한다.

npm i -D eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-config-airbnb
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import

패키지 설명

• eslint 코드 포맷팅을 통해 코드 품질을 높여주는 패키지
• prettier 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 패키지
• @typescript-eslint/eslint-plugin TypeScript관련 linting 규칙을 처리하는 플러그인
• @typescript-eslint/parser typescript 를 파싱하기 위해 쓰이는 패키지
• eslint-config-prettier prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
• eslint-plugin-prettier ESLint 규칙에 따라 작동하게 해주는 플러그인
• eslint-config-airbnb airbnb 코딩 규칙을 담고 있는 패키지(React 관련 코딩 규칙도 포함되어있다.)
• eslint-plugin-react React에 관한 lint설정을 지원하도록 함
• eslint-plugin-react-hooks React Hooks의 규칙을 강제하도록 하는 플러그인 (CRA에서는 기본적으로 포함되어 있어 설치하지 않겠다)
• eslint-plugin-jsx-a11y 접근성 지원
• eslint-plugin-import ES2015+의 import/export 구문을 지원하도록 함

Prettier 설정

프로젝트 root 경로에 .prettierrc 파일을 생성한다.
client/.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}

ESLint 설정

프로젝트 root 경로에 .eslintrc.js 파일을 생성한다.
client/.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'airbnb',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
  ],
  rules: {
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
    'prettier/prettier': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    'no-shadow': 0,
    'react/prop-types': 0,
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
};

ESLint와 Prettier 설정이 끝났다. 다음 포스팅에서 절대경로를 설정하는 방법에 대해서 알아보자.