Turborepoにhuksyを導入
はじめに
この記事では Turborepo に husky を導入する方法を紹介します。モノレポでも husky を利用できます。手順は簡単で、（１）ルートに husky と lint-staged を設定し、（２）各ワークスペースに lint-staged を設定ファイルを配置するだけです。
作業コードはこちらです。
Turborepo とは
Turborepo とは、モノレポを作成するためのツールです。
husky とは
husky とは git のフックを利用して、コミットやプッシュなどの前に任意のコマンドを実行できるツールです。husky を利用することで、コミットやプッシュの前に lint やテストを実行できます。
lint-staged とは
lint-staged とは、git のステージングエリアにあるファイルに対して任意のコマンドを実行できるツールです。husky と組み合わせることで、コミットするファイルに対して lint、フォーマット、テストを実行できます。
モノレポを作成
まず、作業用のモノレポを作成します。
create-turbo で、Turborepo のモノレポを作成します。
モノレポ作成の詳細
$ pnpm dlx create-turbo@latest
>>> TURBOREPO
>>> Welcome to Turborepo! Let's get you set up with a new codebase.
? Where would you like to create your turborepo? turborepo-husky-sample
? Which package manager do you want to use? pnpm workspaces
Downloading files. This might take a moment.
>>> Created a new Turborepo with the following:
apps
- apps/docs
- apps/web
packages
- packages/eslint-config-custom
- packages/tsconfig
- packages/ui
Installing packages. This might take a couple of minutes.
>>> Success! Created a new Turborepo at "turborepo-husky-sample".
Inside that directory, you can run several commands:
pnpm run build
Build all apps and packages
pnpm run dev
Develop all apps and packages
pnpm run lint
Lint all apps and packages
Turborepo will cache locally by default. For an additional
speed boost, enable Remote Caching with Vercel by
entering the following command:
pnpm dlx turbo login
We suggest that you begin by typing:
cd turborepo-husky-sample
pnpm dlx turbo login
プロジェクトディレクトリーに移動します。
$ cd turborepo-husky-sample
web アプリケーションの page.tsx を以下で上書きし、サンプルのページを作成します。
export default function Page(): JSX.Element {
return (
<h1 className="text-xl">Web</h1>
);
}
.npmrc の中身を削除しておきます。
-auto-install-peers = true
さらに、.npmrc はリポジトリの管理対象外とします。
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules
.pnp
.pnp.js
# testing
coverage
# next.js
.next/
out/
build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# turbo
.turbo
# vercel
.vercel
+# npmrc
+.npmrc
ローカルで実行します。
$ pnpm dev --filter=web
コミットします。
$ pnpm build
$ git add .
$ git commit -m "Turborepoの初期環境を構築"
husky をインストール
husky-init を実行することで、husky の初期設定します。
$ pnpm dlx husky-init && pnpm install
package.json に parepare スクリプトが追加されます。
{
"private": true,
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
+ "prepare": "husky install"
},
"devDependencies": {
"eslint": "^8.48.0",
"prettier": "^3.0.3",
"tsconfig": "workspace:*",
"turbo": "latest",
"husky": "^8.0.0"
},
"packageManager": "pnpm@8.6.10",
"name": "turborepo-husky-sample"
}
サンプルとして pre-commit フックが作成されています。pre-commit フックを利用すると、コミットすると npm test が実行されます。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
コミットします。
$ git add .
$ git commit -m "huskyをインストール"
lint-staged をインストール
lint-staged をインストールします。
$ pnpm install -Dw lint-staged
.husky/pre-commit で lint-staged を利用するように修正します。手動でも編集可能ですが、コマンドで変更が可能です。
$ npx husky set .husky/pre-commit "npx lint-staged"
実行後に以下のように変更されています。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
-# npm test
+npx lint-staged
lint-staged を適用したいワークスペースに対して .lintstagedrc を設定します。
$ touch apps/web/.lintstagedrc
$ touch packages/ui/.lintstagedrc
{
"**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}
{
"**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}
page.tsx の中身を以下のように変更します。
export default function Page(): JSX.Element {
return (
<h1 className="text-xl">Web</h1>
);
}
コミットします。ログが書き出されます。
$ git add .
$ git commit -m "lint-stagedをインストールし設定"
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 3f4ba8c] lint-stagedをインストールし設定
6 files changed, 197 insertions(+), 10 deletions(-)
create mode 100644 apps/web/.lintstagedrc
create mode 100644 packages/ui/.lintstagedrc
そして、page.tsx の中身は以下のように変更されます。ちゃんとフォーマットされています。
export default function Page(): JSX.Element {
return <h1 className="text-xl">Web</h1>;
}
まとめ
この記事では Turborepo に husky を導入する方法を紹介しました。
モノレポでも husky を利用できます。設定方法も簡単でした。
作業コードはこちらです。
参考
Discussion