Commitizen でチームのコミットメッセージの形式を統一する #チーム開発

概要

チームで開発しているとコミットの粒度・形式がバラバラになってしまう事があると思います。今回はそんな時に使える Commitizen とそのプラグインである cz-customizable を紹介します。

Commitizen とはチーム向けにコミットメッセージのルールを定義する為のツールで、cz-customizable は Commitizen で独自のルールを定義するためのプラグインになります。

導入すると対話に答えるだけでコミットメッセージの形式を統一する事が出来るようになります。(絵文字かわいい)

commitizen cz-customizableのインストール

まずは必要になるパッケージをダウンロードしましょう。

npm i -g commmitizen
npm i -D cz-customizable

cz-customizableのセットアップ

cz-customizable をプラグインとして利用するように設定を行います。
package.json に以下を追加してください。

package.json

...　省略
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

configファイルの追加

cz-customizable は実行時にプロジェクト直下にある .cz-config.js を設定ファイルとして読み込むので、プロジェクト直下に .cz-config.js というファイルを作って以下を記述してください。

こちらは普段僕が利用している設定で、コミットメッセージのフォーマットは Angular 開発チームのものを参考にしています。
チームのフォーマットに合わせて好きに書き換えてください。(各プロパティの詳しい説明については公式をご確認ください)

.cz-config.js

module.exports = {
  types: [
    {
      value: '🌟 feat',
      name: 'feat: 機能追加',
      title: 'Features',
    },
    {
      value: '🔧 fix',
      name: 'fix: バグの修正',
      title: 'Bug Fixes',
    },
    {
      value: '🗒 docs',
      name: 'docs: ドキュメントのみの変更',
      title: 'Documentation',
    },
    {
      value: '🎨 style',
      name: 'style: コードの動作に影響しない、見た目だけの変更（スペース、フォーマット、欠落の修正、セミコロンなど)',
      title: 'Styles',
    },
    {
      value: '♻️ refactor',
      name: 'refactor: バグの修正や機能の追加ではないコードの変更',
      title: 'Code Refactoring',
    },
    {
      value: '⏫　perf',
      name: 'perf: パフォーマンスを向上させるコードの変更',
      title: 'Performance',
    },
    {
      value: '🧪 test',
      name: 'test: 不足しているテストの追加や既存のテストの修正',
      title: 'Tests',
    },
    {
      value: '🐧 chore',
      name: 'chore: ビルドプロセスやドキュメント生成などの補助ツールやライブラリの変更',
      title: 'Chores',
    },
  ],
  messages: {
    type: 'コミットする変更タイプを選択してください:\n',
    subject: 'コミット内容について入力してください:\n',
    confirmCommit: 'こちらの内容でコミットを実行してよろしいですか？:\n',
    /* ticketNumber: 'チケット番号を入力してください (ない場合はEnter):\n',*/
  },
  skipQuestions: ['scope', 'body', 'breaking', 'footer'],
  allowBreakingChanges: ['feat', 'fix'],
  /* 
  コミットメッセージにチケット番号を追加したい場合コメントを削除
  allowTicketNumber: true,
  isTicketNumberRequired: false,
  ticketNumberPrefix: '',
  ticketNumberRegExp: '',
  */
}

これで commitizen のセットアップは完了です 🎉

commitizen を使ってコミットしてみる

それでは実際に commitizen を使ってコミットしてみましょう！
プロジェクト内で適当なファイルを編集して、git add 五にのコマンドを実行してください。

cz

以下のような選択肢が表示されるので、変更のタイプを選択してEnter。

続いてコミットメッセージの入力を求められるので入力してEnter。

最後にコミットの内容が正しいか聞かれるので問題なければEnter。

すると上記の内容でコミットが実行されます！

.cz-config.js には他にも様々なプロパティがあるので、色々試してチームにあった独自のコミットメッセージのフォーマットを作ってみてください！

参考にした記事・サイト

commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter
https://github.com/commitizen/cz-cli

leoforfree/cz-customizable: A customizable commitizen adapter for https://github.com/commitizen/cz-cli (or standalone util)
https://github.com/leoforfree/cz-customizable