ESLint 와 Prettier 적용

VSCode에서 prettier와 eslint 같이 사용하는 경우, 충돌이 발생하는 부분이 있습니다.

VSCode에서 파일 저장시 자동포맷팅(formatOnSave) 기능을 활성화 하면,
Prettier와 ESLint 모두 코드 포맷을 수정하기 때문에, 상충되는 설정을 하면 Lint 오류가 계속 발생하게 됩니다.
이러한 경우에 Prettier 규칙을 ESLint에 통합하여 관리할 수 있습니다.

설정 통합하기

1) eslint-config-prettier를 설치합니다.
eslint-config-prettier는 prettier 설정과 충돌되는 eslint 규칙을 비활성화 합니다.

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

2) 플러그인을 추가하고 .eslintrc.* 또는 eslintConfig에 플러그인과 확장을 추가합니다.

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

3) VSCode 기본설정(settings.json)에서 자동저장 기능을 비활성화 하고 저장시 수행동작 기능을 활성화 합니다.

{
  ...
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
}

formatOnSave 사용 여부는 선택사항입니다.
eslint와 prettier 옵션이 모두 설정되어 통합되어 있다고 가정하면, eslint가 동작할 때 .prettierrc 파일의 옵션을 읽고 린팅합니다. 따라서 파일 저장시 codeActionsOnSave에 의해 자동으로 fix됩니다.

이제 .prettierrc와 .eslintrc 두 파일로 스타일과 컨벤션을 관리하면서 Prettier와 ESLint를 사용할 수 있습니다.