ESlint & Prettier

ESlint

ES LInt는 ES + Lint의 합성어이다.
ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미하고,
Lint는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다.
에러와 코드를 일관되게 잡아주기 때문에 여러명이 협업시 유용하다.
코딩 컨벤션 및 안티패턴들을 자동 검출하므로 사용하는것이 좋다고 한다.

Prettier

Prettier는 코드를 보기좋게 정해진 코딩 컨벤션 대로 정렬해 주는 도구이다.
기존의 코드에 적용되어있던 스타일들을 전부 무시하고, 정해진 규칙에 따라 자동으로 코드를 변환한다.

ESlint & Prettier 비교

ESLint는 문법 에러나 설정한 룰과 맞지 않는 코드를 검사하고 알려주기 위한 툴이라면,
Prettier은 설정한 코딩 스타일에 맞게 코드를 일괄적으로 바꿔주는 역할을 한다.
(예를 들어 코드의 한 줄 길이나, 세미콜론 여부 등의 설정을 해준다.)
ESLint에도 Prettier와 같이 자동으로 코드를 변환해주는 기능이 있는데 Prettier와 충돌이 나지 않게 하기 위해서 추가로 모듈이 필요하다.

esLint-config-prettier
: ESLint의 formatting 관련 설정 중 Prettier와 충돌할 수 있는 모든 규칙을 비활성화한다.
esLint-plugin-prettier
: ESLint에 Prettier의 포매팅 기능을 추가한다. Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.