Zenn
😎

Husky + Commitlintの統合使用

2023/06/12に公開
Git
初心者
#
husky
commit
tech

Husky + Commitlintの統合使用

ソフトウェア開発では、良好なコードのコミット規約と規範的なGitのコミットメッセージは重要なプラクティスです。HuskyとCommitlintは、Gitのコミットプロセス中にフックを実行し、コミットメッセージの規約性を検証するためのツールです。このドキュメントでは、それらをプロジェクトに統合する方法について説明します。

1. Huskyの概要

Huskyは、Gitフックマネージャーであり、Gitイベント発生時にカスタムスクリプトを実行することができます。コミットの前後に特定のタスクを実行するなど、Gitフックにコードを追加することができます。Huskyは簡単な設定と使いやすいコマンドラインインターフェースを提供します。

2. Commitlintの概要

Commitlintは、Gitのコミットメッセージを検証し、規約に基づいたメッセージかどうかをチェックするツールです。コミットメッセージのフォーマットと内容の規約に依存し、それに従って検証を行います。コミットメッセージの規約を定義することで、コードリポジトリの可読性、保守性、協業性を向上させることができます。

3. 統合手順

以下は、HuskyとCommitlintをプロジェクトに統合するための基本的な手順です：

ステップ1：依存関係のインストール

プロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行して必要な依存関係をインストールします：

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

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

Downloading registry.npmjs.org/typescript/5.1.3: 7.15 MB/7.15 MB, done
Packages: +211
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are copied from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/a/Library/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild: Running postinstall script, done in 705ms
Progress: resolved 232, reused 166, downloaded 45, added 211, done

devDependencies:
+ @commitlint/cli 17.6.5
+ @commitlint/config-conventional 17.6.5
+ husky 8.0.3
+ typescript 5.1.3
+ vite 4.3.9

Done in 8.5s

ステップ2：husky-initの設定

npx husky-init 

npx husky-init 

Need to install the following packages:
  husky-init@8.0.0
Ok to proceed? (y) y
husky-init updating package.json
  setting prepare script to command "husky install"
husky - Git hooks installed
husky - created .husky/pre-commit


pnpm run prepare

pnpm run prepare                                                             

> my-husky@0.0.0 prepare /Users/a/Documents/temp/my-husky
> husky install

husky - Git hooks installed

ステップ2：Commitlintの設定

プロジェクトのルートディレクトリに.commitlintrc.jsというファイルを作成し、以下の内容を追加します：

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

これにより、一般的な規約（conventional）を使用してコミットメッセージを検証します。

プロジェクトのルートディレクトリのpackage.jsonファイルに、以下の設定を追加します：

{
  "scripts": {
    "commitmsg": "commitlint -e $GIT_PARAMS"
  }
}

ステップ3：Huskyの設定

プロジェクトのルートディレクトリのpre-commitファイルに、以下の設定を追加します：

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm run commitmsg

これにより、コミット時にCommitlintが実行され、コミットメッセージの検証が行われます。

ステップ4：コミットメッセージの例

規約に従ったコミットメッセージの例：

git commit -m "feat: 新機能を追加"

規約に違反したコミットメッセージの例：

git commit -m "新機能を追加"

4. 結論

HuskyとCommitlintを統合することで、Gitのコミットプロセス中にカスタムスクリプトを実行し、コミットメッセージの規約性を検証することができます。これにより、コードリポジトリの一貫性と可読性が向上し、チームの協業が促進されます。

上記の手順に従って、HuskyとCommitlintをプロジェクトに簡単に統合し、Gitのコミットメッセージを規範化することができます。

株式会社ブレイブスタジオ
Bravestudio Inc.

Discussion