ESLint & Prettier 란?

ESLint

ESLint란 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다. 문법 중 에러가 있는 곳에 표시를 달아주어 문법적 에러를 찾아주고 코드 스타일을 유지하여 개발자가 읽기 쉬운 코드를 만들어 주는 역할을 한다.

여러 코드 작성법을 일관된 방법으로 작성할 수 있도록 도와주고, 코드의 품질관리 역할을 한다고 보면 된다.

설치 방법

npm 또는 yarn 으로 설치가 가능하다.

npm install eslint --save-dev
yarn add eslint --dev

설치를 해준 뒤 추가적으로 VSCode extention ESLint 설치가 꼭 필요하다.

플러그인

자주 쓰이는 에어비앤비 사의 ESLint 등 다양한 종류의 플러그인이 존재한다.

• eslint-config-airbnb-base: 에어비엔비 린트 플러그인
• eslint-config-next: Next.js 전용 린트 플러그인
• eslint-plugin-react: 리액트 전용 플러그인
• eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인

---

Prettier

프리티어는 코드 포매터(code formatter)이다.
ESLint처럼 코드 작성 방식이 아닌 줄바꿈, 들여쓰기, 공백, 따옴표 등 코드를 일관되게 작성할 수 있도록 도와주는 역할을 한다.
정해진 규칙에 따라 코드 스타일을 자동으로 정렬해주고 커스터마이징도 가능하다. 프리티어를 사용하면 여러명과 협업시에 코드 스타일을 통일할 수 있다.

Prettier 설치 방법

• VSCode Extension
• yarn / npm 설치

VSCode 확장프로그램을 이용해 Prettier를 설치하면 로컬 PC의 환경에 세팅되므로 .prettierrc 파일에는 적용되지 않는다.

만약 yarn / npm 을 이용해서 설치했다면 .prettierrc 파일을 꼭 이용해서 설정해 주어야 한다.

Prettier & ESLint

이처럼 Prettier와 ESLint는 코드의 품질, 가독성을 높이고 코드 스타일을 통일시켜 협업할 때 유용하므로 보통 같이 사용된다. eslint-config-prettier 를 사용하면 Prettier에서 문법 관련된 ESLint 규칙을 사용하지 않게 되어 각자의 역할을 수행한다.

• ESLint : 문법 담당
• Prettier : 코드 스타일 담당