FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

モノレポ環境でBiome v2にアップデートして動作を検証してみる

Biome JavaScript TypeScript

概要

本記事では、先日リリースされたBiome v2への移行手順と、設定ファイル(biome.jsonまたはbiome.jsonc)のモノレポでの振る舞いを試してみた結果を共有します。

はじめに

こんにちは、フリューのソフトウェアエンジニアkitajimaです。ピクトリンクの開発を担当しています。

2025年6月17日にBiome v2(codename: Biotype)がリリースされました。

biomejs.dev

tscを必要としないlinterという部分が目玉だとは思うのですが、トピックにはモノレポのサポート改善も含まれていました。

ちょうど業務で触っているモノレポがBiomeのv1を使っていたため、実際にBiome v2にアップデートしてモノレポでの運用を試してみました。既存のコードや複雑な設定が無い状態での移行だったので、個人的にも良いタイミングでした。

従来のBiome v1でのモノレポ運用

従来のBiome v1では、モノレポに対する十分なサポートがありませんでした。

Biome doesn’t support monorepos very well due to some limitations in resolving nested configuration files

と公式ドキュメントにも記載されています。 モノレポでの運用は、

  • プロジェクトルートにbiome.jsonを配置
  • 各サブモジュールにもbiome.jsonを配置
    • ルートのbiome.jsonを相対パスで参照する形でextendsを指定
    • overrides設定でサブモジュール固有の設定を記述

といった形で行う必要がありました。

Use Biome in big projects | Biome

この方法でも動作はしましたが、Biome v2では以下のようにモノレポのサポートが改善されました。

Biome v2で改善されたモノレポサポート

Biome v2では、以下の機能が追加されモノレポでの運用が改善されました。

Biome v2—codename: Biotype | Biome

ネストした設定ファイルの配置

サブディレクトリにネストした設定ファイルを任意の数だけ配置できるようになりました。

ネストした設定ファイルでルートの設定を参照する

設定ファイルがネストされたものであることを示す方法が2つあります。

1. rootプロパティ

{
  "root": false
}

rootプロパティをfalseに設定することで、この設定ファイルがネストしたファイルであることを示せます。

ただし、このままではルートの設定を継承しません。継承したい場合はextendsプロパティを使用する必要があります。

2. extendsプロパティ

{
  "extends": "//"
}

extendsプロパティをこのように指定することで、ルート設定を継承できます。この場合、root: falseは冗長なので省略可能です。

※ネストしているbiome.jsonではroot: falseまたはextendsプロパティが必須

実際にBiome v2に移行してみた

マイグレーションガイドに沿って移行を進めてみました。

Upgrade to Biome v2 | Biome

1. Biome v2のインストール

Biome v2（執筆時点で最新は v2.0.0）をインストールします。

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

2. マイグレーションコマンドの実行

migrateコマンドを実行することで、破壊的変更の影響を最小限に抑えるように設定ファイルを修正してくれます。

npx @biomejs/biome migrate --write

3. 設定ファイルの変更確認

コマンド実行後、ルートのbiome.jsonが以下のように変更されていました。

変更前（v1.9.4）

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": []
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single"
    }
  }
}

変更後（v2.0.0）

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "includes": ["**"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  },
  "assist": { 
    "actions": { 
      "source": { 
        "organizeImports": "on" 
      } 
    } 
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noParameterAssign": "error",
        "useAsConstAssertion": "error",
        "useDefaultParameterLast": "error",
        "useEnumInitializers": "error",
        "useSelfClosingElements": "error",
        "useSingleVarDeclarator": "error",
        "noUnusedTemplateLiteral": "error",
        "useNumberNamespace": "error",
        "noInferrableTypes": "error",
        "noUselessElse": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single"
    }
  }
}

差分を確認してみる

organizeImportsの設定変更

v1.9.4時点ではorganizeImportsという項目がトップレベルにありましたが、v2ではassist.actions.source.organizeImportsに移動し、assistの一部として扱われるようになりました。

なお、assistはエディタやIDEを通して開発体験の向上に役に立つ機能全般のことで、v2から登場しました。エディタの拡張機能を利用することでファイル保存時に自動で適用するなどの利用が想定されています。

Assist | Biome

recommendedルールの変更

recommendedに含まれるルールが変更されたため、noParameterAssignなど削除されたルールがlinter.rules.styleに明示的に追加されました。

今回は新規プロジェクトということもあり、recommendedのルールが変わることに抵抗が無かったためこれらの追加ルールは手動で削除しました。

モノレポでの設定ファイルの振る舞いを検証

実際にモノレポ環境で設定ファイルを配置し、Biome checkがどのように動作するかを検証してみました。

プロジェクト構成

以下のような構成のモノレポを想定しています(一部抜粋)。

.
├── package.json
├── biome.json
├── packages
│   ├── module-a
│   │   ├── package.json
│   │   └── biome.json
│   └── module-b
│       ├── package.json
│       └── biome.json

各設定ファイルの内容(一部抜粋)

プロジェクトルート(インデントを4スペースに指定)

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 4
  }
}

module-a（ルート設定を継承）

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "root": false,
  "extends": "//"
}

module-b（独自設定を使用）

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "root": false,
  "javascript": {
    "formatter": {
      "quoteStyle": "single"
    }
  }
}

この状態で、プロジェクトルートで

npx @biomejs/biome check --write .

を実行します。

検証結果

各モジュールでの設定適用結果は以下のようになりました。

ルートに属するファイル

  • インデント幅：4スペース
  • JavaScriptのクォート：ダブルクォート（デフォルト設定）

module-aに属するファイル

  • インデント幅：4スペース（ルート設定を継承）
  • JavaScriptのクォート：ダブルクォート（ルート設定を継承）

module-bに属するファイル

  • インデント幅：タブ（デフォルト設定、ルート設定を継承しない）
  • JavaScriptのクォート：シングルクォート（module-b独自の設定）

各設定ファイルの内容がlint, formatの結果に意図通り反映されていました。

さいごに

Biomeをv2にアップデートすることで、特にモノレポにおいてサブモジュールが増えたときなど今後の運用が楽になると感じました。
個人的には、設定はツールのデフォルトに従い、カスタムは最低限にして管理を楽にしたいと思っています。
(ただしデフォルトtabインデントだけはカスタムしたい・・・！)