🐥

Husky v9 & lint-staged

2025/01/09に公開

React

husky

lint-staged

tech

この記事は、エンジニア初心者の筆者が、自身の学びを記録するためにまとめたものです。今回はHuskyの設定についてまとめています。
Husky は、Git操作（コミットやプッシュ）のタイミングでスクリプトを自動実行するツールで、Gitフックの管理を簡単にします。lint-staged は、Gitにステージングされたファイルのみを対象にタスクを実行するツールです。Huskyと組み合わせることで、コミット前にコードの品質やスタイルを自動でチェック・修正できます。
https://typicode.github.io/husky/

Huskyとlint-stagedの連携でできること

コード品質チェック
ESLintで構文エラーやルール違反を検出し、必要に応じて自動修正します（例: eslint --fix）。
コードフォーマットの適用
Prettierを使用して、コードを一貫したスタイルに自動整形します（例: インデントや改行の調整）。
コミットメッセージのチェック
コミットメッセージが指定の形式に従っているか確認します。
テストの実行
コミット前にテストスクリプトを実行し、コードが正常に動作することを確認します。
カスタムスクリプトの実行
プロジェクトに特化した自動処理を追加できます。

Huskyのインストール

npm install --save-dev husky

husky init

initコマンドは、.husky/ ディレクトリ内にpre-commitスクリプトを作成し、package.jsonの設定を行います。

npx husky init

pre-commitスクリプトを編集。 lint-staged追加。

echo "npm lint-staged" > .husky/pre-commit

.husky/pre-commit

#!/bin/sh 　　　　　　　　　　　　　　← これはhusky9から不要
. "$(dirname "$0")/_/husky.sh"　　← これはhusky9から不要

npx lint-staged

package.jsonを編集

package.json

{
  "scripts": {
    "prepare": "husky install" 　← ①ここ


  },
  "devDependencies": {
    "husky": "^9.1.7",
    "lint-staged": "^15.3.0",
    "eslint": "^9.17.0",
    "prettier": "^3.4.2"
  },
  "lint-staged": {　　　　　　　　　←　②ここ
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

① `"prepare": "husky install"`

Husky（v7以上）では不完全なので。husky installに変更します。

②　`.{js,jsx,ts,tsx}`

・拡張子が .js, .jsx, .ts, .tsx のファイルを対象とします。
・ステージングされたファイルのみ対象です。
Gitにaddされてステージング状態にあるファイル（次にコミットされる予定のファイル）のみが対象となります。

`["eslint --fix", "prettier --write"]`

eslint --fix
ESLint（コードの構文チェックツール）を使って、コード内の問題を自動修正してくれます。
例: 不要なセミコロンの削除やコードフォーマットの修正など。

prettier --write
Prettier（コードフォーマッター）を使って、コードを指定されたスタイルに整形してくれます。
例: インデントや行の長さの調整など。

動作確認

ファイルのステージング
例: git add .のように、ファイルをステージングします。
コミット実行
例: git commit -m "test code" を実行。
lint-stagedの動作
Huskyのpre-commitフックを通じて、lint-stagedが呼び出されます。
ステージングされたファイルのうち、{js,jsx,ts,tsx}ファイルだけが対象となり、eslint --fix と prettier --writeが順番に適用されます。
結果
問題が修正されたら、変更内容が自動でステージングに反映され、コミットが続行されます。
問題が解決されない場合、エラーメッセージが表示され、コミットが中断します。

参考