husky + lint-staged를 활용하여 git hook걸기

이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다.

 

먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다.

// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

일단 나와 같이 husky가 설치되어 있는 사람의 경우 아래를 실행하여 husky의 버전을 올리고 husky를 init 해준다.

npm i -D husky@latest // husky@7.0.4 기준 
npx husky install

처음 설치하는 사람의 경우 아래를 실행하여 간단하게 설치할 수 있다.

npx husky-init && npm install

위의 코드를 정상적으로 실행하였다면 project폴더에는. husky 폴더가 생성되었을 것이다.

그리고 협업이나 다른 PC에서의 작업할 때를 생각해 아래의 스크립트를 추가해 주면 좋다.

// package.json
"scripts": {
  ...
  "prepare": "husky install",
  ..
}

 

이제 간단하게 pre-commit 스크립트를 사용하기 위해 lint-staged를 설치해 준다.

npm i -D lint-staged

그리고 lint-staged에 pre-commit 하고 싶은 내용들을 추가한다.

// package.json
{
  ...
  "scripts": {
  ...
  "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{tsx,ts,jsx,js}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

나는 project 내 모든 tsx, ts, jsx, js파일에 대하여 검사하기로 설정했다.

그리고 마지막으로 아래를 실행해 준다.

npx husky add .husky/pre-commit "npm run lint-staged"

그럼. husky파일에 pre-commit 스크립트가 생성되고 이것으로 모든 과정이 끝이다.

> lint-staged

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[main 89c8cd1] test
 1 file changed, 1 insertion(+), 1 deletion(-)

터미널에 생성한 task들이 나온 뒤 아래와 같이 검사 후 commit 된다면 정상 동작하는 것이다.