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ファイルが作成されます。
![スクリーン ショット 2024-11-14 に 06.59.15 午前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624085/07f6c71e-878a-3ba1-bc95-27b38c832f5e.png)
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と同じです。
以下は、コミット時にフォーマットされるコードの例です。

```javascript
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',
};

```
実行後コード(このファイルをコミットした後)
```javascript
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で自動的にやってくれるような日も来るかなぁ。
ありがとうございました。