React + Typescript eslint, prettier설정

1. ESLint 와 Prettier

회사가 커지고 개발자가 많아지게 되면 각자 자신이 좋아하는 스타일대로 코드를 작성하게 되는데, 여러 사람이 같이 만들게 되는 프로젝트의 경우는 이런 설정을 통일해 주는 것이 필요하다.

• ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다.

• Prettier : 코드의 스타일을 잡아주는 포맷팅 기능을 한다.

2. ESLint + Prettier 설정하기

eslint 와 prettier 연결과 설정을 위해 아래 패키지들을 설치한다.
CRA에서 맨 아래 두 줄은 지원해주기 때문에 두 줄은 제외하고 설치한다.

npm i -D eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-airbnb
npm i -D eslint-config-prettier eslint-plugin-prettier
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 관련 린팅규칙을 설정하는 플러그인
• @typescript-eslint/parser : Typescript 를 파싱하기 위해 사용
• eslint-config-airbnb : airbnb 코딩규칙을 사용(리액트 코딩규칙 포함)
• eslint-config-prettier : prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
• eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
• eslint-plugin-react : React에 관한 린트설정을 지원
• eslint-plugin-react-hooks : React Hooks의 규칙을 강제하도록 하는 플러그인
• eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공
• eslint-plugin-import : ES2015+의 import/export 구문을 지원하도록 함

ESLint 설정

프로젝트 최상위 경로에 .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,
  },
};

Prettier 설정

프로젝트 최상위 경로에 .prettierrc 파일을 생성하고 아래와 같이 작성한다.

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

• singleQuote : single 쿼테이션 사용 여부
• semi : 세미콜론 사용 여부
• useTabs : 탭 사용 여부
• tabWidth : 탭 너비
• trailingComma : 여러 줄을 사용할 때, 후행 콤마 사용 방식
• printWidth : 줄 바꿈 할 폭 길이
• arrowParens : 화살표 함수 괄호 사용 방식

참고문서

Prettier 세부 설정