ESLint & Prettier 설정

 ESLint는 틀린 문법을 자동으로 찾아주어 휴먼에러를 사전에 차단하는 도구입니다.

Prettier는 코드 저장 시 코드를 정해진 규칙에 맞춰 포맷팅하여 주는 도구입니다. 특히, 협업을 하는 경우에 팀원 간의 코딩 컨벤션을 위해 자주 사용합니다.

 

 

 둘 다, 사람이 매번 하기 번거로운 일들을 대신해주는 훌륭한 도구입니다. 따라서, 보통 ESLint와 Prettier 모두 사용하는 경우가 많습니다. 그런데 ESLint와 Prettier를 정상적으로 사용하기 위해서는 추가적인 설정이 필요합니다. 그 이유는 ESLint에서도 포맷팅 기능을 제공하기 때문에 Prettier와 충돌이 발새할 수 있습니다. 따라서, ESLint는 포맷팅 기능 끄고 문법 기능만 켜야합니다.

 

 

 이를 위해서는 다음과 같은 패키지를 설치해야 합니다.

* eslint-config-prettier

 Turns off all rules that are unnecessary or might conflict with Prettier.

 (Prettier와 충돌을 일으키거나 불필요한 규칙을 모두 끕니다.)

* eslint-plugin-prettier

 eslint에 prettier의 포매팅 기능을 추가합니다.

 

 

 이제 아래의 명령어로 ESLint와 Prettier에 필요한 패키지를 설치하겠습니다. 그리고 2번과 3번의 이름을 가진 파일을 루트 디렉토리(최상단 폴더)에 생성하여 코드를 복사 붙여넣기 해준 뒤 저장합니다.

 

 

1. 명령어

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

 

2. .eslintrc

{
  "plugins": ["prettier"],
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {}
}

 

3. .prettierrc

{
  "printWidth": 120,
  "singleQuote": true
}

 

 

 

마지막으로 ESLint와 Prettier에 대한 규칙은 밑의 페이지에서 찾아볼 수 있습니다.

본인만의 스타일대로 설정을 바꿔봅시다. (ESLint는 rules에 추가하면 됩니다)

 

List of available rules

 

Prettier · Opinionated Code Formatter