commitlintを導入する

commitlint とは

gitにおけるコミットメッセージを特定のフォーマットのみに制限することができます。
-> http://marionebl.github.io/commitlint
詳しい説明は割愛いたします。(自分もそこまで詳しくないため)

多人数で開発するときにコミットメッセージが統一されていると、作業状況の把握が容易になります。

例えば、自分の場合は下記のようにコミットメッセージのフォーマットを統一しています。

コミットメッセージの例

:art: Create sample/index.vue

サンプルのvueファイルを作成。

• 絵文字を先頭につける
• 1文字目は大文字から始める
• 一行目と詳細を書く部分の間に空白行を設ける。
• etc.

GitHubでは絵文字を使うと以下のようにコミットメッセージの見栄えが良くなります(個人的な見解です)

前置き

今まで一人で開発するときにはコミットメッセージの重要性をわかっておらず、適当なメッセージをつけてcommitしてましたが、複数人で開発する時にコミットメッセージに重要性を切に感じたので、今回はcommitlintの導入についてまとめてみました。npmコマンドなどについては学びはじめたばかりなので、間違っている点や改善できる点があればご指摘いただけると幸いです。

commitlintの導入方法

プロジェクトにnpmを導入する

まずcommitlintを導入したいプロジェクトにnpmを導入してpackage.jsonが作成します。

$ npm init -y

commitlint をインストール

• CLIパッケージ : @commitlint/cli
• 設定パッケージ : @commitlint/config-conventional

$ npm install --save-dev @commitlint/{cli,config-conventional}

コミットリントの設定ファイル（commitlint.config.js）を作成

$ echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

上のコマンドでcommitlint.config.jsが作成されます。

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
};

ここにコミットメッセージのルールを記載します。(commitlint.config.jsのルールや書き方については他の記事を参照してください。)

husky をインストールしてhookを追加する。

$ npm install husky --save-dev

package.jsonを開くとこのようになっています。

package.json

{
  "name": "リポジトリ名",
  "version": "1.0.0",
  "description": "READMEの先頭に書いてある内容",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[e-mail]:example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@commitlint/cli": "^8.3.5",
    "@commitlint/config-conventional": "^8.3.4",
    "husky": "^4.2.3"
  }
}

そこに以下のフィールドを追加してください。

package.json

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }  
  }
}

完成するとこのようになります。

package.json

{
  "name": "リポジトリ名",
  "version": "1.0.0",
  "description": "READMEの先頭に書いてある内容",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[e-mail]:example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@commitlint/cli": "^8.3.5",
    "@commitlint/config-conventional": "^8.3.4",
    "husky": "^4.2.3"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

以上！！！！！

最後に .gitignore に node_modules を追加するのを忘れずに。
これでコミットするときに自動でコミットメッセージが検閲されルールにそぐわないものはコミットできなくなります。

参考

自分がcommitlintを導入する上で参考にした記事です。

• commitlint の紹介
• gitのコミットメッセージをセマンティックに