モノレポのリポジトリ内のフロントエンドプロジェクトにhuskyの設定を追加する

npmパッケージのhuskyがv5系以降の使い方がそれまでと異なっています。

モノレポのリポジトリ内の中でフロントエンド用のプロジェクト(vue-cliやcreate-react-appなど)にのみhuskyの設定を適用しlint-stagedを実行する方法をまとめます。

名前	バージョン
npm	8.1.0
node	16.13.0
yarn	1.22.17
TypeScript	4.4.4

ディレクトリ構成

root/
　├ backendProject/
　└ frontendProject/

frontendProject=vue-cliやviteなどで作成したフロントエンドのプロジェクト(package.jsonが置かれている。)

husky,lint-stagedのインストール

frontendProjectディレクトリ内でhusky,lint-stagedのインストールを行います。

$ yarn add --dev husky lint-staged

package.jsonのsrcriptsにprepareが追記されている為モノレポ用の設定として下記の通り修正します。

ダブルクォーテーションをエスケープしている箇所に注意してください。

  "scripts": {
    ...(省略)
    "prepare": "cd .. && husky install frontendProject/.husky",
    "create-precommit": "cd .. && husky add frontendProject/.husky/pre-commit \"cd frontendProject && yarn lint-staged\"",
    "lint-staged": "lint-staged"
  },

frontendProjectディレクトリ内に.huskyディレクトリを作成する為にyarn prepareとyarn create-precommitをそれぞれ実行します。

$ yarn prepare
$ yarn create-precommit

frontendProject/.huskyディレクトリ内のpre-commitファイルが下記の様な内容で作成されます。
これでコミットをする直前にhusky経由でlint-stagedを実行する事が出来ます。

lint-stagedの設定はこれまで通りpackage.jsonに記載して差し支えありません。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd frontendProject && yarn lint-staged

nvmを利用している際の注意点

ローカルのnode.jsのバージョン管理にnvmを利用している場合、huskyが動く際に現在設定されているnodeのバージョンを取得出来ない場合があります。(husky経由でyarnコマンドが実行出来なくなる)

この場合、自分のホームディレクトリに~/.huskyrcを作成してnvmの設定を追記する必要があります。

$ touch ~/.huskyrc
$ vim ~/.huskyrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
# 現在利用しているnodeバージョンをuseする
nvm use stable

これでhusky利用時にローカル環境と同様のnode.jsのバージョンを利用する事が出来ます。