husky(v7)でgit commit時にESLint/Prettier/commitlintを動かす
huskyのバージョンはv7を使います。もしv4を入れている場合は、手順が異なりますのでご注意ください。ちなみに、パッケージマネージャーはyarnを使います。
ESLint/Prettierの設定確認
ESLintやPrettierの導入は、本記事が冗長になるため割愛します。既にESLintやPrettierがインストール済みで、package.jsonが以下の設定になっていることが前提で書きます。
"scripts": {
"lint": "eslint --fix src/**/*",
"format": "prettier -w src/**/*",
"fix": "yarn format && yarn lint"
}
huskyの導入
huskyをインストールします。
❯ yarn add -D husky
Git hooksを有効化します。コマンド実行後、.husky/_/husky.shが作成されます。
❯ yarn husky install
package.jsonのprepareにhusky installを追加します。prepareによりGitHubリポジトリからcloneしてパッケージをインストールするときに、Git hooksを有効化します。※Yarn2を使っている場合は、prepareは使えないため、こちらの通りにpostinstallを使ってください。
"scripts": {
"prepare": "husky install"
}
hooksを作成します。git commit実行前にpackage.jsonのscriptsに設定したyarn fixを実行出来るようにします。コマンドを実行すると.husky/pre-commitが作成されます。
❯ yarn husky add .husky/pre-commit "yarn fix"
huskyの実行
ターミナルから実行すると以下のように実行ログが出ます。huskyの導入によりgit commitを実行すると、ESLintとPrettierも自動で動いていることが分かります。
❯ git commit -m "hoge"
yarn run v1.22.11
$ yarn format && yarn lint
$ prettier -w src/**/*
src/main.ts 17ms
src/index.ts 104ms
$ eslint --fix src/**/*
✨ Done in 3.80s.
[main 0c4871a] hoge
1 file changed, 1 insertions(+)
create mode 100755 hoge.ts
commitlintの導入
git commit時にコミットメッセージの形式をチェックしたい場合、Commitlintを使います。具体的には、コミットメッセージが次の形式になっていなければいけません。
type(category): description [flags]
typeはデフォルトで以下が使えます。
- breaking
- build
- ci
- chore
- docs
- feat
- fix
- other
- perf
- refactor
- revert
- style
- test
それでは、ターミナルから次のコマンドを実行します。
❯ yarn add -D @commitlint/{config-conventional,cli}
❯ touch .commitlintrc.yml
extends:
- '@commitlint/config-conventional'
Commitlintをcommit-msgに適用します。
❯ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
これで設定が完了です。先ほどと同じようにgit commit -m "hoge"を実行してみます。
❯ git commit -m "hoge"
// 一部省略
⧗ input: hoge
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
コミットメッセージが正しい形式になっていないため、エラーとなりました。正しい形式でコミットし直します。
❯ git commit -m "feat: hoge機能の追加"
// 一部省略
[main d3eb0d4] feat: hoge機能の追加
1 file changed, 1 insertions(+)
create mode 100755 fuga.ts
今度は問題なく、コミットできました。
コミットメッセージのprefixは、デフォルトでは以下が許可されていますので、独自で定義したい場合はrulesで上書きしてください。
参考
Discussion