概要
以前の記事で、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,useImportTypeandnoUnusedImportshave been substantially improved, so you will see fewer false positives.
パース精度の向上により、noUnusedVariables、useConst、useImportType、noUnusedImportsなどのルールにおける誤検知が減少しています。
また、CSSパーサーが:slotted、:deep、v-bind()といったVue SFC構文を認識するようになりました。
なぜ誤検知が起きていたのか
Astroファイルは、---で囲まれたフロントマターとHTMLテンプレートの2つの部分から構成されています。
---
// フロントマター（サーバーサイドで実行される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以降のバージョンで再度試してみることをおすすめします。