eslint와 prettier 구분하기 (a.k.a eslint-plugin-prettier 제거하기)

기존 프로젝트에서 eslint-plugin-prettier를 사용하여 eslint 설정에서 prettier 설정을 같이 하여 code formatting을 하고 있었습니다. 여러 레퍼런스와 prettier 공식 문서에서도 해당 라이브러리를 사용하여 lint에 묶어서 처리하는 것을 추천하지 않습니다. 그래서 eslint-plugin-prettier를 제거하고 eslint 설정과 prettier 설정을 분리하는 과정을 포스팅하게 되었습니다.

 

eslint-plugin-prettier? or eslint-config-prettier?

eslint 설정과 prettier 설정을 분리하기 전에 제거할 eslint-plugin-prettier와 추가할 eslint-config-prettier 두 개의 라이브러리에 대해 살펴보겠습니다.

 

eslint-plugin-prettier는 eslint 설정에서 prettier의 code format 설정을 추가하여 prettier의 설정을 eslint rule로 동작하게 합니다. 따로 prettier config 설정 없이 lint 설정에 추가하여 prettier를 설정하게 되면 code formatting 문제를 lint 오류로 출력하게 되어 lint 오류와 code formatting 문제를 구별하기 힘들고 prettier를 따로 실행하는 것보다 느립니다.

 

eslint-config-prettier는 eslint의 포맷팅 기능과 prettier의 설정 충돌을 막기 위해 사용합니다. prettier 설정을 따로 하기 위해 추가해서 사용합니다.

 

마이그레이션

eslint-plugin-prettier를 지우고 eslint-config-prettier를 설치합니다.

npm uninstall eslint-plugin-prettier --dev
# or
yarn remove eslint-plugin-prettier --dev

npm i eslint-config-prettier --dev
# or
yarn add eslint-config-prettier --dev

 

eslint-plugin-prettier 관련 설정을 제거합니다.

// .eslintrc.js
module.exports = {
  ...
  extends: [
    // remove
    // 'plugin:prettier/recommended',
    ...
  ],
  rules: {
    ...
    // remove
    // 'prettier/prettier': [
    //   'error',
    //   {
    //     <prettier 설정>
    //   }
    // ],
    ...
  },
  ...
};

 

eslint-config-prettier 관련 설정을 추가하고 prettier 설정 파일을 추가합니다. monorepo 구조일 경우 root에 prettier 설정 파일을 추가하면 하위 package에 반영됩니다.

module.exports = {
  ...
  extends: [
    ...
    'prettier',
  ],
  ...
};

 

prettier 설정 파일은 지난 eslint, prettier 포스팅을 참고하여 설정하면 되겠습니다.

// .prettierrc
{
  <prettier 설정>
}

 

기존에 eslint config 파일에서 ignorePatterns을 통해 특정 디렉토리 및 파일 확장자의 prettier 설정을 제외했다면 .prettierignore를 추가하여 prettier 설정이 필요 없는 디렉토리 및 파일 확장자를 명시합니다.

# .prettierignore
# example
/src/**/*.d.ts

 

VSCode 사용시 따로 setting에서 formatter 설정을 안했을 경우 setting에 추가해줍니다.

{
  ...
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  ...
}

 

마무리

문법적 오류를 잡는 Eslint와 코드 스타일을 정리해 주는 Prettier를 각각 역할에 맞게 구분하여 사용해야 합니다. 별다른 이유 없이 eslint-plugin-prettier을 사용하여 eslint 설정에 prettier 설정을 묶어서 사용하는 경우 분리하는 작업을 통해 구분해서 사용하는 것이 좋겠습니다.

---

참고 자료

https://prettier.io/docs/en/integrating-with-linters.html

https://yrnana.dev/post/2021-03-21-prettier-eslint/