Husky 설정을 활용한 Commit 규칙 설정하기, CommitLint

Husky를 이용한 Commit 메시지 규칙 설정 방법입니다. 이 프로세스는 프로젝트의 Commit 메시지가 일관되고 명확하게 유지되도록 도와주며, 협업 시 팀원 간의 이해도를 높일 수 있습니다.

1. 필요한 패키지 설치

Husky, @commitlint/cli, @commitlint/config-conventional을 설치하여 Git 훅을 관리하고 Commit 메시지가 Conventional Commits 규칙을 따르는지 검사합니다.

 

npm install husky @commitlint/cli @commitlint/config-conventional --save-dev

 

• husky: Git 훅을 쉽게 관리할 수 있게 해주는 도구입니다.

• @commitlint/cli와 @commitlint/config-conventional: Commit message가 Conventional Commits 규칙을 따르는지 검사하는 도구입니다.

 

2. commitlint 설정

최상위 경로에 commitlint.config.js 파일을 생성하여 기본 규칙을 설정합니다.

 

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      ["feat", "fix", "docs", "style", "refactor", "test", "chore"],
    ],
  },
};

// We have to discussion about commit rule. (Commit rule에 대한 의논이 필요합니다.)
// feat: 새로운 기능, 페이지 추가
// fix: 버그 수정
// docs: 문서 수정
// style: css 스타일, 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
// refactor: 코드 리펙토링, 효율화
// test: 테스트 코드, 리펙토링 테스트 코드 추가
// chore: 빌드 업무 수정, 패키지 매니저 수정

 

3. Husky 활성화 및 Commit 메시지 hook 설정

Husky를 활성화하고, Commit 메시지가 발생할 때마다 commitlint로 메시지를 검사하는 hook을 추가합니다.

 

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

 

4. package.json에 Husky 스크립트 추가

다른 개발자가 프로젝트를 Clone할 때 Husky가 자동으로 설치되도록 설정합니다.

 

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

 

5. Commit 메시지 테스트

1. Commit 메시지 규칙이 제대로 작동하는지 테스트합니다.

   • 규칙에 벗어난 메시지로 시도해보고 오류 메시지가 표시되는지 확인합니다.

   • 규칙을 준수하는 메시지로 커밋하여 정상 작동하는지 확인합니다.

 

※ 주요 Commit 규칙

Commit rule에 대한 의논은 필요합니다. 많이 사용하는 Commit rule을 개인적으로 변경한 내용입니다.

(style의 경우, css 스타일도 포함 시켰습니다.)

• feat: 새로운 기능, 페이지 추가

• fix: 버그 수정

• docs: 문서 수정

• style: css 스타일, 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

• refactor: 코드 리펙토링, 효율화

• test: 테스트 코드, 리펙토링 테스트 코드 추가

• chore: 빌드 업무 수정, 패키지 매니저 수정

※ 문제 발생 시 해결 방안

1. commitlint 작동에 문제가 있다면, npx husky install을 실행하여 다시 설정합니다.

2. Husky Pre-commit Hook 설정을 위해 .husky/commit-msg 파일을 생성하여 commitlint를 트리거합니다.
   (최상위 경로, 파일 탐색기에서 가장 위로 올라가보세요.)