husky: git hook을 통한 테스트 및 린트 자동화

 

husky는 깃 훅에 따라 원하는 동작을 하게 도와주는 패키지입니다.

git add나 commit, push가 시행되기 전이나 후에 원하는 스크립트를 실행시켜주죠.

오늘은 husky를 사용하는 방법에 대해 알아보겠습니다!

 

주로 사람들이 많이 사용했던 ver 4에서는 다음과 같이 husky를 package.json에서 설정했습니다.

{
  "husky": {
    "hooks": {
      "pre-commit": "yarn test"
    }
  }
}

 

그러나 이제는 버전 6이 나왔고, ver 6에 대한 사용법으로 살펴보겠습니다.

 

 

1. husky 설치하기

우선 두 가지 방법이 가능합니다.

a) husky를 처음 사용한다면?: 자동으로 설치

npx husky-init && npm install 
// npx husky-init && yarn

 

b) husky를 수동으로 설치

npm install --save-dev husky 
// yarn add --dev husky

npx husky install

 

두 방법 중 하나를 수행하면 .husky 라는 폴더가 루트에 생기게 됩니다.

기존에 package.json에서 설정하던 내용이 앞으로 여기에 파일로 추가되는 것이죠.

 

 

2. husky 셋업하기

그리고 package.json의 스크립트에 한가지를 추가해주어야 합니다.

이는 설치 후 자동적으로 깃 훅이 가능하게 만들어준다고 합니다.

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

 

 

3. 새로운 hook 추가하기 (pre-push test)

이제 새로운 hook을 추가해보겠습니다. 우선 push하기 전에 jest 테스트를 수행하도록 만들어보죠!

우선 저는 package.json에 jest 테스트(jest --coverage)를 위한 test-coverage 스크립트를 만들어두었습니다.

그리고 아래와 같은 명령어를 실행합니다.

(jest를 통한 테스트에 대해 모르거나 궁금하시다면 관련 포스트를 참고해주세요)

npx husky add .husky/pre-push 'yarn test-coverage'
// 다음과 같은 형식입니다. npx husky add .husky/[hook] '[code]'

 

그럼 .husky 폴더안에 다음과 같은 pre-push 파일이 생성됨

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

yarn test-coverage

 

실제로 push를 해보면 잘 되는 것을 확인할 수 있음.

 

 

4. commit 전에 eslint 확인하기 (pre-commit lint)

우선 eslint script를 만들어 둡니다.

// package.json
{
  ...,
  "scripts": {
    ...
    "lint-fix": "eslint '**/*.{ts,tsx}' --ext .ts,.tsx --fix"
  },
  ...
}

 

 

스크립트에 대해 간단히 살펴보자면, 우선 기본적으로 js만 검사하기 때문에 —ext를 통해 ts, tsx로 확장자를 추가했습니다.

(js는 config 등으로 설정한 파일이 많아서 제외했습니다)

그리고 검사만 하는 것이 아니라 자동 수정까지 원하기 떄문에 —fix 붙였습니다.

또한 ts, tsx 확장자를 가진 파일을 모두 검사하기 위해서 ''로 감싸서 경로를 설정했죠.

 

이제 위에서 했던 것과 같이 해당 명령어를 pre-commit 훅에 추가합니다.

npx husky add .husky/pre-commit 'yarn lint-fix'

 

그럼 .husky 디렉토리에 pre-commit 파일이 생기게 됩니다.

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

yarn lint-fix

 

 

 

기타) 내가 수정한 파일만 린트 검사하기: lint-staged

우리가 pre-commit에 달았던 린트 검사는 모든 파일에 대해 확인합니다.

그러나 만약 모든 파일에 대해 검사하기에 오래 걸리거나, 프로젝트 중간에 린트를 추가해서 한 번에 수정되기 원하지 않을 수도 있습니다. 그럴 경우 자신이 수정한 파일만 검사할 수 있도록 하는 lint-staged 패키지가 존재합니다.

 

우선 패키지를 설치합니다.

yarn add --dev lint-staged
// npm i -D lint-staged

 

그리고 package.json에 lint-staged와 그걸 수행하는 스크립트를 추가합니다.

{
  ...
  "scripts": {
  	...
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{ts,tsx}": [
      "eslint --fix"
    ]
  },
  ...
}

 

이제 .husky의 pre-commit 파일에 가서 명령어를 수정합니다.

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

yarn lint-staged

 

이제 잘 작동하는지 한 번 commit을 해볼게요!

 

성공적으로 작동하는 것을 확인하실 수 있죠?