Commitizen を使って git commit のメッセージをいい感じにする

git でコミットする際のメッセージを、テンプレから作成してくれる Commitizen の紹介です。

コミットするたびにメッセージを入力しますが、たまに適当な内容にしてしまったりしますよね。後から見直した際にわかりづらくて苦労することがあります。

整ったメッセージのルールを決めておいて、それに従ってメッセージを入力すれば解決できます。しかし、コミットメッセージの書き方は人によっても異なりますし、意外と適切なメッセージを作成するのに悩んでしまうこともあります。

Commitizen を使うことで、選択肢から選んでテンプレに従ったわかりやすいコミットメッセージを作成できます。自分一人のコミットメッセージ作成に用いるのはもちろん、チーム内でのコミットメッセージのルール制定などにも役に立つのでおすすめです。

概要

導入方法としては以下の 2通りあります。

npm のグローバルなスコープにインストールする使い方です。

複数のプロジェクトで同じコミットメッセージのルールで運用できるので便利です。自分一人で使いたい場合はこの使い方が便利ですね。

いつもどおりnpm でインストールします。プロジェクトを跨いで使えるようにグローバルにインストールです。

npm install -g commitizen

メッセージの設定をインストールします。こちらもグローバルにインストールすることで、どこでも同じ設定でコミットメッセージを作成できます。

npm install -g cz-conventional-changelog

設定についてはいくつか種類があるので好きなものを選択してインストールしましょう。以下にサンプルがあるので見てみると良いです。基本的な利用であれば一番上のやつで十分です。

ホームディレクトリに設定ファイルを用意します。.czrc のファイル名で、以下の内容を書き込みます。
設定ファイルのパスを定義することになります。使用する adapter によって変更しましょう。

{ "path": "cz-conventional-changelog" }

git commit の代わりに git cz コマンドを入力することで、commitizen を使ったメッセージの作成が始まります。

使い方の詳細はページの下の方へ。

プロジェクトの devDependencies に導入する使い方です。

対象のプロジェクト内でのみ有効になりますが、package.json に設定を記述して配布することになるので、チームメンバーで設定を共有できます。
チームでの git 運用のルールとして、コミットメッセージを整理したい場合に便利な使い方です。

いつもどおりnpm でインストールします。プロジェクトを跨いで使えるようにグローバルにインストールです。

npm install -g commitizen

以下のコマンドで commitizen の初期設定を行い設定を作成します。使用する adapter はとりあえず cz-conventional-changelog としています。必要に応じて変更しましょう。

commitizen init cz-conventional-changelog --save-dev --save-exact

すると、package.json に必要な設定が追加され、設定ファイル .csrc が用意されます。 adapter を変更した場合これらの修正が必要になりますので覚えておきましょう。

commitizen を使えるように、package.json にnpm script を追加します。

  "scripts": {
    "commit": "cz"
  }

git commit の代わりに npm run commit で、commitizen を使ったメッセージ作成が始まります。 npx cz でも可能です。

commitizen を実行すると、いくつかの質問が出てくるので、それに回答していく形でメッセージを作成できます。
adapter にcz-conventional-changelog を利用した場合は以下の選択肢になります。

? Select the type of change that you're committing
コミットのタイプを選択します。選択肢があるので適したものを選択しましょう。
? What is the scope of this change (e.g. component or file name)
変更の対象スコープを回答します。画面のURLとか、対象のコンポーネントとかファイル名とかを選択しましょう。
? Write a short, imperative tense description of the change (max 76 chars)
短い説明です。ログとかgithub 上の一覧にはここが表示されるのでわかりやりく端的な内容を入力しましょう。
? Provide a longer description of the change: (press enter to skip)
詳細な説明です。修正の目的とか、残しておきたい説明とか、修正内容の概要とかあれば入力しておきましょう。
? Are there any breaking changes?
影響の大きい重大な変更がある場合に yes を選択しましょう。
? Describe the breaking changes
影響の大きい変更についての詳細な内容を入力しましょう。
? Does this change affect any open issues?
yes を選択すると、関連する issue を設定できます。
? Add issue references (e.g. "fix #123", "re #123".)
関連する issue の番号を入力します。正しく設定しておくと github のUI上でリンクになったり、PRが issue と自動的に関連づけられたりするので便利です。