紹介
コードの品質を一貫して保つことは、チーム開発でも個人開発でも非常に重要です。これにより、コードの可読性が向上し、バグが減少し、将来のアップデートが楽になります。
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のルールに従う必要があります。
これで全て完了です。あとはご自由に他の設定を試してみてください。
よりスムーズで信頼できる開発環境を楽しみましょう！