린트는 코딩할 때마다 수시로 실행해야 하는데 이러한 일은 자동화 하는 것이 좋다
깃 훅을 사용하는 방법과 에디터 확장 도구를 사용하는 방법을 각각 알아보자
깃 훅을 사용한 자동화
소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다
커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼어들 수 있는 훅을 제공한다
husky는 깃 훅을 쉽게 사용할 수 있는 도구다
커밋 메세지 작성전에 끼어들어 린트로 코드 검사 작업을 추가해보자
webpack v5부터는 husky 패키지를 다운받지 않고 lint-staged를 설치한다
$ npx mrm@2 lint-staged해당 패키지를 설치하면 package.json에 자동으로 아래 코드가 추가될 것이다
{
"lint-staged": {
"*.js": "eslint --cache --fix"
}
}이제 커밋 시 eslint --cache --fix코드가 자동 실행될 것이다
에디터에서 검사하는 방법
VSCode Extensions에서 ESLint를 설치한다
VSCode의 settings.json에 아래 코드를 추가한다
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},코드 작성 후 저장하면 이제 매번 저장할 때 마다 ESLint가 코드 검사를 실행할 것이다
FE Developer