ESLint vs Prettier 차이 (With 예시)

보통 ESLint 와 Prettier는 같이 사용하는데 어떤 차이가 있는지 정리해보겠습니다. 사용설명보다는 차이에 대해 집중해서 작성하겠습니다.

 

ESLint

정적코드 검사 도구(static code analysis tool)로 안티패턴이나 문법적인 오류를 수정해줍니다.

rule을 적용하여 해당 rule에 위배되는 코드를 검사하여 수정해줍니다.

예시

rule : no-dupe-keys 적용시

Incorrect Code : bar key 중복 사용

Incoorect Code

rule : no-dupe-else-if 적용시

Incorrect Code : else if 동일 조건 사용

Incoorect Code

recommended rule이 있는데  ESLint에서 사용을 권장하는 rule 입니다. 예시는 아래와 같습니다.

rule : no-unused-vars 적용시

Incorrect Code : obj 선언 후 미사용

incorect Code

Prettier

Code Formatter로서 코드 형식을 일관되게 유지하도록 도와주는 도구입니다.

다양한 option들을 적용하여 특정 코드 형식을 지정할 수 있습니다.

 

예시

option: trailingComma 적용시

Incorrect Code

','가 Line 앞에 와있다.

Correct Code 

','를 Line 뒤에 위치한다.

option: singleQuote 적용시

Incorrect Code

Double Quote 사용

Correct Code

Single Quote 사용

 

결론

ESLint는 문법적인 오류나 안티패턴에 특화된 도구이고 Prettier는 코드 형식(스타일)에 특화된 도구입니다.

두 도구를 잘 사용하면 개발시 문법적 오류도 빨리 잡을수 있을 뿐더러

팀간 협업에 있어서도 일관된 코드를 작성할 수 있어 생산성에 큰 기여를 할 수 있을것 같네요.

 

 

관련글

2022.08.24 - [Vue.js] - [Vue] ESLint, Prettier 적용 및 VSCode 적용

[Vue] ESLint, Prettier 적용 및 VSCode 적용

 

참고자료

https://eslint.org/docs/latest/rules

Rules - ESLint - Pluggable JavaScript Linter

https://prettier.io/docs/en/options.html#

Prettier · Opinionated Code Formatter