husky를 이용하여 ESLint자동화하기

깃 커밋 이전에,
ESLint 검사를 미리 하고, 커밋이 될 수 있도록 husky를 이용하여 ESLint를 자동화하자

husky가 뭔데?

• git hook을 쉽게 제어하도록 도와주는 매니저 도구이다

git hook이란?
Git Hooks 는 Git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다.
크게 client hook과 server hook으로 나뉘는데 client hook은 commit, Merge가 발생하거나 push가 발생하기 전 client에서 실행하는 hook
반면 server hook은 Git repository로 push가 발생했을 때 server에서 실행하는 hook이다.

husky, lint-staged를 dev로 설치해주자

yarn add -D husky lint-staged

설치 이후, package.json에 다음과 같이 작성을해준다.

•••
"lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix \"*.{js,jsx}\" --ignore-path .gitignore --max-warnings 0"
    ],
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ],
    "*.js": "eslint --cache --fix"
  }

lint-staged를 자동으로 셋팅하자

npx mrm lint-staged
를 하면 .husky의 폴더가 생성이 될 것이고,
husky폴더 내 pre-commit 파일은

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

위와 같은 코드이다.

이후, git에 commit을 하면 아래와 같이 깃에 올리기전에 ESLint를 돌린 이후, 이상이 없을 시 커밋이 되는 것을 확인할 수 있다.