Eslint 적용하기(React + Typescript + Prettier)

시작하기

기존 프로젝트에서 tslint를 사용해 왔었는데 이번에 tslint는 deprecated 되었습니다.
그렇기에 tslint 대신에 eslint로 설치를 하겠습니다.
react + typescript + prettier에 eslint를 설정하고, airbnb 규칙을 적용하겠습니다.

1. Eslint 설치 및 설정

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

ESLint에 대한 설정 파일(.eslintrc)을 생성합니다.

parser에 @typescript-eslint/parser를 추가하고
plugins에 @typescript-eslint를 추가합니다.
이후 규칙을 설정해야 하는데 어떤 규칙을 추가 해야할지 모르겠다면 권장규칙(recommended)을 추가할 수 있습니다.

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"]
}

package.json

{
  //...
  "scripts": {
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
  }
  //...
}

패키지 파일에 스크립트를 추가합니다.
src파일 내부의 ts,tsx,js,jsx파일을 linting 할 수 있습니다.
lint:fix에서 eslint --fix를 하면 자동으로 lint에 맞게 수정합니다.

이것으로 typescript eslint를 사용할 수 있는 최소 구성을 완료하였습니다.

2. React eslint 및 Airbnb 규칙 설정

두가지의 airbnb 설정(eslint-config-airbnb, eslint-config-airbnb-base)이 있습니다. 이 두가지의 차이점은 설정파일에 리액트 규칙이 있냐 없냐의 차이입니다.
eslint-config-airbnb에는 리액트 관련 규칙이 모두 들어 있고,
eslint-config-airbnb-base의 경우에는 리액트를 제외한 규칙이 들어 있습니다.

서버와 같이 react를 사용하지 않는 곳에서는 eslint-config-airbnb-base를 설치하는 편이 좀 더 가볍다.

2-1 eslint-config-airbnb 로 설치하기
2-2 eslint-config-airbnb-base 로 설치하기
둘 중 하나의 방법으로 설치 하면 됩니다.

리액트 관련 규칙

• eslint-plugin-import
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y

2-1 eslint-config-airbnb 로 설치하기

npm info "eslint-config-airbnb@latest" peerDependencies를 입력하면 설치해야하는 리스트들이 나옵니다.
각자 설치를 해주도록 합니다.
만약 npm이 v5이상 이면 다음 커맨트를 입력해줍니다.

npx install-peerdeps --dev eslint-config-airbnb

자동으로 플러그인 및 설정들을 설치해줍니다.

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended"]
}

설정파일에 추가합니다.

2-2 eslint-config-airbnb-base 로 설치하기

React eslint 설정

npm install -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

리액트,리액트 훅, JSX element, import 에 해당하는 eslint 플러그인을 설치하겠습니다.
이후 리액트 eslint 구성을 추가 하겠습니다.

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react-hooks"],
  "extends": [
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended"
  ]
}

Airbnb 규칙 설정

airbnb 스타일 가이드 규칙을 설정 하도록 하겠습니다.

npm install -D eslint-config-airbnb-base

설정을 패키지에 설치한 후 설정파일에 추가합니다.

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react-hooks"],
  "extends": [
    "airbnb-base",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended"
  ]
}

3. Prettier eslint 설정

Prettier를 설정해보도록 하겠습니다.
prettier와 ESLint 들여 쓰기 설정이 서로 중복 될 수 있습니다.
이를 해결하려면 @typescript-eslint/indent오류가 표시 되지 않도록 지시해야 합니다.

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

prettier 설정 및 플러그인을 설치합니다.

.prettierrc

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": true,
  "printWidth": 120
}

.prettierrc 파일을 생성합니다.

package.json

"scripts": {
  //...
    "prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'",
  //...
}

package.json파일의 scripts에 prettier를 추가합니다.

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ]
}

eslintrc 설정을 수정합니다.

eslint ignore 설정

lint를 실행할때 무시하고자 하는 파일 및 폴더를 설정 할 수 있습니다.

.eslintignore

/node_modules

실행하기

코드입력 => prettier => eslint => 코드수정순으로 실행합니다.
npm run prettier실행시 자동으로 코드의 스타일을 변경합니다.

이후 npm run lint를 실행하여 규칙에 맞는지 여부를 검사합니다.

eslint를 실행하면 당황스럽게 오류와 경고가 많이 나오지만, 침착하게 하나하나 해결해나가면서 깔끔한 코딩스타일을 가질 수 있습니다.
react + typescript + prettier 의 eslint 설정을 완료하였습니다.

간편하게 추가하기 (2020.5.26 추가)

eslint 및 prettier 설치
다음 커맨드를 복사해서 프로젝트에서 실행

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

.eslintrc파일 생성

.eslintrc

{
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

.prettier

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": true,
  "printWidth": 120
}

package.json

{
  //...
  "scripts": {
    "prettier": "prettier --write --config ./.prettierrc \"**/*.{ts,tsx}\"",
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'"
  }
  //...
}