프롤로그
ESLint, Prettier 왜 써야 하나요 ?
자바스크립트는 다루기 재밌고 많은 것을 가능하게 해주는 매력적인 언어입니다.
하지만...
이런 책이 나올 만큼..^^ 자유분방하고 까다로운 언어이기도 합니다.
이런 자바스크립트를 원하는 규칙 내에 통제하여 사용할 수 있도록 도와주는 것이 바로 Eslint 와 Prettier 입니다.
ESLint와 Prettier는 개인이 자바스크립트 코드를 규칙에 따라 작성할 수 있도록 강제함과 동시에,
협업시 사용한다면 모든 참여자가 정해진 규칙에 따라 코드를 작성하게 되기 때문에 각자의 코드 스타일을 하나로 합쳐야 하는 소모적인 일을 덜어주게 됩니다.
즉, 여러 사람이 함께 작업하더라도 마치 한 사람이 작성한 것과 같은 일관적인 코드 스타일을 유지할 수 있게 해주는 아주 기특한 도구입니다 :)
ESLint
ESLint는 ES + Lint 의 합성어입니다.
여기에서 ES 는 EcmaScript로 자바스크립트를 의미하며, Lint는 보푸라기라는 의미인데요,
해석해보자면 자바스크립트 코드에 보푸라기와 같은 결점을 짚어주는 역할을 하는 도구입니다.
ESLint는 사용자가 정한 규칙에 따라 코드를 점검합니다.
- 사용자가 정한 규칙대로 일관된 코드 스타일을 유지하고 있는지 (들여쓰기, 코드 라인의 최대 너비 등)
- 추후 오류나 버그로 이어질 가능성이 있는지 (사용하지 않는 변수가 있는지, 글로벌 스코프를 불필요하게 사용하고 있는지 등)
두가지를 중점으로 검사하여 사용자에 알려주며, --fix 옵션을 사용하면 바로 규칙대로 코드를 수정하게도 할 수 있답니다 ! 자세한 사용법은 아래에서 더 알아보겠습니다.
Prettier
문법 오류와 코드 품질까지 짚어주는 ESLint와는 달리, Prettier는 포매팅에 집중한 도구입니다.
ESLint도 포매팅의 역할을 해주지만, Prettier는 코드를 조금 더 예쁘게 다듬는 역할을 합니다.
ESLint와 마찬가지로 사용자가 설정한 규칙에 따라 코드를 점검하는데요, 앞서 언급했듯 ESLint 보다 더 세세한 코드 포맷팅을 지원합니다.
두가지를 같이 써야하는 이유
종합해보면,
- ESLint는 코드의 품질과 코드 스타일을 점검해주는 린터(Linter)
- Prettier는 보다 세세한 코드 스타일을 점검해주는 포매터(Formatter)
의 역할을 하기 때문에 코드의 품질과 세세한 코드 포맷팅의 두마리 토끼를 모두 잡기 위해서는 이 둘을 같이 사용하는 것이 최선입니다.
앞서 언급했듯 이 둘 모두 코드의 스타일을 점검해주기 때문에 둘의 규칙이 서로 충돌할 수 있습니다.
ESLint보다는 Prettier가 코드 포맷팅을 더 잘해주기 때문에 충돌하는 경우 코드 포매팅은 Prettier에게 맡기는 것이 좋습니다.
충돌을 피하고 두 가지를 함께 사용하는 방법도 아래에서 더 알아보겠습니다.
ESLint, Prettier 설정하기
ESLint와 Prettier를 함께 사용하는 두 가지 방법
ESLint와 Prettier를 함께 사용하는 데에는 크게 두 가지 방법이 있습니다.
-
ESLint와 Prettier를 각각 설치하고,
eslint-config-prettier로 충돌하는 규칙을 해제하기 -
ESLint만 설치하고,
eslint-plugin-prettier를 사용하여 ESLint 내에서 Prettier 사용하기
Prettier 공식 도큐먼트에서는 1번 방식을 권장 하고 있는데요,
2번 방식이 1번 보다 느릴 수 있으며 잘못된 코드 스타일이 eslint 에러로 인식되기 때문에 빨간 줄이 계속 그어져서 열 받을 수 있다는 것이 그 이유입니다.
그러나 저는 개인적으로는 다음과 같은 점들로 2번 방식을 선호합니다.
- Prettier를 따로 설치할 필요가 없고 하나의 설정 파일(
.eslintrc)에 ESLint와 Prettier 설정을 모두 관리할 수 있습니다. - ESLint에서 발견한 잠재적 오류는 빨간 줄(에러)로, Prettier에서 발견한 잘못된 코드 스타일은 노란 줄(경고)로 표시하도록 설정할 수 있습니다.
npx eslint 파일명 --fix한 줄로 ESLint와 Prettier에서 발견한 개선점을 한번에 적용 시킬 수 있습니다.
패키지 설치
그럼 저는 두번째 방식으로 설정을 해보겠습니다. 필요한 패키지들을 먼저 설치합니다.
npm i -D eslint eslint-plugin-prettier개발환경에서 사용하는 용도이기 때문에 devDependency로 설치하기 위하여 -D 옵션을 사용하였습니다.
eslint 는 ESLint 그 자체, eslint-plugin-prettier 는 위에서 언급했듯 ESLint 내부에서 자체 규칙으로 Prettier를 사용하기 위한 용도입니다.
설정 파일 작성
이제 eslint 설정 파일을 작성합니다.
설정 파일에는 ESLint 사용을 위해 지원하려는 자바스크립트 옵션
.eslintrc 라는 파일을 만들고 다음 내용을 작성합니다.
{
"env": {
"browser": true,
"es2021": true
},
"plugins": ["prettier"],
"extends": [
"eslint:recommended"
],
"rules": {
"no-unused-vars": "warn",
"prettier/prettier": [
"warn",
{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true
}
]
}
}-
env는 어떤 환경에서 돌아가는 스크립트인지 설정합니다. 선택 가능한 환경은 다음 링크 에서 확인할 수 있으며, 여러 환경을 선택할 수 있습니다.
선택한 환경에 따라 해당 환경에서 사전 정의된 전역 변수를 사용할 수 있게 됩니다. 이 예제에서는 브라우저 환경에서 ECMAScript 2021 버전으로 스크립트를 작성할 수 있도록 환경을 설정하였습니다. -
extends는 다른 설정 파일에 정의된 내용을 확장하여 사용할 수 있게 합니다. 이 예제에서는eslint:recommended로 ESLint 가 자체적으로 권장하는 규칙들을 사용하도록 합니다. 이 링크에서 왼쪽에 체크표시가 된 rule들이 권장되는 규칙입니다. -
plugins에 서드파티 플러그인을 가져와 사용할 수 있습니다. 위에서eslint-plugin-prettier를 설치하였기 때문에 해당 플러그인을 사용할 수 있으며, 이 때 접두사eslint-plugin-을 생략하여prettier라고 적을 수 있습니다.
해당 플러그인은 Prettier 의 규칙들을 ESLint의 규칙들로 가져와 사용할 수 있게합니다. 아래 rules에서 더 살펴보겠습니다. -
rules에는 프로젝트에서 사용하는 규칙을 수정할 수 있습니다. 현재eslint:recommended에 의해 권장되는 규칙들이 자동으로 적용되고 있습니다.
여기에off(규칙 해제) ,warn(경고),error(에러) 의 세 가지 옵션으로 규칙을 하나하나 설정할 수 있습니다.
위의 예제에서no-unused-vars를warn으로 설정하여 선언 후 사용되지 않는 변수에 대해 에러가 아닌 경고만을 주도록 규칙을 수정하였습니다.
설정 가능한 ESLint 규칙의 목록은 이 링크에서 확인할 수 있습니다. -
rules의prettier/prettier부분은 Prettier의 규칙을 ESLint 의 규칙으로 가져와 사용하기 위하여 작성하였습니다. 여기에서 Prettier 규칙에 맞지 않는 코드 포맷의 경우 에러가 아닌 경고를 주도록warn으로 설정하였고, 객체로 Prettier 규칙을 설정하였습니다.
wrap 하지 않고 보여줄 수 있는 최대 너비(printWidth)는 100으로, 들여쓰기 레벨(Tab Width)는 2로 설정하고 따옴표의 경우 큰따옴표가 아닌 작은따옴표를 사용하도록(singleQuote) 설정하였습니다.
설정 가능한 Prettier 규칙의 목록은 이 링크에서 확인할 수 있습니다. -
이외에도
parser,processor등 설정할 수 있는 것들이 더 많습니다. 이 링크 에서 더 많은 내용을 찾아볼 수 있습니다 !
ESLint 실행하기
예를 들기 위해 다음과 같은 파일을 작성해보겠습니다.
// sample.js
const hihi = "hihi";;;
const bye = 'bye';
console.log(hihi);
vscode에서 ESLint Extension을 설치했다면, 에디터에서 다음과 같이 노란줄 빨간 줄이 그어지는 것을 확인할 수 있습니다.
터미널에 다음과 같은 명령어를 실행하면 ESLint 검사가 진행됩니다. 터미널에 검사 결과가 다음과 같이 표시됩니다.
npx eslint 파일명 
아 그럼 뭔가 고쳐야한다는 건 알겠는데... 이걸 하나하나 고치자니 귀찮기도 하네요..
그럴 때 --fix 옵션을 사용하면 ESLint 가 자동으로 고쳐줍니다 :)
다음과 같이 터미널에 입력해보세요 !
npx eslint 파일명 --fixhusky, lint-staged 로 자동화하기
패키지 설치
npm install -D husky lint-staged
npx husky installpackage.json 파일 수정
package.json 파일에 다음 내용 추가
{
...,
"scripts": {
...,
"prepare": "husky install",
...
},
...,
"lint-staged" : {
"*.{jsx,js}": "eslint --fix"
}
}
husky 작업 설정
npx husky add .husky/pre-commit "npx lint-staged"