Git commitizen 사용방법 및 cz-customizable 를 이용해 template 변경하기

 

들어가며

최근 새로운 프로젝트를 시작하게 되었고, 팀 문화를 작은 부분부터 개선하기 위해 노력하고 있다.

 

테스트 코드 도입, Storybook 도입 등 다양한 의견들 중에서 1 순위는 GitHub Pull Request(이하 PR)을 이용한 코드 리뷰의 강화 뽑혔다.

 

때문에 Commit Convention 및 버너닝을 확실하게 하고 앞으로 쉽게 지켜 나가기 위해 commitizen 사용을 결정하게 되었으며, 이 글은 그 과정 속 시스템을 구축한 이야기를 담고 있다.

 

Commitizen + cz-customizable 을 이용한 Commit Convertion 지키기

Commitizen은 일정한 commit message 작성을 도와주는 라이브러리로, Commit Header 와 Scope, Description, Ticket Number, Issues 등을 이모지를 이용하여 쉽게 작성할 수 있다.

 

cz-customizable는 Commitizen에 적용 될 commiting rule을 커스텀할 수 있도록 도와주는 라이브러리로, Ticket number, ISSUES CLOSED 등을 추가할 수 있다.

 

(1) Commitizen, cz-customizable 설치하기

//using npm
$ npm install --save-dev commitizen cz-customizable

//using yarn
$ yarn add -D commitizen cz-customizable

(2) Package.json의 config 설정 및 .cz-config.js 파일 작성

 

* package.json의 config에 작성

{
  ....
  "devDependencies": {
    ...,
  },
  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  }
}

* Root 경로에 .cz-config.js 파일 작성 (파일명 주의!!, .을 안 붙여서 고생함;;)

module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat:\tAdding a new feature' },
    { value: ':bug: fix', name: '🐛 fix:\tFixing a bug' },
    { value: ':memo: docs', name: '📝 docs:\tAdd or update documentation' },
    {
      value: ':lipstick: style',
      name: '💄 style:\tAdd or update styles, ui or ux',
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor:\tCode change that neither fixes a bug nor adds a feature',
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:\tCode change that improves performance',
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:\tAdding tests cases',
    },
    {
      value: ':truck: chore',
      name: '🚚 chore:\tChanges to the build process or auxiliary tools\n\t\tand libraries such as documentation generation',
    },
    { value: ':rewind: revert', name: '⏪️ revert:\tRevert to a commit' },
    { value: ':construction: wip', name: '🚧 wip:\tWork in progress' },
  ],

  scopes: [
    { name: 'ui' },
    { name: 'android' },
    { name: 'ios' },
    { name: 'home' },
    { name: 'planner' },
    { name: 'settings' },
  ],

  scopeOverrides: {
    fix: [{ name: 'merge' }, { name: 'style' }, { name: 'test' }, { name: 'hotfix' }],
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],
  subjectLimit: 100,
};

 

(3) Package.json의 script 설정

{
  "scripts": {
    ...,
    "cm": "cz"
  },
  "dependencies": {
    ...
  }
}

위 설정을 완료한 후 아래 명령어를 입력하면 commitizen을 실행할 수 있다.

$ git add .

//using npm
$ npm run cz

//using yarn
$ yarn cz

(4) 실행하기

첫 화면

명령어를 입력하게 되면 위 화면처럼 commitizen이 실행되면서 방향키 엔터를 통해 Commit Header를 선택할 수 있다.

.cz-config.js 추가 설정

필자는 아래 설정을 통해 ticket number을 추가해서 사용하고 있다.

  allowTicketNumber: true,
  isTicketNumberRequired: true,
  ticketNumberPrefix: 'test-',

모든 작성을 마치면 아래 사진처럼 예쁜 커밋을 작성할 수 있다.

완료 사진

참고 문서

링크_1

링크_2

링크_3

commitizen

GitHub - leoforfree/cz-customizable: A standalone commit message helper or customizable commitizen adapter for https://github.co

 

Make everyone in your project write beautiful commit messages using commitlint and commitizen 🚀