[React / TypeScript] 리액트 + 타입스크립트에서 ESLint + Prettier 설정하기

 

1. ESLint, Prettier Extension 설치

 

VS Code에서 ESLint, Prettier Extension을 설치한다.

 

 

yarn add eslint prettier typescript --dev

 

VSCode 터미널에서 위의 명령어를 입력해 타입스크립트 버전의 ESLint와 Prettier를 설치한다.

 

 

 

---

2. 플러그인 설치

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

 

eslint에서 TS를 활용하기 위한 플러그인을 설치한 후,

 

 

yarn add eslint-config-prettier eslint-plugin-prettier --dev

 

위의 명령어를 입력해 ESLint와 Prettier를 함께 사용하기 위한 플러그인까지 설치해 준다.

 

 

 

---

3. airbnb 규칙 설정

yarn add eslint-config-airbnb --dev

 

리액트 관련 규칙을 적용한 airbnb 스타일 가이드를 설정한다.

 

 

yarn add eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import --dev

 

리액트 관련 플러그인을 추가 설치한다.

 

 

 

---

4. package.json 확인

 

package.json의 devDependencies에 설치되었는지 확인한다.

 

 

 

---

5. .eslintrc.json 파일 설정

module.exports = {
  // [env] 프로젝트 환경 설정, 브라우저 환경과 ES2021 문법 사용
  env: {
    browser: true,
    es2021: true,
  },
  // [parser] typescript를 parser로 사용하도록 함
  parser: '@typescript-eslint/parser',
  // [plugins] 사용할 eslint 플러그인 설정
  plugins: ['@typescript-eslint', 'prettier'],
  // [extends] 프로젝트에 적용할 eslit 규칙셋
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  // [rules] 상세 규칙
  rules: {
    // var 금지
    'no-var': 'warn',
    // 일치 연산자 사용 필수
    eqeqeq: 'warn',
    // 컴포넌트의 props 검사 비활성화, propstype 사용하지 않아도 경고 띄우지 않음
    'react/prop-types': 0,
    // 불필요한 세미콜론 사용 시 에러 표시
    'no-extra-semi': 'error',
    // jsx 파일 확장자 .jx, .jsx, .ts, .tsx 허용
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    // 화살표 함수의 파라미터가 하나일때 괄호 생략
    'arrow-parens': ['warn', 'as-needed'],
    // 사용하지 않는 변수가 있을 때 발생하는 경고 비활성화
    'no-unused-vars': ['off'],
    // 콘솔 사용 시 발생하는 경고 비활성화
    'no-console': ['off'],
    // export문이 하나일 때 default export 사용 권장 경고 비활성화
    'import/prefer-default-export': ['off'],
    // react hooks의 의존성배열이 충분하지 않을 때 경고 표시
    'react-hooks/exhaustive-deps': ['warn'],
    // 컴포넌트 이름은 PascalCase로
    'react/jsx-pascal-case': 'warn',
    // 반복문으로 생성하는 요소에 key 강제
    'react/jsx-key': 'warn',
    // 디버그 허용
    'no-debugger': 'off',
    // [error] Delete `␍` prettier/prettier
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    // [error] Function component is not a function declaration
    'react/function-component-definition': [2, { namedComponents: ['arrow-function', 'function-declaration'] }],
    'react/react-in-jsx-scope': 0,
    'react/prefer-stateless-function': 0,
    'react/jsx-one-expression-per-line': 0,
    'no-nested-ternary': 0,
    // [error] Curly braces are unnecessary here
    'react/jsx-curly-brace-presence': ['warn', { props: 'always', children: 'always' }],
    // 파일의 경로가 틀렸는지 확인하는 옵션 false
    'import/no-unresolved': ['error', { caseSensitive: false }],
    // props spreading 허용하지 않는 경고 표시
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }],
    'linebreak-style': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    // 테스트 또는 개발환경을 구성 파일에서는 devDependency 사용 허용
    'import/no-extraneous-dependencies': 0,
    'no-shadow': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
}

 

프로젝트 루트 위치에 .eslintrc.json 파일을 생성하고 필요한 룰들을 적용한다.

 

최대한 통일성 있는 코드를 작성하고 싶어서 규칙을 많이 적용했는데 살펴봤던 대다수의 사이드 프로젝트는 간단한 룰들만 적용했다. 또한 위의 예제는 ES2021까지 가능하도록 설정해 두었는데 ES5, ES6까지 설정하는 경우도 있으니 프로젝트 상황에 맞게 설정하면 된다.

 

 

 

---

6. Prettier 파일 설정

module.exports = {
  // 개행문자 설정
  endOfLine: 'lf',
  // 홑따옴표 사용
  singleQuote: true,
  // 세미콜론 사용 여부
  semi: false,
  // 탭의 사용을 금하고 스페이스바 사용으로 대체
  useTabs: false,
  // 탭의 넓이 2칸
  tabWidth: 2,
  // key: value 뒤에 항상 콤마 붙이기
  trailingComma: 'all',
  // 코드 한 줄의 max lnegth 120
  printWidth: 120,
  // 화살표 함수의 매개변수가 하나일 때 괄호 생략 여부 (생략할 경우 aviod)
  arrowParens: 'always',
}

 

프로젝트 루트 위치에 .prettierrc.json 파일을 생성하고 필요한 룰들을 적용한다.

 

위의 코드의 세미콜론, max length, arrowParens 등을 각자의 프로젝트 규칙에 맞게 설정하면 된다. endOfLine의 경우 윈도우-맥 개행 에러가 발생해서 필수로 넣어주는 편이다.

 

 

 

---

7. setting.json 파일 수정

VS Code setting.json (윈도우 단축키 Ctrl + , / 맥 단축키 Command + ,) 파일을 아래와 같이 수정한다.

 

 

1. Format on Save : 저장 키를 눌렀을 때 자동으로 포맷팅 해주도록 설정한다.

 

 

2. JavaScript Formatter : 기본 JavaScript formatter를 비활성화한다.

 

 

3. default formatter : prettier를 활성화한다.

 

 

 

---

 [관련 글]

airbnb eslint 공식 문서 (한글 번역본)

GitHub - apple77y/javascript: JavaScript Style Guide

 

 

리액트 + 자바스크립트에서 ESLint + Prettier 설정하기

[React]　리액트에서 Airbnb ESLint + Prettier 설정하기

 

 

 

 

---

[이전 글]

https://oliviakim.tistory.com/156

[React / TypeScript]　CRA로 React + TS 프로젝트 세팅하기

 

 

 

---

[참고 자료]

https://bum-developer.tistory.com/entry/TypeScript-Eslint%EC%99%80-Prettier-%EC%84%A4%EC%A0%95

[TypeScript] Eslint와 Prettier 설정

https://any-ting.tistory.com/95

[React TypeScript] ESLint Prettier 설정 방법 2부 (TypeScript)