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:
Prettier는 자동으로 코드를 포매팅하는 것이 목적이기 때문에, 단순 포매팅 문제(탭 간격 등)를 lint 오류로 표시하는 것은 부적절하다고 판단했기 때문이다. 또한 Prettier 규칙을 ESLint 규칙으로 실행하면 순수 Prettier보다 속도가 느리다는 단점도 있다. 그래서 이제는 코드 포매팅은 Prettier를 사용하고, 그 외 린팅 규칙은 ESLint로 해결하기를 권장한다.
prettier에서 대안으로 https://github.com/prettier/prettier-eslint 패키지를 추천해준다. 이 패키지는 prettier로 코드를 포켓팅한 후에 그 결과를 eslint --fix 한테 넘기는 방식으로 동작한다. 순수 prettier를 사용하는 것보다는 느릴 수 있어도 Prettier는 포매팅을, ESLint는 코드 품질과 버그 검사를 담당하도록 각 도구의 목적에 맞게 사용할 수 있는 장점이 있다.
그런데 prettier-eslint는 eslint의 최신 시스템인 flat config system을 아직 지원하지 않는 것 같다. issue 보니까 flat config 제대로 지원해주는 건지 모르겠다. 마지막 릴리즈가 심지어 1월이다.
https://github.com/prettier/prettier-eslint/issues/947(24/11/11 확인함)
봇이랑 싸우고 있는 작성자…
실화냐? prettier-eslint의 메인테이너도 prettier-eslint를 안 쓴다고 한다.
https://x.com/kentcdodds/status/913760103118991361?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^913760103118991361|twgr^09d6707375a128cb6c3e06f258eb439a06605061|twcon^s1_&ref_url=https%3A%2F%2Fyrnana.dev%2Fpost%2F2021-03-21-prettier-eslint%2F