Huskyとは
公式ドキュメントを翻訳
git commit や git push 前に自動で任意のコマンドを実行してくれるライブラリです！！
実際に実行すると、こんな感じの動作が確認できます。
git commit 時にlintが実行され、lintにひっかかってcommitが中止されていることがわかります！
今回はlintにしましたが、実行するコマンドは任意に指定できるので、UTを実行したり、buildを実行してみたり、夢が広がります。
インストールから動作確認までを試してみます。
やってみる
プロジェクトの用意
いつもの手順で準備します。
pnpm create vite hello-husky --template react-ts
>pnpm create vite hello-husky --template react-ts
.../19357234a12-3ea4 | +1 +
.../19357234a12-3ea4 | Progress: resolved 1, reused 1, downloaded 0, added 1,
Done. Now run:
cd hello-husky
pnpm install
pnpm run dev
gitリポジトリとして扱うためのinit処理も必要です。
cd hello-husky
git init
pnpm install
> cd .\hello-husky\
> git init
Initialized empty Git repository in C:/work/repo/hello-husky/.git/
> pnpm install
Packages: +181
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 221, reused 181, downloaded 0, added 181, done
dependencies:
+ react 18.3.1
+ react-dom 18.3.1
devDependencies:
+ @eslint/js 9.15.0
+ @types/react 18.3.12
+ @types/react-dom 18.3.1
+ @vitejs/plugin-react 4.3.3
+ eslint 9.15.0
+ eslint-plugin-react-hooks 5.0.0
+ eslint-plugin-react-refresh 0.4.14
+ globals 15.12.0
+ typescript 5.6.3 (5.7.2 is available)
+ typescript-eslint 8.15.0
+ vite 5.4.11
Done in 15.4s
これでプロジェクトの準備＆gitリポジトリ化が完了しました！！！
Huskyのインストールとセッティング
公式ドキュメントを参考にインストールとセッティングをしてみます
ライブラリをインストールする
> pnpm add --save-dev husky
Packages: +1
+
Progress: resolved 222, reused 182, downloaded 0, added 1, done
devDependencies:
+ husky 9.1.7
Done in 4s
良い感じです
initしてみる
pnpm exec husky init
成功すると、ディレクトリとshっぽいファイルが作成されます。
shっぽいファイルを確認してみます。
pnpm test
pre-commit(コミット前)に pnpm test してくれそうですね。
testファイルを用意するのが面倒なので、pnpm run lint に変更して、lintを実行するよう変更します。
- pnpm test
+ pnpm run lint
commitしてみる！
では実際にcommitしてみましょう。
lintに叱られそうなコードを追加します。
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
+ const notUsed = "not_used"
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
addしてcommitします。
git add .
いざコミット！
> git commit -m "huskyテスト"
> hello-husky@0.0.0 lint C:\work\repo\hello-husky
> eslint .
C:\work\repo\hello-husky\src\main.tsx
6:7 error 'notUsed' is assigned a value but never used @typescript-eslint/no-unused-vars
✖ 1 problem (1 error, 0 warnings)
ELIFECYCLE Command failed with exit code 1.
husky - pre-commit script failed (code 1)
git commit すると、eslintが走りました！！！
いいですね。
git status でコミットがされていないことを確認します。
> git status
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: .husky/pre-commit
modified: package.json
modified: pnpm-lock.yaml
modified: src/main.tsx
Changes to be committed:
とあるので、未コミットなのが確認できました！！！めっちゃ便利
おわりに
Husky最高！！！
以前まで、Lintやformatterは結構忘れがちになっちゃうタスクでした。
こういった仕組みで自動化できるのは最高だと感じました！！！