husky를 이용해서 git hook 관리하기(feat. eslint, commitlint)

안녕하세요.
이번 포스팅에서는 husky를 이용해서 git에 commit을 하거나 push 등을 관리하는 방법에 대해서 알아보겠습니다.

husky에 대한 자세한 설명은 husky 공식 페이지를 참고해 주세요.

Husky - Git hooks

먼저 husky를 설치하는 방법에 대해서 알아보겠습니다.
간단하게 아래의 명령어를 통해 설치를 할 수 있습니다.

$ npx husky init && yarn

위의 명령어를 실행을 하면 .husky 폴더가 생긴 것을 볼 수 있습니다.
그리고 package.json에 "prepare": "husky install" 가 추가된 것을 볼 수 있습니다.

여기까지가 초기 설치가 끝입니다.

다음으로 husky에 새로운 git hook을 추가해 보겠습니다.

$ npx husky add .husky/[hook] '[execute]'

위의 명령어에서 hook의 부분에 git hook을 입력을 하고 execute에 해당 git hook이 발생을 할 때 실행할 내용을 입력을 하면 됩니다.

예로 commit을 할 때 eslint를 이용해서 eslint에 맞게 코드를 수정하고 commit을 하도록 해보겠습니다.

$ npx husky add .husky/pre-commit "npx eslint '**/*.{ts,tsx}' --ext .ts,.tsx --fix"

위의 명령어를 실행을 하면 .husky/pre-commit 파일 안에 npx eslint '**/*.{ts,tsx}' --ext .ts,.tsx --fix 가 추가된 것을 확인할 수 있습니다.

추가로 commitlint를 이용해서 같이 작업을 하는 사람들과 commit 메세지 형식을 통일해서 사용을 할 수도 있습니다.

commitlint - Lint commit messages

commitlint를 설치를 하고 config 파일을 생성해 주겠습니다.

$ sudo npm install -g @commitlint/cli @commitlint/config-conventional

$ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

그리고 husky에 commit-msg를 추가해 주도록 하겠습니다.

$ npx husky add .husky/commit-msg "npx commitlint --edit $1"

기본적으로 [타입]: [내용]으로 커밋 메세지를 생성하도록 설정이 되어 있습니다.
타입은 build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test 설정이 되어 있습니다.
조금 더 상세한 설명은 commitlint 공식 페이지를 봐주시면 감사하겠습니다.(아직 기본 지식이 많이 부족하여 나중에 조금 더 쌓이게 되면 추가로 작성을 하도록 하겠습니다.)

혹시라도 부족하거나 잘못된 내용이 있다면 댓글 달아주시면 보완을 하도록 하겠습니다.
여기까지 부족한 글 읽어 주셔서 감사합니다.💛