Zenn
🦄

husky(v8)の導入とSourceTreeからprecommitさせるまで

2022/10/24に公開
Git
npm
husky
precommit
tech

自分のプロジェクトにhuskyを導入した際、過去と違う点がいくつかあったので備忘録です。

いつぞやのコミット時から実はビルドが通らなくなっていた...なんて、そんな自分とはおさらばしたいわけです。

⛰ 目的

  • husky(v8)の導入
  • Source Treeからのコミット時にnpm run buildを走らせる

📦 前提

  • npmを使用する（yarn, pnpmの場合は適宜公式Docを参照してください）
  • ルートの下にプロジェクトがあり、.gitとpackage.jsonが同一ディレクトリにない
MyProject
├─ .git
├─ backend
└─ frontend
   └ package.json #.gitと別階層にある

今回は上記でいう/frontendにhuskyを導入します。

💀 詰まった点①

コマンドを実行する

公式ドキュメントの推奨通り、以下のコマンドを実行しました。
今回はフロントでの導入だったのでディレクトリはひとつ移動しています。

frontend % npx husky-init && npm install

実行結果

以下のエラーが返ってきました。

husky-init updating package.json
  setting prepare script to command "husky install"
/(省略)/.npm/_npx/1ab9c0f68ac2536e/node_modules/husky/lib/index.js:22
        throw new Error(`.git can't be found (see ${url})`);

あれ？と思い下記コマンドを実行してもまたエラーが返ってきます。

frontend % npx husky install
husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)

ちなみにhusky自体はinstallされており、package.jsonは以下のようになっています。

MyProject/frontend/package.json
{
  // 省略
  "scripts": {
    // 省略
    "prepare": "husky install"
  },
  // 省略
  "devDependencies": {
    // 省略
    "husky": "^8.0.0"
  }
}

🌀 原因

前提にあったように、.gitとpackage.jsonの置かれた位置が異なるため、エラーになっていました。

💡 解決方法

エラー文にあったURLから公式を見ると、きちんとそういった場合のUseCaseがありました。

package.jsonの"prepare"を下記のようにします。

MyProject/frontend/package.json
{
  // 省略
  "scripts": {
    // 旧）　"prepare": "husky install"
    "prepare": "cd .. && husky install frontend/.husky"
  },
  // 省略
}

npm install実行時にfrontend配下に必要なファイルを吐き出し、husky installさせます。

編集後、改めてnpm iを実行します。

すると無事に/frontend/.huskyが生成されました。

💻 precommitの設定

目的であった「コミット時にnpm run buildを走らせる」を実現します。

まずは下記npxコマンドを実行。

frontend % npx husky add .husky/pre-commit 'npm run build'

.husky配下にpre-commitファイルが生成され、中身にはnpm run buildが追加されています。

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

npm run build

💀 詰まった点②

よーし設定完了！ってことでSourceTreeからコミットすると以下のエラーメッセージが。

# 省略
npm ERR! enoent ENOENT: no such file or directory, open '/Users/(省略)/MyProject/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 
# 省略

npm run buildやりたいけどpackage.jsonがねえよって言われてます。

💡 解決方法

結局のところ、今回はルート配下の/frontendでnpm run buildを実行したいわけなので、ディレクトリを移動させてあげれば解決しました。

元のままだとルートで実行しようとしていて、そりゃあpackage.jsonないから無理だって話ですね。

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

cd frontend #この行を追加。移動先のディレクトリ名はご自身の環境に合わせてください。
npm run build

cd frontendを実行してからnpm run buildが走り、無事にコミット時にnpm run buildを自動で走らせることが実現できました。

🌨 それでもうまくいかないときは...

huskyのコマンドが見つからないようなエラーが出ている場合はパスを通していないことが原因かもしれません。

たしかWindowsの場合はよしなに設定してくれる？（同じプロジェクトで関わったWinの人がそうでした）のですが、Macだとそうではないです。

ホームディレクトリに.huskyrcを作成し、Nodeのパスを通してあげることでSourceTreeからもコミットできるようになるかと思います。

CLIではhuskyが動くのにSourceTreeからコミットするとコマンドが走らない、といった場合も同じ原因であることが多いです。

私は過去に設定している&今回VoltaでNodeを入れているのでまたケースがややこしくなるかなと思い、今回は記載を省略しました。

これに該当していそうな方はまた別の記事のほうが参考になりますので、そういったキーワードで探していただいたほうがよいかと思います。

🦄 おわりに

8系だとなにかとうまくいかないことが多い気がするhuskyですが、セットアップなど含めわかりやすくなっているような気がしました（詰まったけど）。

4系からのアップデート方法も公式に細かく解説されておりますので、新規プロジェクトを作成する際はぜひhuskyも最新バージョンを使ってみてはいかがでしょうか。

ではよきprecommitライフを。

Discussion