ESLint + Prettier

ESLint
ESLint는 ES + Lint의 합성어로 ES는 EcmaScript를 의미하고 Lint는 보푸라기라는 뜻인데, 프로그래밍에서는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다. 즉 ESLint는 JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. 코딩 컨벤션 및 안티 패턴을 자동 검출 하므로 옮바른 코딩 습관을 위해 필히 사용할 것을 권장한다.

 

ESLint는 스타일 가이드를 편리하게 적용하기 위해 사용되기도 하는데, 많은 개발자가 사용중인 Airbnb Style Guide, Google Style Guide가 대표적인 예이다.

 

Prettier
Prettier는 기존의 코드에 적용되어있던 스타일들을 전부 무시하고, 정해진 규칙에 따라 자동으로 코드 스타일을 정리해 주는 코드 포멧터이다.

 

코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말한다.

근데 하나만 쓰면 되지, 왜 둘을 같이 쓰나요?

ESlint는 문법 에러를 잡아내고 특정 문법 요소를 쓰도록 만드는 등 코드 퀄리티와 관련된 것을 고치기 위해 사용하고, Prettier는 한 줄의 최대 길이나, tab을 쓸 것인지 space를 쓸 것인지, 인용스타일은 '로 할 것인지 "로 할 것인지 같이 문법적으로는 문제가 안되지만 미학적(?)으로 문제가 되는 것들을 잡아서 고쳐내는 데 사용합니다.

 

따라서 Prettier를 같이 쓰면, ESLint와 Prettier로 스타일, 코드 퀄리티를 바로 잡은 뒤 파일을 자동으로 그에 맞게 바꾸는 것이죠.

 

eslint 모듈

프로젝트 디렉토리로 왔다면, 터미널을 켜서 다음 명령어를 입력합니다.

 

$ npm install eslint --save-dev

자 이제 좀 기다리면 eslint 설치가 완료됩니다!

 

prettier 모듈
같은 디렉토리에서 역시 터미널에 다음 명령어를 입력합니다.

 

$ npm install prettier --save-dev --save-exact

한가지 주목할 점은 eslint 모듈을 설치할 때와는 다르게 --save-exact 옵션이 추가됐다는 것입니다. Prettier에서는 이 옵션을 붙이는 것을 추천하는데요. 버전이 달라지면서 생길 스타일 변화를 막기 위해서라고 합니다.

eslint 와 prettier를 함께 쓰려면 추가로 여러 모듈을 설치해야 합니다.
eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화합니다.
eslint-plugin-prettier: 코드 코맷할 때 Prettier를 사용하게 만드는 규칙을 추가합니다.
다음 명령어로 위에서 언급한 모듈을 설치합니다.

 

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

 

VS Code에 ESLint, Prettier 확장프로그램 설치하기

VS Code 설정하기
VS Code에서 파일을 저장할 때마다 자동으로 고쳐지게 하고 싶다면, 설정을 좀 만져줘야합니다. VS Code의 설정(윈도우, 리눅스에서는 Ctrl + ,, 맥에서는 Cmd + ,)으로 들어갑니다.

위 스크린샷에서 가리키는 아이콘이 있을 겁니다. 이걸 클릭하면 VS Code의 설정파일인 settings.json을 직접 편집할 수 있는데요, 여기에 다음의 키-값 쌍들을 추가합니다.

{
 // Set the default
 "editor.formatOnSave": false,
 // Enable per-language
 "[javascript]": {
	"editor.formatOnSave": true
	},
 "editor.codeActionsOnSave": {
	// For ESLint
	"source.fixAll.eslint": true
	}
}

ESlint 설정 파일
그리고 프로젝트의 루트 경로에 .eslintrc.json파일을 만들고 아래 내용을 추가합니다.

{
    "plugins": ["prettier"],
    "extends": ["eslint:recommended", "plugin:prettier/recommended"],
    "rules": {
    "prettier/prettier": "error"
    }
}

.eslintrc.json파일에서 ESLint 공식문서를 보고 원하는 규칙을 추가하거나 뺄수 있습니다.

Prettier 설정
prettier 규칙은 .prettierrc.json파일을 .eslintrc.json과 같은 위치에 만들고, Prettier의 옵션 문서에서 필요한 설정을 골라 안에 채워 넣으면 됩니다. 다음 내용처럼 말이죠.

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
}