🐶

Husky v9 での lint-staged 設定(prettier 利用)

に公開

概要

Huskyがv9になり、使い方が微妙に変わっていた。
ChatGPTに聞くと混乱した答えが返ってくるので、公式情報を確認し、記事にまとめる。

パッケージバージョン

この記事を執筆している時点での、利用しているパッケージのバージョンは以下の通り。

    "husky": "9.1.7",
    "lint-staged": "16.1.0",
    "prettier": "3.5.3",

Husky セットアップ

公式ドキュメントの Get Started を見ると分かりやすい。

https://typicode.github.io/husky/get-started.html

まず、インストール。

npm install --save-dev husky lint-staged prettier

次にセットアップ。

npx husky init

ルートディレクトリに .husky ディレクトリが生成される。中身は以下のような感じ。

.husky/pre-commit 以外は git ignore されている。

また、package-json に以下の行が追加される。

    "scripts": {
        "prepare": "husky"  # ← 自動追加
    }

以上。 husky installhusky add はなくなった。

lint-staged, prettier 設定

ついでに、lint-staged と prettier の設定を行う。

まず、package-json に以下のセクションを追加。

{
  "lint-staged": {
    "**/*.{js,ts,tsx,jsx,json,md}": "prettier --write"
  }
}

次に、 .husky/pre-commit に以下の1行を追加。

npx lint-staged

これだけでOK。git commit 時に prettier が実行されるようになった。

個人的には、以前よりシンプルに書けるようになってGood。

Discussion