[Eslint & Prettier] Eslint와 Prettier에 대해 알아보자

어느 JS강의를 보던 Eslint와 Prettier 설정은 기본 옵션으로 달고 시작한다. 

도대체 이것들이 뭔데 다들 이걸 설정하고 시작하는걸까?

---

Eslint

Lint는 보푸라기라는 뜻으로 프로그래밍에서 에러가 있는 부분에 표시를 하는 행위를 뜻함
Es는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어
그러니까 자바스크립트 표준 문법에 맞지 않는 코드의 에러 표시를 도와주는 도구라고 생각하면 좋을듯

 

JS나 JSX의 정적 분석 도구로 코드의 문법적 오류나 안티 패턴을 찾아주고 코드의 일관된 형태를 유지시키는데 도움을 주는 오픈소스 프로젝트다. 정적 분석 도구는 이전에도 많이 있었지만 Eslint는 커스터마이징과 확장성이 우수해 많은 곳에서 사용하고 있다. 

오픈소스 프로젝트이기 때문에 에어비앤비나 구글에서 제공하는 Eslint 규칙을 사용할 수 있다.

---

 

Prettier

prettier는 코드 포맷터로서 프로그래밍을 할 때 일관된 형태를 코딩을 할 수 있도록 수정해주는 도구다.

 

사람마다 코딩 스타일이 다른데 예를 들어 어떤 사람은 "을 사용하는 걸 선호하고 어떤 사람은 '을 사용하는 걸 선호하는 경우가 있을수도 있다.

또한, if문을 작성할 때 어떤 사람은 모든 조건을 한 줄에 쓰는 걸 선호하고 어떤 사람은 조건마다 줄넘김을 하는 사람이 있을 수 있다.

이 문제는 협업을 할 때 문제가 발생하는데 이를 방지하고 통일된 규칙으로 코드를 짜는 걸 도와주는 도구가 Prettier다.

---

여기서 궁금점이 생긴다.

 

Eslint와 Prettier의 차이점은?

가장 핵심적인 차이점은 Eslint는 문법적 일관성을 Prettier는 표현적 일관성을 유지시켜준다는 점이다.

예를 들어

Eslint의 경우 n = n + 1을 입력할 경우 n += 1로 바꾸는 것을 추천하고(일관되고 최적화된 문법을 추천)

Prettier는 if(--- && ------ && ------ &&)와 같은 조건을 입력할 경우 각 조건마다 줄넘김을 하는 것을 추천한다(문법은 상관없고 구조적으로 일관된 형태를 추천)

 

그래서 보통 Eslint와 Prettier를 같이 쓰는 경우가 많은데 다음 글에선 두 개를 연동해서 설정하는 법을 나타내보겠다.

2023.01.04 - [React 개발일기/환경설정] - [Eslint & Prettier 설정] VScode에서 기본 설정을 해보자(추가 오류 보완)

[Eslint & Prettier 설정] VScode에서 기본 설정을 해보자(추가 오류 보완)