huskyってなに?
huskyとは、Gitのコミットやプッシュなどの特定のアクションが起こった時、任意の処理を実行する仕組みのことです。
huskyをなぜ使うの？
huskyは、Gitのコミットコマンドの実行を検知して、コミットが実際に行われる前にLintによるコードチェックやテストを走らせ、コードに誤りが無いか確認することができます。
もしこの段階でテストが失敗したりコードに誤りがあった場合、コードはコミットされません。
このようにhuskyを導入しておくと、コミット前に必要なチェックが自動で実行されるため、コードの品質を一定に保つことができるようになります。
導入手順
1.huskyとlint-stagedパッケージのインストール
huskyは、lint-stagedと組み合わせて使います。
下記コマンドを実行し、パッケージをインストールします。
npm install --save-dev husky lint-staged
2.lint-stagedの設定
次にpackage.jsonにステージングファイルに対して、対象ファイルと実行するコマンドを追加します。
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --fix",
"*": "prettier --write"
}
3.huskyの設定 その１ -> prepare
下記のコマンドを実行します。
npx husky install
次にpackage.jsonにprepareキーを追加します。
prepareは、npm installで全てのインストールが終了した後に実行されるコマンドです。
"scripts": {
"prepare": "husky install"
}
4.huskyの設定 その２ -> コミット前の実行コマンドを登録
下記のコマンドを実行すると.husky/pre-commitファイルが作成されます。
npx husky add .husky/pre-commit "npx lint-staged"
作成された.husky/pre-commitファイルに、コミット前に実行したいコマンドを追記します。
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
// もしtestを実行したい場合は、以下のように追記します。
test
5.動作確認
最後にGitのコミットコマンドを実行し、huskyが動作するか確認します。
$ git commit -m "comment"
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[main xxxxxxx] feat: *******
2 files changed, 9 insertions(+), 13 deletions(-)
以上でhuskyの導入設定は完了となります。
お疲れさまでした。
導入後、コミット時に発生したエラーと対処
it's not set as executable
問題の状況
$ git commit -m "first commit."
// ...
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.
原因と対処
.husky/pre-commitファイルに実行権限がありません。
下記のコマンドを実行し、.husky/pre-commitに実行権限を与えます。
chmod 755 .husky/pre-commit
ENOENTエラー
問題の状況
$ git commit -m "feat: 機能追加"
✔ Preparing...
⚠ Running tasks...
✔ Running tasks for *.{js,jsx,ts,tsx}
❯ Running tasks for *
✖ prettier --write [ENOENT]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up...
✖ prettier --write failed without output (ENOENT).
ENOENTとは、Error No ENTryの略でファイルやディレクトリが存在しないの意味。
原因と対処
確認したところ、まさかのprettierそのものがインストールされていませんでした。
下記のコマンドでprettierをインストールして、エラーは解消されました。
npm install --save-dev prettier