Husky導入

Huskyの導入について

version
Next.js 14.2.9
Typescript 8.5.0
ESLint 8.57.1
Husky@9.1.6

目的

pre-commitを使用して、commit時にeslintとprettierの整形を適用させる

参考記事

1.インストール

npm install --save-dev husky

2.Husky をプロジェクトにセットアップし、Git フックの管理を簡単にするための初期化コマンドを実行

npx husky init

3. .huskyディレクトリ内にpre-commitファイルがあることを確認し下記のように記述

# .husky/pre-commit

prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
git update-index --again

npx lint-staged

動作チェック

1.VSCodeでPrettierの拡張機能を導入している場合は、Disableで無効にする

2.プロジェクトのpage.tsxで改行などを行い変数も用意

const sample = 1;

export default function Home() {
  return <div>Hello Hello2
    
  
  
  </div>;
}

3.変更したファイルをStagedさせる

git add .

4.Stagedされたファイル群をコミットする

git commit -m "feat: コミットメッセージ"

正常にコミットされた場合は、Huskyが正常に動作をしていない

下記のようにエラーが出力された場合は、Huskyが正常に動作している

$ git commit --file="C:/Users/projects/app/.git/COMMITMESSAGE"

.eslintrc.json 50ms (unchanged)
package-lock.json 111ms (unchanged)
package.json 2ms (unchanged)
src/app/page.tsx 53ms
[33m[STARTED][39m Preparing lint-staged...
[32m[COMPLETED][39m Preparing lint-staged...
[33m[STARTED][39m Running tasks for staged files...
[33m[STARTED][39m package.json — 6 files
[33m[STARTED][39m **/*.{js,jsx,ts,tsx} — 1 file
[33m[STARTED][39m eslint --fix
[31m[FAILED][39m eslint --fix [FAILED]
[31m[FAILED][39m eslint --fix [FAILED]
[32m[COMPLETED][39m Running tasks for staged files...
[33m[STARTED][39m Applying modifications from tasks...
[33m[SKIPPED][39m Skipped because of errors from tasks.
[33m[STARTED][39m Reverting to original state because of errors...
[32m[COMPLETED][39m Reverting to original state because of errors...
[33m[STARTED][39m Cleaning up temporary files...
[32m[COMPLETED][39m Cleaning up temporary files...

✖ eslint --fix:

"C:/Users/projects/app/\src\app\page.tsx
  1:7  error  'sample' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

husky - pre-commit script failed (code 1)

ChatGPTを活用した際は、質問が悪くHuskyが動作せずに時間がかかり解決しなかった為、
プロジェクトを一新し今回の流れで正常に動作することが確認できた為、自分の備忘録として投稿です！

Husky関連の記事も少なかった為、どん詰まりで導入するのに時間かかりました、、、