[React] Prettier와 ES lint

Prettier는 formatter고 eslint는 linter이다. 두 개의 차이점과 사용법을 알아야 더 스마트하게 사용할 수 있다.

 

오류를 잡으려면 린터, 스타일을 교정하려면 포맷터를 사용하는게 좋다.

 

린터 룰은 크게 포맷팅(스타일) 룰과 코드 퀄리티 룰이라는 두가지 카테고리로 나눌 수 있다. 사용되지 않은 변수를 오류로 분류하는 no-unused-vars 같은 코드 퀄리티 룰은 prettier같은 포맷터가 잡아낼 수 없다. prettier는 코드 포맷팅에 특화되어 있으므로 eslint가 할 수 없는 최대 글자 길이에 맞춘 자동 포맷팅을 할 수 있다.

 

Prettier와 eslint를 같이 사용하기

그렇다면 prettier와 eslint를 동시에 사용하려면 어떻게 설정해야 할까?

예를 들면 facebook 팀에서 제공하는 eslint-config-react-app (CRA를 사용하면 기본적으로 세팅되어있는 eslint config)을 사용하는 경우 non-style 룰만 포함되어 있기 때문에 별다른 설정 없이 prettier를 같이 사용해도 문제가 안된다.

 

그런데 일부 eslint config 를 설치해서 사용하려 하는데 prettier와 충돌하는 경우 어떻게 해야할까? 여러가지 접근법이 있는데, prettier 실행 후 eslint를 실행하는 방법이 있고, 충돌하는 eslint 규칙을 전부 꺼주는 방법도 있다.

 

1. eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림

코드 오류를 잡는데도 eslint, 코드 포맷팅에는 prettier를 사용하는 방법이다.

2. eslint-plugin-prettier : prettier를 eslint의 rules로 동작하게 함

포맷팅 문제도 오류로 출력되어서 오류 메시지가 지나치게 많아지며 느리다.

3. prettier-eslint : prettier를 실행하고 나서 eslint --fix 를 실행함

prettier를 단독으로 실행하는 것 보다 훨씬 느리다.