Zenn
👻

npm, turborepo, VSCodeのモノレポでbiomeを使えるようにする【備忘録】

2024/10/12に公開
Next.js
Turborepo
Biome
tech

概要

今回、フロントエンドの画面を何個か作る時に、画面だけでひとまとまりになっていると
やりやすいだろうなぁ、モノレポやるか、となって turborepo と biome を使おうとした。
その際に結構沼ったので、備忘録として残す。

ついでに、テンプレートリポジトリにして残したので、見たい方はこちらをどうぞ。

https://github.com/YuukiHayashi0510/next.turborepo.biome.template

手順

手順はこれだけ。

ただし、4 を適当にやると沼るので、ちゃんとやろう。

  1. turborepo のセットアップ
  2. eslint, prettier を除去
  3. biome をルートで設定
  4. biome の設定ファイルを apps, packages で使いたいところに入れる

1. turborepo のセットアップ

公式通りにインストールする。
名前は PJT 名など適切なものを。

npx create-turbo@latest

https://turbo.build/repo/docs/getting-started/installation

2. eslint, prettier を除去

ひたすら eslint, prettier に関する内容を削除する。
VSCode であれば、検索を使うと便利。
package.jsonの修正(npm uninstallでも可)とeslintrcを消す作業がメイン。

ここでやること

  1. apps/docsから eslint, prettier 関連を消す
  2. apps/webから eslint, prettier 関連を消す
  3. packages/uiから eslint, prettier 関連を消す
  4. ルートディレクトリのpackage.jsonを修正

3. biome をルートで設定

PJT のルートに移動して、biome をインストール

npm install --save-dev --save-exact @biomejs/biome

ついでに、設定ファイルを生成しておく

npx @biomejs/biome init

https://biomejs.dev/guides/getting-started/

4. biome の設定ファイルを apps, packages で使いたいところに入れる

ここがキモ。
やることは簡単だが、それぞれに設定ファイルを入れるところで、
有効にしたい設定に関して、以下のようにする必要あり。

(root)/apps/web/biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "extends": ["../../biome.json"],
  "linter": {
    "include": ["src/**/*.ts", "src/**/*.tsx"]
  },
  "formatter": {
    "include": ["src/**/*.ts", "src/**/*.tsx"]
  }
}

以下を参考にやっただけだが、includeの有無だけで
VSCode の拡張が動作しなくなるので、ビビる。

https://biomejs.dev/guides/big-projects/#monorepos

あとは、vscode の設定ファイルいじって、保存時の修正をつけるなりつけないなり。
私はつける派。

(root)/apps/web/.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

参考文献

https://turbo.build/repo/docs/getting-started/installation

https://turbo.build/repo/docs/guides/tools/biome

https://biomejs.dev/guides/getting-started/

https://biomejs.dev/guides/big-projects/#monorepos

Discussion