[TIL] React에 ESLint와 Prettier 설정

ESLint

자바스크립트 문법에서 에러를 찾아준다.

 

Prettier

코드 스타일을 자동으로 fotmatting해준다.

 

이 두가지를 함께 사용하면 협업 시 코딩 스타일에 대한 규약을 지킬 수 있다!

 

React에서 ESLint와 Prettier 설정

React 프로젝트 생성

npx create-react-app example

CRA로 생성된 프로젝트는 안에 ESLint가 자동으로 들어간다. 추가로 ESLint를 설치하면 에러가 나니 주의!

 

Prettier 설치

npm i prettier -D -E

 

npm i eslint-plugin-prettier eslint-config-prettier -D

Prettier와 ESLint를 함께 쓰기 위해 설치해준다.

• eslint-plugin-prettier
• eslint-config-prettier 

ESLint 파일 추가

.eslintrc.json파일을 만들고 아래 내용을 작성한다.

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

VSCode에서 ESLint, Prettier extension 설치

이 두가지를 VSCode에서 추가해준다.

 

VSCode 설정

VSCode에서 command+shift+p(윈도우: ctrl+shift+p)를 누르고 아래 설정 파일로 들어간다.

아래 내용을 추가해준다.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

ESLint 규칙 설정

유명한 Airbnb를 추가해주도록 하겠다.

npm i -D eslint-config-airbnb

다시 .eslintrc.json파일로 돌아가 아래 내용을 추가해준다.

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended", "airbnb"],
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true, "parser": "flow" }]
  }
}

 

Prettier 파일 추가

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

.prettierrc.json에 추가