この記事で実現すること
チームでのアプリケーション開発で、次のようなことがあると思う。
- 「未フォーマットのファイルをコミットしてしまった」
- 「テストが通っていないのにコミットしてしまった」
こういったことがあると、余計な仕事が増えて辛い。今回の記事で実現するのは、これらを事前に回避してプロジェクトの品質を下げない＆余計な仕事減らすこと。
今回はJavaScript, TypeScriptでのプロジェクト使える 「Husky」 というツールを使ってこれを実現する。
Huskyってなに？
git commit や git push の前に任意のコマンド・スクリプトを挿入できるツールだよ。
自分はよく、TypeScriptのプロジェクトでコミットする時に、
- Prettierでステージング済みのファイルだけフォーマット
- フォーマットしたファイルを git add
- 最後にテストを実行して、テストが通れば git commit実行
という流れをHuskyで構築してる。よく使うのだけど毎回どうしてたか忘れてるので、記事として今回まとめることにした。
事前準備
※前提: 下記ではパッケージマネージャにはBunを使っています。npmなど他のパッケージマネージャを使っている場合には適宜読み替えてください（例: bun i -D == npm i -D , bunx == npx , bun run == npm run ）
bun i -D husky
bunx husky init
これでHuskyを使う準備は完了。
なおこの記事を書いている時点でのHuskyのバージョンは 9.1.7 。
本題: pre-commit時に「Prettierでステージング済みファイルのフォーマット」と「テストの実行」をするスクリプトを実装
ここで実装するスクリプトによって実現するフローは次のとおり。
- git commit を実行すると、コミット直前にPrettierでステージング対象のファイルにフォーマットを行う
- フォーマットが終わったらテストを実行
- テストが通ればコミットが行われる
早速書いていく。こう。
package.jsonに次のようなscriptが用意されてるとして...
package.json
"scripts": {
"test": "bun test",
"prettier": "prettier",
"prepare": "husky"
}
.husky/pre-commit
#!/bin/sh
# ステージに追加されたファイルのみをフォーマット
FILES=$(git diff --cached --name-only --diff-filter=ACM)
if [ -n "$FILES" ]; then
echo "Formatting staged files..."
# フォーマット対象外のファイルでエラーになったとしても無視
bun prettier --write $FILES || true
git add $FILES
fi
# テスト実行
echo "Running tests..."
bun run test
これで実装完了！
使い方
本当にただ git commit するだけ！
git add コミットしたいファイル
git commit -m "任意のコミットメッセージ"
これでステージング済みのファイル（つまり git add したファイル）だけが Prettierでフォーマットされて、テストが通ればコミットが実行される。
もちろんテストが通らなかった場合は、コミットが行われずに処理が終わるので、
- 「未フォーマットのファイルをコミットしてしまった」
- 「テストが通っていないのにコミットしてしまった」
といった事態を防いでプロジェクトの品質を維持できる。