Etc.

husky + commitizen : 커밋 컨벤션 맞추기

ㅋ. ㅋ 2024. 3. 4. 10:43

 

 

husky + lint-staged : 커밋 전 eslint, prettier 검사

husky + lint-staged를 이용해 eslint와 prettier가 적용 됐을 때만 커밋 가능하게 만들것이다~ 그전에 husky와 lint-staged를 알아보자 # Husky Automatically lint your commit messages,code, and run tests upon committing or pushing.

baeritas.tistory.com

Husky 2탄! 설치 방법은 위 글을 보면 되고 버전은 9!

Husky는 git hook 기능을 편리하게 사용할 수 있도록 도와준다

Git Hooks란? 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다.

 

 

이번에 할 것은 commitizen !! + commitlint
commit convention을 통일하기 좋은 라이브러리다

 

 

commitizen을 실행하면 이런 창이 뜬다

기능마다 설명까지 너무 좋아 ~~~!!

 

기능 선택하면 커밋 메세지를 작성 할 수 있다

이렇게 모든 개발자들의 커밋 메세지가 통일된다면 변경내역을 파악하거나 추적하기 편할 것 같다

 

 


 

 

husky를 이용해

1. git commit를 치면 바로 commitizen이 실행 되도록 할 것이다

2. commitlint도 설정해서 정해진 커밋 컨벤션을 지키지 않으면 커밋이 되지 않도록 할 것이다

 

 

yarn add commitizen --dev
yarn add -D @commitlint/cli @commitlint/config-conventional

commitizencommitlint를 설치한다

https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional

어떤 커밋 컨벤션을 따르는지는 위 페이지에서 확인 할 수 있다

 

echo "exec < /dev/tty && yarn git-cz --hook || true" > .husky/prepare-commit-msg

git commit을 쳤을 때 commitizen이 실행되게 하려면 터미널에 해당 명령어를 쳐주면 된다

 

아니면 직접 .husky 폴더 밑에 prepare-commit-msg 파일 만들고 exec < /dev/tty && yarn git-cz --hook || true 치는 것도 된다.

처음에 pre-commit 단계에서 저 명령어를 쳤어서

commitizen 실행했는데 또 빈 commit 메세지 입력 창이 떠서 당황

알고보니 prepare-commit-msg 단계에 실행해야 했다

pre-commit은 커밋전에 실행 prepare-commit-msg 커밋 메시지를 생성하고 나서 편집기를 실행하기 전에 실행된다.

 

 

echo "npx --no-install commitlint --edit $1" > .husky/commit-msg

이건 커밋메세지가 컨벤션을 잘 따랐는지 확인하는 단계!

commit-msg 단계에서는 스크립트가 0이 아닌 값을 반환하면 커밋되지 않는다.

 

컨벤션 안지키면 위와 같은 오류가 나며 커밋 실패 !

 

vs code 소스제어 탭에서 커밋컨벤션을 지키지 않은 채 커밋을 해버려도 commitlint가 작동해서 커밋이 안된다 ~.~

 

 

husky + lint-staged + commitizen + commitlint 최종완성본 ~

git commit 하면

1. lint, prettier 검사

2. commitizen 실행해서 커밋 메시지 작성

3. commitlint로 커밋 메시지 컨벤션 검사

 


 

 

팀 프로젝트에 적용하자고 제안을 해보고 싶은데 기존 프로젝트는 내부망에 패키지 새로 까는게 너무 힘든 일이라 새 프로젝트 들어가면 말해봐야겠다잉