git hooks, husky, lint-staged

git hooks

어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 훅은 Git 디렉토리 밑에 hooks 라는 디렉토리에 저장한다. 기본 훅 디렉토리는 .git/hooks 이다. 이 디렉토리에 가보면 Git이 자동으로 넣어준 매우 유용한 스크립트 예제가 몇 개 있다.

 

Git - Git Hooks

Git - Git Hooks

 

훅의 종류는 클라이언트 훅과, 서버 훅으로 크게 나뉘는데 자세한 내용은 위 북마크를 참고하면 되고, 여기서는 클라이언트 훅 중에 commit 관련 훅만 일부 다룬다.

 

pre-commit

커밋 명령시 커밋할 파일을 대상으로 린트등의 스크립트를 실행할 수 있는 훅이다. 커밋 되기 전에 실행 된다.

 

commit-msg

커밋 명령시 커밋 메시지의 포맷 형식등을 준수하고 있는지 체크할 수 있는 훅이다. 커밋 되기 전에 실행 된다.

 

husky

husky는 git hooks를 프로젝트에서 쉽게 지원하기 위한 도구이다.

 

커밋 또는 푸시할 때 이를 사용하여 커밋 메시지를 린트하고, 테스트를 실행하고, 코드를 린트할 수 있다.

그리고 husky는 모든 git hooks를 지원한다.

 

Husky - Git hooks

Husky - Git hooks

 

husky 사이트에 가면 husk를 다음 처럼 설명한다.

 

Modern native git hooks made easy

 

husky install

husky는 node 기반의 프로젝트에 npm 또는 yarn 으로 쉽게 설치할 수 있다.

npx husky-init && npm install       # npm
# or 
npx husky-init && yarn              # Yarn 1

husky-init은 husky 패키지를 설치하고, 현재 프로젝트의 로컬 git config 중에 core.hooksPath를 현재 디렉터리의 .husky/ 로 변경한다. core.hooksPath가 설정되지 않으면 git hooks의 기본 디렉터리인 .git/hooks/ 디렉터리가 기본값이다.

여기서 core.hooksPath가 .husky/ 로 바뀌었다는 것은 pre-commit 또는 commit-msg 등의 훅을 .husky/ 디렉터리에 위치시켜야지만 해당 훅이 동작한다는 것이다. 즉 .git/hooks/ 디렉터리에 있는 훅을 복사해와도 되고, 수행하고 싶은 쉘을 직접 작성해서 위치시켜도 된다.

 

husky 를 통해 pre-commit 훅에서 커밋 대상의 소스를 eslint 체크하기

.husky/pre-commit 쉘을 다음처럼 작성한다.

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

npx lint-staged

 

수동으로 작성해도 되지만 husky add 명령으로 쉘 파일을 만들 수 있다.

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

 

이제 커밋을 하면 방금 작성한 .husky/pre-commit 쉘에 따라 npx lint-staged 명령이 실행된다.

 

lint-staged

GitHub - okonet/lint-staged: 🚫💩 - Run linters on git staged files

GitHub - okonet/lint-staged: 🚫💩 — Run linters on git staged files

lint-staged는 실행 가능한 노드 패키지의 일종으로 현재 git local repository의 staging 영역의 파일들만을 대상으로 lint-staged 설정에 따라 별도의 명령을 수행할 수 있다. lint 또는 prettier 명령을 설정하면 된다.

 

package.json 또는 .lintstagedrc

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

 

eslint와 prettier를 수행하고 싶다면 다음처럼 설정

{
    "lint-staged": {
      "{services,packages}/**/*.{js,ts,jsx,tsx}": [ <-- glob 패턴으로 작성
        "eslint --fix",
        "prettier --write"
      ]
    }
}

 

위 설정은 npx lint-staged 명령이 실행 될 때 읽혀진다.