ESLint 와 prettier

ESLint

ES + Lint
es : Ecma라는 기구에서 만든 Script = 표준 Javascript
Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미

• ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다. 일종의 가이드라인
• 코드상 문제가 되는 부분만을 지정할 수도 있고 , 아니면 에러 기준을 직접 지정할 수도 있다
• 또한 간단하고 전반적인 코딩스타일(ex. tab은 몇 칸을 기준으로 할 것인가? / ; 여부 등)까지 지정할 수도 있다.

예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다.
또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있다.

※ 요약 : 이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주고 오류를 잡아주는 것이 eslint가 하는 역할이다.

디테일

• env : 활성화하고싶은 환경을 설정해줍니다. 현재 브라우저, node, es6 환경이 활성화되어 있습니다.
  
• parser : parser 를 설정해줍니다. 설정하지 않을 경우 Espree가 기본 parser 로 설정됩니다. 보통 Espree, Babel-ESLint, @typescript-eslint/parser 을 사용합니다.
  
• extends : 확장 파트 extension 파트에 Prettier 를 추가하여 Prettier 를 사용할 수 있습니다. 저희는 Airbnb 설정을 사용하기로 했으니 Airbnb 도 추가해줍니다.
  
• rules : 필요한 설정, 필요없는 설정을 관리하는 파트입니다.
  • 0 : 규칙을 사용하지 않음
  • 1 : 경고 메시지만 던져줌
  • 2 : 에러로 표시함
    

ESLint 를 사용하다 별로 필요는 없는데 영 성가시게 하는 ESLint 에러가 있다면 0 으로 설정해 비활성화시키면 된다.

Prettier

코드 정리 규칙을 세부적으로 설정해놓고 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있는 플러그인이다

prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.

최종 정리

ESLint 가 문법 오류를 체크해 "이 부분 수정해!"라며 밑줄 그어 알려주는 역할이라면, Prettier 은 문법과는 상관 없이 단순 코딩 스타일만을 체크해, 파일을 저장할 때마다 자동으로 정리해주는 역할입니다.

"eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다."

ESLint는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 두었습니다.
Prettier는 코드의 최대 길이, 함수에서, 작은따옴표(')를 사용할 것인지 아니면 큰 따옴표(")를 사용할 것인지 등 코드가 예쁘게 보이도록 하는지(코드의 모양새?)에 중점을 두었습니다. 하지만 코드의 에러를 잡아내진 못합니다.

Prettier 공식 홈페이지에는 아래와 같은 문구가 존재한다.

use Prettier for formatting and linters for catching bugs!

---

참고

https://soojae.tistory.com/39
https://helloinyong.tistory.com/325