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

- 개요

안녕하세요. 이번 시간에는 React TypeScript 환경에서 ESLint와 Prettier 설정하는 방법에 대해 알아보겠습니다.

 

지난 시간에는 JavaScript 환경에서 적용하는 방법에 대해 알아봤습니다.

 

개념 설명을 제외하고 설정 방법에 대해 알아보겠습니다.

 

ESLint와 Prettier 개념 또는 JavaScript 환경에 대해 알고 싶으신 분들은 아래 링크를 통해 설정하시는 걸 추천드리겠습니다.

[React] ESLint Prettier 설정 방법 1부 (JavaScript)

[React] ESLint Prettier 설정방법 1부 (JavaScript)

 

- 설정

배포 환경에서는 ESLint와 Prettier를 사용하지 않기 때문에 개발환경으로 패키지 모듈을 설치합니다.

현재 버전 확인

npm info "eslint-config-airbnb@latest" peerDependencies

 

설치

#npm
npm install eslint@^7.2.0 eslint-plugin-import@^2.22.1 --save-dev
npm install eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 --save-dev
npm install eslint-plugin-react-hooks@^4 eslint-config-prettier --save-dev
npm install eslint-plugin-prettier eslint-config-airbnb prettier --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

#yarn
yarn add eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 --dev
yarn add eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^4 --dev
yarn add eslint-config-prettier eslint-plugin-prettier --dev
yarn add eslint-config-airbnb prettier --dev
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

- 패키지 설명

• eslint: ESLint 코어
• prettier : 코드의 스타일을 잡아주는 포맷팅 기능
• eslint-plugin-react: React 관련 린트 설정을 지원
• eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
• eslint-plugin-import: ES2015+의 import/export 구문을 지원
• eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백을 제공
• eslint-config-prettier: prettier와 eslint의 충돌을 일으키는 ESLint 규칙들을 비활성화시켜주는 config
• eslint-plugin-prettier: prettier에서 인식하는 오류를 ESLint가 출력
• eslint-config-airbnb: airbnb사의 코딩규칙을 사용
• @typescript-eslint/eslint-plugin : Typescript 관련 린팅규칙을 설정하는 플러그인 (추가)
• @typescript-eslint/parser : Typescript를 파싱 하기 위해 사용 (추가)

 

- eslintrc.js 파일 생성

vscode plugin으로 ESLint와 Prettier를 설치하였더라도 설정 파일 우선순위가 있다.

 

1등. eslintrc.js 등다른 파일 > 3등 vscode 설정 플러그인

. eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  rules: {
    'react/prop-types': 0,
    'no-extra-semi': 'error',
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], // 확장자로 js와 jsx ts tsx 허용하도록 수정
    'arrow-parens': ['warn', 'as-needed'], // 화살표 함수의 파라미터가 하나일때 괄호 생략
    'no-unused-vars': ['off'], // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    'no-console': ['off'], // 콘솔을 쓰면 에러가 나던 규칙 해제
    'import/prefer-default-export': ['off'], // export const 문을 쓸때 에러를 내는 규칙 해제
    'react-hooks/exhaustive-deps': ['warn'], // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }], // props spreading을 허용하지 않는 규칙 해제
    'linebreak-style': 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,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
}

 

. prettierrc.js

module.exports = {
  singleQuote: true, // 문자열은 따옴표로 formatting
  semi: false, //코드 마지막에 세미콜른이 없게 formatting
  useTabs: false, //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2, // 들여쓰기 너비는 2칸
  trailingComma: 'all', // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
  printWidth: 120, // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid', // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
}

 

위 파일을 아래와 같이 Root 경로에 생성해줍니다.

이번 시간에는 ESLint와 Prettier 설정해보는 시간을 갖었습니다. 자신만의 코딩 스타일을 규격화해서 적용해 보시는 걸 추천드리겠습니다.