React+typscript 프로젝트에 ESLint(airbnb)+prettier 설정하기

* yarn berry3 으로 React + typscript 프로젝트 세팅하기 -> https://sunnyscript.tistory.com/183

 

 

(공통) ESLint와 prettier는 개발시에만 필요하므로 devDependencies으로 추가한다.

yarn add -D 또는 --dev
---
npm install -D 또는 --save-dev

 

1. ESLint 모듈설치

1) Typescript eslint 추가

(CRA로 설치 시, 기본적으로 eslint는 추가되어있다.)

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
---
npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

@typescript-eslint/eslint-plugin : Typescript 관련 린팅규칙을 설정하는 플러그인 
@typescript-eslint/parser : Typescript를 파싱 하기 위해 사용

 

2) ESLint (airbnb) 추가

npx install-peerdeps --dev eslint-config-airbnb (yarn 사용할때도 가능. 자동 전환시켜줌)
---
yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
yarn add -D eslint-config-airbnb

npx install-peerdeps --dev eslint-config-airbnb 명령어는 아래 6가지를 한번에 설치할 수 있다.

eslint

eslint-plugin-import : ES6의 import/export 구문 지원
eslint-plugin-react : React 관련 린트 설정 지원
eslint-plugin-react-hooks  : React Hooks의 규칙을 강제해주는 플러그인
eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백 제공

eslint-config-airbnb : airbnb사의 규칙 사용

 

3) airbnb사의 typescript eslint 추가

yarn add -D eslint-config-airbnb-typescript
---
yarn install -D eslint-config-airbnb-typescript

 

4) prettier 관련 eslint 추가

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
---
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier: prettier와 eslint의 충돌을 일으키는 ESLint 규칙들을 비활성화시켜주는 config
eslint-plugin-prettier: prettier에서 인식하는 오류를 ESLint가 출력

 

 

2. .eslintrc.js 파일생성

module.exports = {
  root:true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb', 
    'airbnb/hooks', 
    'airbnb-typescript', 
    'eslint:recommended', 
    'plugin:@typescript-eslint/recommended', 
    'plugin:react/recommended', 
    'plugin:react-hooks/recommended', 
    'plugin:jsx-a11y/recommended', 
    'plugin:prettier/recommended', //마지막줄에 있어야함
  ],
  parser: '@typescript-eslint/parser', 
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  ignorePatterns: ['.eslintrc.js'],
  plugins: [
    '@typescript-eslint', 
  ],
  rules: {
  	// 0:off, 1:warn, 2:error
    'react/react-in-jsx-scope': 'off', // import React from 'react' 불러올 필요 없도록
    'react/jsx-filename-extension': [1, { extensions: ['js', 'jsx', 'ts', 'tsx'] }], // 사용 허용할 확장자
    'react/function-component-definition': [2, { namedComponents: ['arrow-function', 'function-declaration'] }], // 화살표함수, 함수선언문 사용 허용
    'no-param-reassign': ['error', { props: false }],
    'import/prefer-default-export': ['off'], // export const 문을 쓸때 에러를 내는 규칙 해제
    'react/prop-types': 0, // props의 타입체크를 proptypes가 아닌 typescript 사용 예정
    'no-extra-semi': 'error', // 불필요한 세미콜론 금지
    'arrow-parens': ['warn', 'as-needed'], // 화살표 함수의 파라미터가 하나일때 괄호 생략
    'no-unused-vars': ['off'], // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    'no-console': ['off'], // 콘솔을 쓰면 에러가 나던 규칙 해제
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }], // props로 받은 것 바로 props로 넘기기 허용
    'react-hooks/exhaustive-deps': ['warn'], // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
  },
};

 

 

3. .prettierrc.js 파일생성

module.exports = {
  printWidth: 120, // 코드 한줄이 maximum 120칸
  tabWidth: 2, // 들여쓰기 너비는 2칸
  useTabs: false, //탭의 사용을 금하고 스페이스바 사용으로 대체
  semi: true, //코드 마지막에 세미콜른
  singleQuote: true, // 문자열은 작은따옴표로
  jsxSingleQuote: true, // 문자열은 작은따옴표로 jsx
  trailingComma: 'all', // 객체나 배열 키:값 뒤에 항상 콤마사용
  bracketSameLine: true, // >를 다음 줄에 단독으로 두지 않고 마지막 줄 끝에 배치
  arrowParens: 'always', // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략
  endOfLine: 'auto',
};