ESLint와 Prettier

ESLint와 Prettier는 모두 코드의 일관성과 품질을 유지하는 데 중요한 도구이다.
각 도구는 서로 다른 목적을 가지고 있지만, 함께 사용하면 코드의 가독성와 유지 보수성을 크게 향상시킬 수 있다.

ESLint

ESLint는 자바스크립트 코드의 문제를 식별하고 수정할 수 있는 정적 코드 분석 도구이다.
주로 코드의 문법 오류, 스타일 문제, 잠재적 버그 등을 찾아내어 개발자가 품질 높은 코드를 작성할 수 있도록 도와준다.
대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있지만, 인터프리터 언어인 자바스크립트에는 Linter가 내장되어 있지 않다.

ESLint 설치 방법

npm install eslint --save-dev

ESLint 주요 기능

1. 문법 검사: 자바스크립트 코드의 문법 오류를 검사한다.
2. 코딩 스타일 검사: 코딩 스타일을 일관되게 유지할 수 있도록 도와준다.
3. 커스터마이징 가능: 다양한 플러그인과 규칙을 사용하여 검사 규칙을 사용자 정의할 수 있다.
4. 자동 수정: 일부 오류와 경고를 자동으로 수정할 수 있다.

Prettier

Prettier는 코드 포매터(Formatter)이다.
코드를 일관된 스타일로 자동으로 포매팅하여 가독성을 높이고, 코드 리뷰 과정에서 스타일 문제를 줄여준다.

Prettier 설치 방법

npm install prettier --save-dev

Prettier 주요 기능

1. 자동 포매팅: 코드 스타일을 자동으로 일관되게 유지한다.
2. 설정이 간단함: 최소한의 설정으로 코드 스타일을 강제할 수 있다.
3. 다양한 언어 지원: 자바스크립트, 타입스크립트, CSS, HTML 등 여러 언어를 지원한다.

결론

ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해주지만, Prettier는 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해준다.

ESLint와 Prettier 함께 사용하기

npm install eslint-config-prettier eslint-plugin-prettier --save-dev