EsLint와 Prettier의 충돌 막기

728x90

자주 사용하는 EsLint와 Prettier의 충돌 해결 방식

ESLint와 Prettier 모두 코드 포매팅 기능이 있어서 서로 충돌이 발생할 수 있다. 이 문제를 해결하기 위해 보편적으로 eslint-config-prettier 와 eslint-plugin-prettier 플러그인을 추가로 설치한다.

eslint-config-prettier: Prettier와 겹치는 ESLint의 포매팅 규칙을 비활성화
eslint-plugin-prettier: Prettier의 포매팅 규칙을 ESLint 규칙으로 동작하게 함

바로 eslint에서 prettier와 겹치는 포멧팅룰은 삭제하고 prettier의 포멧팅 룰을 eslint의 룰로 포함시켜 eslint를 prettier와 함께 쓰는 것이였다.

이제는 권장하지 않는다…

그런데 Prettier 공식 문서를 찾아보니 eslint-plugin-prettier 플러그인 사용을 권장하지 않고 있었다.

When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances.

First, we have plugins that let you run Prettier as if it was a linter rule:

eslint-plugin-prettier

stylelint-prettier

이유는?

Prettier는 자동으로 코드를 포매팅하는 것이 목적이기 때문에, 단순 포매팅 문제(탭 간격 등)를 lint 오류로 표시하는 것은 부적절하다고 판단했기 때문이다. 또한 Prettier 규칙을 ESLint 규칙으로 실행하면 순수 Prettier보다 속도가 느리다는 단점도 있다. 그래서 이제는 코드 포매팅은 Prettier를 사용하고, 그 외 린팅 규칙은 ESLint로 해결하기를 권장한다.

그럼 지금 EsLint와 Prettier를 같이 사용하려면?

prettier에서 대안으로 https://github.com/prettier/prettier-eslint 패키지를 추천해준다. 이 패키지는 prettier로 코드를 포켓팅한 후에 그 결과를 eslint --fix 한테 넘기는 방식으로 동작한다. 순수 prettier를 사용하는 것보다는 느릴 수 있어도 Prettier는 포매팅을, ESLint는 코드 품질과 버그 검사를 담당하도록 각 도구의 목적에 맞게 사용할 수 있는 장점이 있다.