1. ESLint와 Prettier를 왜 사용할까?
ESLint와 Prettier는 처음 개발하는 사람들에게 프레임워크나 언어에 비해 생소한 툴로 다가올 수 있다. 간단하게 말하자면 ESLint와 Prettier 모두 코드 컨벤션을 잡아주는 툴로, 개발을 시작하기 전 환경 세팅을 하는 것이라 볼 수 있다. 그러나 ESLint와 Prettier는 비슷해보이지만 서로 다른 기능을 가지고 있다.
2. ESLint란?
ESLint를 설명하기 전에 Lint를 먼저 알아야 한다. Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등에 표시를 달아놓는 도구를 말한다.
ESLint는 수 많은 종류의 Lint 중 자바스크립트 코드에서 해당 문제 패턴들을 찾아주는 코드 분석 도구이다.
사용자가 직접 ESLint의 설정을 변경할 수 있기 때문에 필요에 맞게 변경하여 구현 방식을 결정할 수 있다.
사용자가 일일이 설정을 바꿀 수도 있지만, 사람들이 자주 사용하는 세팅들로 설정해둔 plugin을 이용하면 한 번에 설정할 수도 있다.
대표적으로 eslint-config-airbnb-base (에어비엔비 린트 플러그인), eslint-plugin-react(리액트 전용 플러그인) 등이 있다.
ESLint는 npm 또는 yarn을 이용해 설치 후, vscode의 eslint extension을 설치하면 사용 가능하다.
npm install -D eslint
yarn add -D eslint
eslint가 설치되면 .eslintrc라는 파일이 생성되는데, 여기서 세팅을 할 수 있다.
.eslintrc 파일에는 대표적으로 plugins, extends, rules 등의 설정이 있다.
plugin은 앞서 언급했듯이 만들어져 있는 설정 세트를 가져오는 것과 비슷하다. 따라서 npm이나 yarn으로 설치하면 적용이 가능하다.
rules는 사용자가 일일이 직접 설정을 바꿀 수 있는 부분으로, plugin으로 세팅을 설정했더라도 rules를 통해 세부사항을 조금씩 변경할 수 있다.
3. Prettier란?
ESLint가 프로그램 오류나 버그 등을 잡아주는 코드 분석 도구였다면, Prettier는 코드 스타일을 교정해주는 툴(code formater)이다.
max-len, no-mixed-spaces-and-tabs, keyword-spacing 등 다양한 코드 스타일을 설정할 수 있다.
Prettier 또한 npm이나 yarn으로 설치가 가능하다.
npm install prettier --save-dev
그러나 Prettier는 ESLint와 함께 사용할 때 충돌이 날 가능성이 있다.
ESLint와 Prettier는 각각 코드 퀄리티와 코드 포맷팅을 수행하기 때문에 서로 다른 역할을 하지만, 둘의 역할이 겹치는 부분이 존재한다.
따라서 이 부분에서의 충돌을 막아주는 세팅이 중요하다.
plugin 중 eslint-config-prettier는 충돌하는 부분의 설정을 모두 해제하므로 이를 사용하면 쉽게 충돌을 막을 수 있다.
참고
https://eslint.org/
https://prettier.io/
https://helloinyong.tistory.com/325
https://velog.io/@yrnana/prettier%EC%99%80-eslint%EB%A5%BC-%EA%B5%AC%EB%B6%84%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90
