← 戻る

Biome v2.3+ で Vue SFC テンプレートをフォーマットする3つの設定

biome vue formatter sfc

問題

Biome v2.4.7 で Vue SFC の <template> 部分が biome format でフォーマットされない。

解決策

biome.json に3つの設定が必須：

{
  "files": {
    "includes": ["**", ".dotdir/**"]
  },
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "enabled": true
    }
  }
}

重要なポイント

  1. experimentalFullSupportEnabled: true — v2.3で追加。Vue/Svelte/Astro の SFC内の全パート（template, script, style）の完全な解析を有効化。これなしでは <script> と <style> のみ処理
  2. html.formatter.enabled: true — デフォルトは false。biome format コマンドが HTMLを処理するための明示的な有効化が必要。biome check --write はlint経由で動くため気づきにくい
  3. files.includes にドットディレクトリを明示 — .vitepress/** のようなドットで始まるディレクトリはデフォルトスキャン対象外

既知の制限

  • 複雑な TypeScript ジェネリクス（ref<InstanceType<typeof X>>）でパースエラーが発生するケースあり
  • v-for="item of items" の of 構文がパースエラーになる（in は問題なし）
  • パースエラーが出るファイルはフォーマットがスキップされる（ファイルは壊れない）
  • formatWithErrors: true は危険 — パースエラー時にSFCタグが消える・コードが壊れるリスクがある