본 게시글은 eslint 와 prettier 를 충돌 없이 동시에 쓰고 싶을 때 어떻게 설정하면 되는지 정리한 글이다.

선 요약

시간이 아까운 분들을 위한 요약

1. 필요한 라이브러리 설치

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. .eslintrc.json 파일에 다음과 같이 설정

{
  "extends": ["plugin:prettier/recommended"]
}

설정이 끝났다면 VSCode 한 번 껐다 켜주자.

순차 설명

eslint & prettier 설치

eslint 와 prettier 설정을 사용하기 위해선 아래 두 라이브러리를 설치해야 한다.

npm install eslint prettier --save-dev

설정 파일 생성

eslint 와 prettier 설정을 넣을 파일을 생성. 경로는 프로젝트 root 경로

• .eslintrc.json
• .prettierrc

prettier config 설치 및 설정

eslint-config-prettier 는 prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화 해주는 라이브러리이다.

npm install --save-dev eslint-config-prettier

.eslintrc.json

{
  // prettier config를 eslint 설정에 추가
  // extends 배열의 가장 마지막에 넣어야 한다.
  "extends": ["prettier"]
}

prettier plugin 설치 및 설정

eslint-plugin-prettier는 Prettier의 규칙을 eslint에 적용시킬 수 있게끔 해주는 plugin이다.

npm install --save-dev eslint-plugin-prettier

// .eslintrc.json
{
  "extends": ["prettier"]
  // prettier plugin을 eslint 설정에 추가
  "plugins": ["prettier"],
  // prettier 코드 스타일이 어긋나면 eslint에 걸리도록 처리
  "rules": {
    "prettier/prettier": "error"
  }
}

eslint 설정을 더 짧게 변경

위의 설정을 아래 한 줄로 줄일 수 있다.

{
  "extends": ["plugin:prettier/recommended"]
}

Ref: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

추가) VS Code preference 수정

VScode 에서 cmd + shift + p 를 누르고 Preferences: Open Settings 를 연다.

아래와 같이 수정한다.

settings.json

{
    ...
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 저장 버튼을 누르면 자동으로 포맷팅 됨
}

(* "editor.formatOnSave: true" 를 사용해도 되지만 codeActionsOnSave 가 최신 옵션이다.)

자주 발생하는 에러

Cannot find module 'eslint-plugin-import'

이 에러는 VS Code를 루트로 열지 않아서 생기는 에러이다.

eslint를 사용할 때에는 항상 .eslintrc.js 파일이 있는 디렉토리를 열어야 한다.

예시 1.

이렇게 열면 위의 에러가 뜬다.

예시 2.

이렇게 열어야 에러를 방지할 수 있다.

Ref

https://github.com/prettier/eslint-plugin-prettier
https://stackoverflow.com/questions/53189200/whats-the-difference-between-plugins-and-extends-in-eslint