[Git] 모노레포 환경에서 Husky로 Git Hook 설정하기(lint-staged)

Husky를 도입하는 이유

Git Hook은 기본적으로 로컬 환경에서 동작한다. 따라서 스크립트를 적용해도 팀 전체가 동일한 환경에서 개발하는 것이 보장되지않는다.

이러한 경우, Husky 라이브러리를 사용해서 Git Hook 스크립트를 팀 전체에 강제할 수 있다.

Husky 설치하기

현재 프로젝트 구조는 모노레포로 다음과 같이 구성되어있다.

.
├── packages/
│   ├── frontend
│   └── backend/
│       ├── src
│       ├── .eslintrc.js
│       ├── .prettierrc
│       └── package.json <--- Husky 설치!
├── package.json
├── pnpm-workspace.yaml
└── pnpm-workspace.lock.yaml
└── .git

(1) Husky 설치

프로젝트에서 pnpm을 사용중이여서 아래의 명령어로 설치한다.

내 경우는 packages/backend/package.json에 설치했다.

pnpm add --save-dev husky

 

 

(2) package.json에 prepare 스크립트 작성

# packages/backend/package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "prepare": "chmod ug+x .husky/* && cd ../../ && husky packages/backend/.husky"
}
...

 

prepare 스크립트가 하는 일은 다음과 같다.

1. chmod ug+x .husky/* 명령어로 .husky 폴더에 실행 권한을 부여한다. 
2. git이 설정된 디렉터리로 이동한다. 
3. Husky를 사용하여 .husky 디렉토리 내의 훅 스크립트를 설치한다.

Husky install 대신 Husky를 사용해야한다.

현재를 기준으로 husky install은 deprecated되었다고 하니 husky install 대신 husky를 써야한다.

자세한 내용은 husky/releases/tag/v9.0.1에서 확인할 수 있다.

 

Husky를 설정하는 디렉터리가 git이 설정된 디렉터리와 다른 경우

나의 경우 프로젝트가 모노레포로 구성되어있다. git은 루트에 위치하고 Husky는 packages/backend에 설정하기때문에 Husky를 설치하는 package.json에서 cd ../../와 같이 git이 설치된 위치로 잡아줘야한다.

 

자세한 내용은 Project Not in Git Root Directory by Husky Docs  공식 문서에 나와있다.

(3) pnpm run prepare 명령어 실행

해당 명령어를 실행하면 .husky 폴더가 생성되고 내부에 pre-commit 파일이 생성된다. 

이제 pre-commit 단계에 실행할 명령어를 pre-commit 파일에 작성하면 된다.

(4) pre-commit Hook 테스트하기

아래와 같이 작성한 뒤, 커밋을 날려본다. 이 때 위치는 상관없다. 

#!/usr/bin/env sh

# 현재 스크립트 파일이 위치한 디렉토리를 기준으로 .husky.sh 파일을 실행
. "$(dirname -- "$0")/husky.sh"

cd packages/backend
pnpm test

# 실행 취소
exit 1

 

커밋이 작성되지않고 에러 메세지가 뜨면 정상이다!

---

Husky 적용하기

대표적으로 많이 사용하는 lint-staged를 설정해보자!

 

(1) 라이브러리 설치

pnpm install --save-dev lint-staged

(2) package.json 스크립트 작성

# packages/backend/package.json

"scripts": {
    "checkTs": "tsc --noEmit",
    "lintStaged": "lint-staged", 
    "prepare": "chmod ug+x .husky/* && cd ../../ && husky packages/backend/.husky"
},
"lint-staged": {
	"*.{ts,tsx,js,jsx}": [
		"eslint --fix",
		"prettier --write"
	],
	"*.{md,json}": [
		"prettier --write"
	]
}

(3) .husky/pre-commit 파일 작성

나의 경우는 packages/backend/.husky/pre-commit 설정했다.

#!/usr/bin/env sh

# 현재 스크립트 파일이 위치한 디렉토리를 기준으로 .husky.sh 파일을 실행
. "$(dirname -- "$0")/_/husky.sh"

cd packages/backend

# 타입 체킹
pnpm run checkTs

# lint-staged 스크립트 실행
pnpm run lintStaged

(4) pre-commit Hook 테스트하기

eslint 에러를 발생시키도록 소스 코드를 수정한 뒤, 커밋을 작성한다. Git Hook이 정상적으로 동작하는 것을 확인할 수 있다.

이 때, lint-staged 라이브러리가 eslint가 발생하는 코드를 자동으로 규칙에 맞게 수정한 뒤 커밋한다!

Commit 추가