Huskyを使ってコミット時にコードにprettierのフォーマットを実行する(React, NextJs,Prettier)

Huskyを使ってコミット時にコードにprettierのフォーマットを実行する

なぜこの記事を書こうと思ったのか

フロントエンド開発では、コードフォーマットの統一が重要ですが、手動での実施は手間がかかり、ミスも発生しやすいです。これを解消するために、Git のコミット時に自動フォーマットを実行する Husky を導入しました。本記事では、導入手順と実際の効果、また導入時に直面した問題とその解決方法を共有します

ハマったこと: Husky のバージョン違いに注意

Husky は非常に便利なツールですが、バージョンによる動作の違いに注意が必要です。

自分がインストールしたバージョンは「9.1.6」
npm install husky --save-dev で最新バージョンをインストールしましたが、ネット記事の多くは「8.x」系の情報をもとに書かれていました。この違いにより、以下のような問題が発生しました：

• 記事に書かれている手順通りに操作しても、ディレクトリ構造が異なる
• npx husky install を実行すると「install command is DEPRECATED」というエラーが発生

対応策
最新バージョンを理解するのに時間がかかったため、最終的に安定版である 8.0.3 をインストールすることにしました。これにより、記事通りの手順で動作させることができました。

Husky とは？

Husky は、Git Hooks を簡単に設定できるツールです。これを利用すると、特定の Git 操作（例: pre-commit、post-commit）のタイミングで任意のスクリプトを実行できます。

例えば、コミット時にコードフォーマットやテストを自動実行することが可能です。

GitHookの基礎知識

Git Hooks は、Git の特定のイベント（例: コミットやプッシュ）にフックしてスクリプトを実行する仕組みです。Husky を使うことで、これを簡単に設定できます。

本記事では「コミット時にフォーマットを実行する」という目的に特化して説明します。

注意点

自動フォーマットにおける import 文の整理について

コミット時の自動フォーマットでは、Prettier がコード全体のフォーマットを整えますが、import 文の順序や不要な import の削除は、Prettier 単体では対応できません。これを補完するため、VSCode の「Organize Imports」機能や TypeScript に内蔵されている機能を活用するのが一般的です。今回の記事では省略させていただいております。
以下より実行手順を記入してますが、OrganizeImports機能が未使用の場合、タグなどのインデントや改行設定などのフォーマット機能のみが実行されます。

実装手順

Reactの開発環境で以下を実行します(NextJsでも同様)

npm install husky@8.0.3 pretty-quick　--save-dev

• husky@8.0.3: 安定版をインストールします
• pretty-quick: Prettier を使用してステージングされたファイルのみをフォーマットするツールです

npx husky install

これでプロジェクトのルートディレクトリに.huskyが追加されます。

.huskyが追加されたら以下を実行します

npx husky add .husky/pre-commit "npx pretty-quick --staged"

これで.husky下にpre-commitファイルが作成されます。

pre-commitファイルが以下のように記入されていればOKです

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx pretty-quick --staged

再度ターミナルで以下を実行して、pre-commitファイルに実行権限を付与します。
※ これを忘れるとフックが動作しないので注意してください。

chmod +x .husky/pre-commit

ここまでの状態になったらば、あとは適当にフォーマット実施されていないファイルでadd commitを実行してみてください。コミットが行われた時点でコードのフォーマットが実行されるようになっているはずです。

実際に実行して見比べる。

NextJSになってしまいますコードはほぼReactと同じです。

以下は、コミット時にフォーマットされるコードの例です。

import Header from '@/features/App/Header';
import type { Metadata } from 'next';
import 'reset-css';
import './globals.css';
import Button from '@/components/button'; //未使用

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

実行後コード(このファイルをコミットした後)

import Header from '@/features/App/Header';
import type { Metadata } from 'next';
import 'reset-css';
import './globals.css';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

import文がのsortが実行されており、prettierのフォーマットが実施されていますね！

まとめ

Husky を導入することで、チーム全体でコードフォーマットの統一を簡単に実現できます。また、フォーマットの手間が省けるため、開発体験が向上します。
インデント周りの調整は割と実行していたつもりだったのですが、style.tsみたいな記入量が少ないファイルとかにはわすれがちなんだな〜と感じました。

ポイント

• 最新の Husky バージョン（9.x）では手順が異なるため、情報に注意が必要。
• 現時点では安定版である 8.0.3 を使用するのが無難です。

最後に

個人開発の中ではあんまり考えない「余計な差分」を解消するために、こういう面倒な設定をいれなくてもAIで自動的にやってくれるような日も来るかなぁ。
ありがとうございました。