huskyをmonorepo環境に導入した

ディレクトリ構成

こんな感じのmonorepo

project
- .git
- /api
- /ui （←　Next.js + TypeScript）

やりたいこと

• project/ui/ 配下で、コミットするときに、prettierやlintをフックしたい

入れたもの

• husky 4.3.7
• lint-staged 10.5.3

はまった点

最初、project/ui/ 配下のpackage.jsonにhuskyとlint-stagedを入れてたら、フックされなかった。
monorepoの場合、huskyはroot（.git/ と同階層）に入れておかないといけないようだ。
https://typicode.github.io/husky/#/?id=monorepo

ちなみにhuskyでなくpre-commitでやる場合も同様のようだ。
https://stackoverflow.com/questions/42864386/npm-pre-commit-not-working

これで動いた

project/package.json

  "scripts": {
    "precommit-ui": "npm run precommit --prefix ./ui"
  },
  "husky": {
    "hooks": {
      "pre-commit": [
        "npm run precommit-ui"
      ]
    }
  },
  "devDependencies": {
    "husky": "^4.3.7"
  }

project/ui/package.json

  "scripts": {
    "eslint": "eslint --ext .ts,.tsx ./",
    "format": "prettier --write ./pages",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "format",
      "eslint"
    ]
  },

huskyのフックはrootのpackage.jsonに記述し、下の階層のpackage.jsonのnpm scriptを呼び出している。

まとめ

monorepoにhuskyを入れる場合、projectのrootに入れないと動かない。