[React] 개발 환경 설정 ESLint(eslint-config-airbnb-typescript) + Prettier + React + TypeScript

개발 환경 설정 ESLint + Prettier + React + Typescript

Prettier+ESLint

1. ESLint 설치하기

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

우선 ESLint와 Typescript용 plugin, parser를 설치한다.

설치과 완료되면 root폴더에 .eslintrc.json 파일을 생성하거나 커맨드 창에

npx eslint --init

을 치면 아래와 같은 순서로 답변하면 그대로 설정파일이 만들어 진다.

eslint --init 설정

1. check syntax and find problems
2. Javascript modules
3. React
4. Yes
5. Browser
6. JSON
7. Yes

설치가 안되는 경우 yarn add -D로 설치하면된다.

설정파일인 .eslintrc.json의 내부에 아래와 같이 extends를 적는다.

  "extends": [ "eslint:recommended",    "plugin:react/recommended",    "plugin:@typescript-eslint/recommended"]

---

2. Eslint-config-airbnb 설치하기

yarn add -D eslint-config-airbnb

• eslint-plugin-import : ES6의 import, export 구문을 지원, 필수 플러그인
• eslint-plugin-react : React 규칙이 들어있는 플러그인
• eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인
• eslint-plugin-jsx-a11y : JSX요소의 접근성 규칙에 대한 정적 검사 플러그인

eslint-config-airbnb를 사용하기위한 플러그인들도 설치해준다. 그리고 typescript 모듈도 추가해준다.

yarn add -D eslint-config-airbnb-typescript

설치 후 .eslintrc.json의 extends에 airbnb를 추가해 준다.

eslintrc.json

---

3. Prettier 설치하기

yarn add -D -E prettier

prettier와 eslint 충돌을 피하기위해 아래 처럼 설치한다.

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

반응형

총 설치된 package들은 아래와 같다.

설치된 package

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "no-useless-escape": "off",
    "linebreak-style": "off",
    "quotes": ["off", "single"],
    "import/prefer-default-export": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-props-no-spreading": ["error", { "custom": "ignore" }]
  }
}

뭔가 다 설정해놓고도 충돌 + 에러가 많이 나서 rules에 추가를 많이 했다. 상황에 따라 rules에 더 추가되거나 빠질 수도 있을 것 같다.

설정해줘야하는게 많아서 좀 헤매긴 했지만 1시간만에 끝나서 다행이다 ㅎㅎ