husky 와 prettier 를 사용한 pre-commit 자동 포매팅

git hook 모듈인 husky 와 자동 포매팅 모듈인 Prettier 를 사용해서 커밋시점에 자동 포매팅 설정을 해봅니다.
IDE 에 Prettier 플러그인을 설치하고 저장시 자동 포매팅을 하기도 하지만... 세팅없이 동작하기 때문에 조금 더 강제적인 방법이라 생각됩니다.
(물론 npm install 이나 npm run prepare 를 잊은 팀원이 있다면 포매팅이 안될 수 있습니다.)

모듈 설치

husky, prettier Node.js 모듈을 devDependencies 에 추가합니다.
$ npm i -D husky
$ npm i -D prettier

설치 후 package.json 에 아래와 같이 추가됩니다.

"devDependencies": {
  "husky": "^8.0.1",
  "prettier": "^2.6.2"
}

husky Git hooks install, pre-commit 추가

husky 를 실행하여 초기 세팅을 해줍니다.

$ npx husky install
husky - Git hooks installed

commit 전에 hook 이 실행되어 포매팅을 하고싶으니 pre-commit 을 추가합니다.

$ npx husky add .\.husky\pre-commit "npm test"
husky - created .\.husky\pre-commit

.husky/pre-commit 이 생성됩니다.
파일을 열어보면 아래와 같이 생성되네요.

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

npm test

commit 전에 commit 대상 파일들을 포매팅

prettier 명령으로 전체 파일에 대해 포매팅을 하게되면 파일이 늘어날수록 커밋시 많은 시간을 낭비하게 되고 타인의 파일이 같이 수정되므로 충돌이 발생하기도 합니다.

commit 하려는 대상 파일만 자동 포매팅 하기 위해 Prettier Docs - Pre-commit Hook 가이드의 Option 6. Shell script 방법을 적용합니다.

#!/bin/sh

# Find commit files
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write

# Add back the modified/prettified files to staging
# NOTE git add 하게되면 prettier 로 인한 변경도 같이 commit 되므로 제외
# echo "$FILES" | xargs git add

exit 0

대상 파일들을 포매팅 해주고 add 는 하지 않도록 주석처리 했습니다.
포매팅이 된 경우 한번 더 commit 을 해야 하지만 수정 된 파일이 바로 add 되어 commit 되면 개발자가 인지할 수 없기 때문입니다. (IDE 포매팅 옵션 설정하라는 신호)

prepare 스크립트 추가

package.json "scripts" 에 prepare 를 추가합니다.

"scripts": {
  "prepare": "husky install"
},

npm 버전 7 이상인 경우 npm set-script prepare "husky install" 로도 추가할 수 있다고 합니다.
이제 npm run prepare 또는 npm install 시 husky 가 프로젝트 git 설정에 추가됩니다.

npm run prepare 실행시 .git/config 의 [core] 에 hooksPath = .husky 가 추가됩니다.