紹介

コードの品質を一貫して保つことは、チーム開発でも個人開発でも非常に重要です。これにより、コードの可読性が向上し、バグが減少し、将来のアップデートが楽になります。

Husky、ESlintとPrettierは、コード品質と一貫性を保つために必要なツールです。ESlintとPrettierは日常的に使われており、導入に関する記事も数多く存在しますが、今日はHuskyに焦点を当てます。

Huskyはコメント前にテストやリンターなどのスクリプトを自動的に実行し、コード品質を確保し、問題がコードベースに入るのを防ぎます。

それでは、早速始めましょう。

Huskyの設定

前提条件

Huskyはnpmでインストロールされるため、Node.js環境とnpm/yarn/pnpmを使用するプロジェクトがすでにあろことを前提とします。また、Gitリポジトリも初期化されている必要があります。まだ初期化されていない場合は、下記のコマンドをルートディレクトリで実行してください。

git init

Huskyのインストール

下記のコマンドを実行してください。

npm install husky -D

Git Hooksを有効化します。

npx husky install

インストール後にGit Hooksを自動的に有効化するために、以下のコマンドを実行してpackage.jsonを更新します。

npm pkg set scripts.prepare="husky install"

これらのコマンドを実行すると、ルートディリレクトに.huskyフォルダが生成され、その中にpre-commitファイルが作成されます。

生成されたのpre-commitファイルは下記のようになります。

#!/usr/bin/env sh  
. "$(dirname -- "$0")/_/husky.sh"  
  
npm test

Husky、ESlint、Prettierを組み合わせる

デーフォルトでは、コミット前にnpm testだけが実行され、基本的な問題しかチェックされません。しかし、コミット前にコードを自動的にフォマットし、リントエラーを修正したい場合はどうすれば良いでしょうか？ここでlint-stagedが登場します。

簡単に言うと、このツールはGitでステージされたファイルに対してリンターを実行します。

使い方を見てみましょう！

pre-commitファイルを更新します。

	npx lint-staged

package.jsonファイルを設定します。

"lint-staged": {
	"*.{ts,tsx}": [
		"prettier --write",
		"eslint ."
	]
}

こちらの設定では、ステージされたすべてのtsおよび.tsxファイルが対象になります。Prettierを使用してコードスタイルを強制的にフォマートし、エラーを自動的に修正します。また、ES Lintは対象ファイルのコード品質をチェックします。

コミットメッセージをリントします

整理されたわかりやすいプロジェクト履歴を保つためには、明確なコミットメッセージが重要です。適切にフォマットされたコメットメッセージは、将来必要な情報を見つけやすくします。commitlintを使用して、コミットメッセージスタイルを強制できます。

まずは下記のコマンドを実行して始めましょう！

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

これにより、commit-msgファイルを生成され、その中にnpx --no -- commitlint --edit $1という内容を追加されます。

次に、必要なcommitlintパッケージをインストールします。

npm install @commitlint/config-conventional @commitlint/cli -D

そして、ルートディレクトリに以下の内容で .commitlintrc.json ファイルを作成します。

{
	"extends": ["@commitlint/config-conventional"],	
	"rules": {
		"type-enum": [2, "always", ["ci", "chore", "docs", "ticket","feat", "fix", "perf", "refactor", "revert", "style"]]
	}
}

設定を説明します：

type commit: 特定のコメットタイプを強制します。
2: 重要度レベル。２はエラーに示します。
always: ルールが強制的に適用されることを保証します。
Commit Types: 有効なコミットタイプは次のとおります。 ci, chore, docs, ticket, feat, fix, perf, refactor, revert, style.

成果物をチェックしましょう。

git commit -m "invalid commit"

コミットメッセージはConventional Commitsのルールに従う必要があります。

これで全て完了です。あとはご自由に他の設定を試してみてください。

よりスムーズで信頼できる開発環境を楽しみましょう！