#vue (2)

問題

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タグが消える・コードが壊れるリスクがある

問題

Zedで .vue ファイルを保存すると、CLIの biome format と微妙に異なるフォーマットが適用される。インデントや閉じタグ前の空白など、細かい差分が毎回発生する。

原因

.zed/settings.json で "formatter": "language_server" と指定すると、Vueファイルでは Volar（Vue LSP）が優先的にフォーマッタとして使われる。BiomeのLSPも動いているが、Volarが先に処理してしまう。

解決策

プロジェクトの .zed/settings.json でVue.jsのフォーマッタにBiome LSPを 名前指定 する。

{
  "languages": {
    "Vue.js": {
      "formatter": {
        "language_server": {
          "name": "biome"
        }
      }
    }
  }
}

"formatter": "language_server" （名前なし）ではなく、"name": "biome" で明示することがポイント。

補足

external コマンドで pnpm biome format --stdin-file-path を呼ぶ方法でも動くが、LSP経由の方がZedのエコシステムに沿った正攻法。