Husky로 Commit Message 포맷 설정

 

git hook과 husky에 대한 설명은 아래 포스트에 작성해두었다. 

Frontend) Git-husky가 무엇인가

---

commit을 남길 때 git hook으로 메시지 포맷을 확인하려고 했다. 찾아보니 commitlint라는게 있었다. 그래서 그걸 설정해주고 commit-msg hook에 commitlint를 한번 체크해주기로 했다. 위 포스

 

 

Commit Types

커밋을 너무 어렵게 남겨야 된다면 남기기 싫어질..거니까 간단하게 한 줄만 남겨도 되지만 Semantic Versioning에 따라 커밋 메시지에 커 타입을 prefix로 달기로 했다.

 

• feat: 새로운 기능이 추가 되었을 때 사용함.
  • Semantic Versioning에서 MINOR 버전이 변경되어야 함 예) x.3.x -> x.4.x
• fix: 버그 수정이 되었을 때 사용함.
  • Semantic Versioning에서 PATCH 버전이 변경되어야함 예) x.x.2 -> x.x.3
• docs: 문서 변경이 될 때 사용함.
  • 예) readme.md, 사용자 가이드, API 명세 등
• style: 코드 스타일 수정 시 사용함.
  • 예) 코드 포맷팅 변경, 불필요 주석 제거, 사용 안하는 코드 제거, 띄어쓰기 등
  • style 타입은 코드의 포맷팅에 관련된 부분이 변경된 경우만 사용함. 만약 코드를 재구성 하다가 기능에 변경이 생길 것 같은 경우 다른 타입을 사용해야됨.
• refactor: 코드 구조 수정 시 사용함 (코드 리팩토링)
  • style 타입은 코드의 포맷팅에만 관련이 되어 있다면 refactor는 코드가 위치하는 파일을 바꿨거나 공통으로 사용된 코드를 통합했거나 한 경우 사용
  • 예) 다자인 패턴의 변경, 여러군데서 비슷하게 사용하고 있던 함수를 helper 함수로 묶어서 사용 등
• test: 테스트 코드 추가 및 수정을 했을 때 사용함
• chore: 프로그램에 영향을 주지 않는 configuration 변경 시 사용함
  • 예) Dependency 버전 변경, eslintrc.json 수정, .env 파일 수정, .npmrc 수정 등
• perf: 성능 개선을 한 경우 사용함
  • 예) 검색 알고리즘에서 불필요한 연산 줄임, Virtual Scroll을 이용해서 리스트 렌더링 최적화 등
• ci: CI 관련 configuration 수정
• build: 빌드/배포에 관련된 내용 수정에 사용함
  • 예) vite에 빌드 관련 config 수정, 빌드 할 때 사용되는 새로운 library 추가 등
• revert: 이전에 작성한 커밋을 되돌리는 경우 사용함

 

CommitLint 적용하기 

commit-msg

husky로 적용할거니까 그 아래 폴더에 정의해줘야 한다. 

husky를 잘 설치했다면 프로젝트 루트 폴더에 .husky라는 폴더가 있다. 없으면 위 포스트를 보고 설치하시길.. 

.husky/commit-msg 파일을 만들어 준다. 

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

npx --no-install commitlint --edit $1

따로 패키지를 설치하지 않고 commitlint를 실행시킬 수 있는 커맨드다. 

commitlint.config.cjs

commitlint 설정 파일을 프로젝트 루트에 만들어준다. 

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
      'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'pref', 'ci', 'build', 'revert']],
      'type-case': [2, 'always', 'lower-case'],
      'type-empty': [2, 'never'],
      'subject-case': [0]
    },
  };

룰이 엄청 많은데 나는 커밋 타입만 체크할거라 몇 개 없다. 여기서 룰들을 확인할 수 있다. 추가가 필요하면 더 살펴보는 것으로..

 

cjs vs js 

왜 인지..js 파일로 하니까 오류나서 cjs로 바꾸니까 됐다. 그래서 cjs 와 js의 차이점을 찾아봤는데 여전히 이유는 잘 모르겠다. 일단 둘의 차이점은 어떤 커뮤니티에서 이렇게 설명하고 있다. 좀 더 확인이 필요하다. 

출처: https://gall.dcinside.com/mgallery/board/view/?id=github&no=34269

 

commit 날려서 테스트해보기

잘못된 커밋 메시지 

타입이 없어서 안된다.

올바른 커밋 메시지

된다.

 

굿잡 승윤

👏🏻👏🏻👏🏻👏🏻