概要

以前の記事で、Biome v2.3でVue/Svelte/Astroの完全サポートが謳われたものの、スクリプトとテンプレートをまたぐ変数参照の追跡に未対応でnoUnusedVariablesやnoUnusedImportsの誤検知が発生するという問題を紹介しました。

2026年2月10日にリリースされたBiome v2.4で、この問題が改善されました。

この記事では、v2.4での改善内容と、実際にAstroプロジェクトで検証した結果を紹介します。

対象読者

v2.3時点で上記の問題によりBiomeへの移行を見送った方
Vue/Svelte/AstroプロジェクトでBiomeへの移行を検討している方

最初にまとめ

Biome v2.4でnoUnusedVariablesやnoUnusedImportsなどのルールの誤検知がなくなりました。

実際にAstroのblogテンプレートで検証したところ、v2.3で発生していた誤検知がv2.4では解消されていることを確認しました。

v2.3時点でBiomeへの移行を見送った方も、v2.4以降での移行を検討する価値があります。

環境

Biome v2.3.0, v2.4.0（ブログテンプレートでの検証）
Biome v2.4.4（ポートフォリオへの適用）

本題

v2.4での改善内容

Biome v2.4の公式ブログには以下の記載があります。

Biome 2.4 brings significantly improved parsing for Vue and Svelte, resulting in better formatting across the board. Additionally, the rules noUnusedVariables, useConst, useImportType and noUnusedImports have been substantially improved, so you will see fewer false positives.

パース精度の向上により、noUnusedVariables、useConst、useImportType、noUnusedImportsなどのルールにおける誤検知が減少しています。

また、CSSパーサーが:slotted、:deep、v-bind()といったVue SFC構文を認識するようになりました。

なぜ誤検知が起きていたのか

Astroファイルは、---で囲まれたフロントマターとHTMLテンプレートの2つの部分から構成されています。

src/pages/index.astro

---
// フロントマター（サーバーサイドで実行されるJavaScript）
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
---

<!doctype html>
<html lang="en">
  <head>
    <!-- フロントマターでimportしたコンポーネントをテンプレートで使用 -->
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body>
    <Header />
    <main>...</main>
    <Footer />
  </body>
</html>

importしたコンポーネントや変数はすべてテンプレート側で使用されていますが、v2.3ではフロントマターとテンプレートをまたぐ変数参照を追跡できず、「フロントマターでimportしたが使われていない」と誤って判定していました。

検証

npm create astro@latestでblogテンプレートのプロジェクトを作成し、v2.3.0とv2.4.0でそれぞれbiome checkを実行して結果を比較しました。

v2.3.0でcheckをかけると、テンプレートで使用されているimportがすべてnoUnusedImportsとして報告されます。

% pnpm biome check src/pages/index.astro

src/pages/index.astro:2:8 lint/correctness/noUnusedImports  FIXABLE  ━━━━━━━━━━━

  ⚠ This import is unused.

    1 │ ---
  > 2 │ import BaseHead from '../components/BaseHead.astro';
      │        ^^^^^^^^
    3 │ import Footer from '../components/Footer.astro';
    4 │ import Header from '../components/Header.astro';

  ℹ Unused imports might be the result of an incomplete refactoring.

  ℹ Unsafe fix: Remove the unused imports.

...（Footer、Header、SITE_DESCRIPTION、SITE_TITLEも同様の警告）

Checked 1 file in 1588µs. No fixes applied.
Found 4 warnings.

BaseHead、Footer、Header、SITE_DESCRIPTION、SITE_TITLEの5つのimportがすべて「未使用」として警告されていますが、実際にはHTMLテンプレート側で使用されています。

v2.4.0では同じファイルに対してcheckをかけても警告が出ません。

% pnpm biome check src/pages/index.astro

Checked 1 file in 2ms. No fixes applied.

実際にAstroプロジェクトで移行してみた

AstroベースのポートフォリオサイトでESLint + PrettierをBiomeに移行するPRを作成しました。

ESLint本体だけでなくeslint-config-prettierやtypescript-eslint、prettier-plugin-astroといった関連パッケージも削除できたため、pnpm-lock.yamlが2,000行以上削減されました。

v2.3時点では誤検知が原因で移行を断念しましたが、v2.4では問題なく移行できました。

まとめ

Biome v2.3で発生していたフロントマターとテンプレートをまたぐ変数参照の追跡の問題は、v2.4でパーサーの改善によって解消されました。

実際にblogテンプレートで検証したところ、v2.3では5件の誤検知が出ていたものがv2.4では0件になることを確認しました。

AstroプロジェクトへのBiome導入では、ESLint + Prettierの関連パッケージもまとめて削除でき、依存関係を大幅にスリムにできるメリットもあります。

v2.3時点でBiomeへの移行を見送った方は、v2.4以降のバージョンで再度試してみることをおすすめします。