Husky : git hooks 자동화

2022.05.25

1. Git Hooks 란?

husky에 앞어서 Git Hooks에 대해 알아야 합니다.

Git Hooks은 commit, merge, push 등 git 이벤트를 사용할때 특정 스크립트를 실행할 수 있도록 하는 트리거 기능입니다.

Git Hooks은 client hook 과 server hook으로 나누어 진다. github와 같이 서버의 repository로 push, merge와 같은 이벤트가 발생 할때 사전에 지정된 git hooks 이벤트가 push, merge 이후 진행하는 것을 server hook이라고 합니다.

github에서는 github action의 workflows templates를 사용해서 쉽게 Git Hooks를 지정할 수 있습니다.

커밋이나, push전 테스트를 통과해야한다던가, 특정 브랜치로 커밋을 방지한다 던가 하는 이벤트를 만들 수 있다.

굳이 Git Hooks를 사용하지 않고 github의 기능으로 대채를 할 수 있는 것들이 있지만 그렇지 않는 부분이 있습니다.

예를 들어 프로젝트에서 TDD로 작성한 코드를 test가 통과할 경우 진행해야 할 경우 github에서 해당 코드가 push나 merge를 했을때 해당 test가 통과할 때에만 가능하도록 할때, github에서는 테스트를 통과하지 못한 코드에 대해서 push나 merge를 하지 않도록 할 수 있습니다.

하지만 github에 올라가지 않는다 하더라도 이미 로컬에서는 commit을 진행했고, 해당 코드를 로컬에서는 되돌려야하는 수고가 듭니다. 이럴 경우 Git Hooks를 사용하여 애초에 잘못된 코드는 로컬에서 조차 commit을 하지 못하게 하여 방지 할 수 있게 합니다.

2. Husky

Git Hooks는 .git/hooks 경로로 스크립트를 작정하여 git 명령어에 대한 이벤트를 만들 수 있는데 husky는 이와같은 hook을 쉽게 npm으로 쉽게 구성을 할 수 있습니다.

2.1. husky 사용하기

husky 설치

npm init -y

yarn으로 설치
```
npx husky-init && yarn
```
npm으로 설치
```
npx husky-init && npm install
```

2.2. 내가 쓰는 husky

개인적으로 세팅해서 사용하는 husky입니다.

제가 무조건 쓰는 test, commit convention, prettier 에 관한 훅 3가지를 사용하고 있습니다.

2.2.1. pre-commit

🚩 커밋전 prettier 실행하기

설치
```
yarn add -D lint-staged prettier
```

package.json 설정

package.json

{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,html,css,json}": ["yarn prettier --write"]
  }
}

커밋전 테스트 진행하도록 하여 test가 통과할 경우에만 커밋이 되도록 합니다.

.husky/pre-commit
```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test
```

2.2.2. commit convention

🚩 커밋명 컨벤션 설정하기

커밋을 할때 커밋명에 꼭 들어가야 하는 문구 들을 포함 시킬 수 있습니다.

설치

yarn add -D @commitlint/cli
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

commitlint.config.js 파일에 컨벤션 규칙 추가

./commitlint.config.js

module.exports = {
  rules: {
    'type-case': [2, 'always', 'lower-case'],
    'type-enum': [2, 'always', ['feat', 'update', 'fix', 'del', 'refactor', 'docs', 'chore', 'test', 'revert']],
    'type-empty': [2, 'never'],
  },
};

해당 규칙은 ['feat', 'update', 'fix', 'del', 'refactor', 'docs', 'chore', 'test', 'revert']이 붙고 뒤에 커밋 내용을 작성해야 커밋이 되게 합니다.

.husky/pre-commit 수정 틀렸을때 출력하는 메시지입니다.

.husky/pre-commit

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

npx --no-install commitlint --edit "$1" ||
(
  echo '
  =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
   👋 커밋 규칙을 확인해 주세요. 👋
  =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
  '
  false;
)

2.3. husky 세팅없이 npm으로만 사용하기

사용하는 세팅이 없을 경우 npm모듈을 찾으면 빠르고 쉽게 husky를 사용 할 수 있습니다.

2.3.1. commitlint 설정

커밋시 해당 규칙을 사용 할 수 있게 합니다.

yarn add -D @commitlint/config-conventional @commitlint/cli
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

commitlint.config.js 설정

@commitlint/config-conventional에 세팅되어 있는 규칙을 그대로 사용할 수 있고 rules에 자신만의 규칙을 정해서 사용 할 수 있습니다.

./commitlint.config.js
```
module.exports = {
  extends: ['@commitlint/config-conventional'],
	rules: {
		// 사용할 커밋 린트 규칙
		}
  },
};
```

2.3.2. lint Staged & prettier

eslint와 prettier를 자동화 하여 커밋전 esnlit와 prettier를 진행 한뒤 커밋을 합니다.

yarn add -D lint-staged prettier

package.json 수정

package.json

{
	...
"lint-staged": {
  "**/*.{js,jsx,ts,tsx,html,css,json}": ["yarn prettier --write"]
}
	...
}

.husky/pre-commit 추가

.husky/pre-commit

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

yarn lint-staged