はじめに
こんにちは、エンジニアのkeitaMaxです。
今回はHuskyを使用して、ローカルでコミットした時に静的解析を実行するようにしようと思います。
Huskyってなに？
Automatically lint your commit messages, code, and run tests upon committing or pushing.
(引用：https://typicode.github.io/husky/)
コミットやPushした時に自動でコマンドを実行してくれるライブラリです。
インストール
以下のコマンドでインストールします。
npm install --save-dev husky
"husky": "^9.0.11",がインストールされました。
インストールが終わったら、以下のコマンドで初期設定をします。
npx husky init
すると、.huskyuというファイルができていると思います。
これのpre-commitというファイルがhuskyの設定ファイルです。
npm test
コミット時に静的解析をするための設定
pre-commitファイルを修正します。
今回はESLintの静的解析を行いたいので、以下のように修正しました。
npm run lint
簡単ですが、設定はこれで終わりです。
実際にコミットしてみる
実際にコミットしてみると以下のようになります。
next-example-app % git add .
next-example-app % git commit -m 'huskyを追加'
> next-example-app@0.1.0 lint
> next lint
✔ No ESLint warnings or errors
[feat/create_husky 53cd9ef] huskyを追加
3 files changed, 20 insertions(+), 1 deletion(-)
create mode 100644 .husky/pre-commit
next-example-app %
しっかりと npm run lintコマンドが実行されているのがわかります。
ESLint実行してエラーを出してみる
先ほどはESLintで成功パターンをやったので失敗させてみます。
npm run lintコマンドが失敗するようにソースを修正します。
以下のように必要なソースをコメントアウトしてみました。
// import React from "react";
この状態でコミットしてみます。
next-example-app % git add .
next-example-app % git commit -m 'lintを失敗させる'
> next-example-app@0.1.0 lint
> next lint
./src/views/CountView/index.tsx
5:31 Error: 'useCountView' is not defined. no-undef
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
husky - pre-commit script failed (code 1)
next-example-app %
このようにnpm run lintコマンドが失敗しているのがわかります。
また、エラーが起こるとコミットされないので、おかしなソースがPushされることはありません。
おわりに
コミット時にテストができるのは、間違ったソースがGitに上がらなくなるのでとてもいいと思いました。今後プロジェクトで積極的に使っていけたらと思います。
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考
Git
ソースが見たい方は以下のGitHubのリポジトリにあるので参考にしてください。