## 経緯
[[Biome]] 2.4.0がリリースされた。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://biomejs.dev/img/favicon.svg" />
<span class="link-card-v2-site-name">Biome</span>
</div>
<div class="link-card-v2-title">
Biome v2.4—Embedded Snippets, HTML Accessibility, and Better Framework Support
</div>
<img class="link-card-v2-image" src="https://biomejs.dev/og/blog/biome-v2-4.png" />
<a href="https://biomejs.dev/blog/biome-v2-4/"></a>
</div>
[[Biome]] 2.3.0 では『[[Vue]]の完全対応』と言われていたが、実際は細部で動きが不安定だった。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" />
<span class="link-card-v2-site-name">Minerva</span>
</div>
<div class="link-card-v2-title">
📜2025-10-26 Biome 2.3でVueからPrettierをアンインストールしてみる
</div>
<div class="link-card-v2-content">Biome 2.3.0でVue完全対応が発表されたため、PrettierからBiomeへの移行を試みた。設定やNeovimでのlint動作、未使用import削除、template内変数のunused警告など、移行時の注意点や挙動の変化を検証した。実施環境はNuxt 4、TypeScript、bun。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" />
<a data-href="📜2025-10-26 Biome 2.3でVueからPrettierをアンインストールしてみる" class="internal-link"></a>
</div>
%%[[📜2025-10-26 Biome 2.3でVueからPrettierをアンインストールしてみる]]%%
が、今回は[[Vue]]のサポートがより向上したということなので試してみたい。
### 環境
| 対象 | バージョン |
| --------- | ----- |
| [[Bun]] | 1.3.5 |
| [[Biome]] | 2.4.0 |
## プロジェクト作成
```console
toki nuxt nuxt-sandbox
```
```console
$ bun pm ls
/Users/tadashi-aikawa/tmp/nuxt-sandbox node_modules (736)
├── @fsouza/
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
└──
[email protected]
```
[[prettierd]]と[[Prettier Plugin Organize Imports]]をアンインストール。
```console
bun rm @fsouza/prettierd prettier-plugin-organize-imports
```
[[Biome]]をインストール。
```console
bun add @biomejs/biome --ignore-scripts --minimum-release-age 4640
```
```console
$ bun pm ls
/Users/tadashi-aikawa/tmp/nuxt-sandbox node_modules (727)
├── @biomejs/
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
└──
[email protected]
```
## 設定
前回同様に。
```console
bunx biome init
```
- `html.experimentalFullSupportEnabled: true` を追加
- `formatter.indentstyle: "space"` に変更
```json
{
"$schema": "https://biomejs.dev/schemas/2.4.0/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false
},
"html": {
"experimentalFullSupportEnabled": true
},
"formatter": {
"enabled": true,
"indentStyle": "space"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}
```
## フォーマットされない
[[Neovim]]で`.ts`ファイルも `.vue`ファイルもフォーマットされない。
> [!left-bubble] ![[chappy.webp]]
> conform.nvim と Biome 2.4.0 の呼び出し方式ミスマッチです。
>
> - あなたの設定は Web 系で biome-check を最優先
> - conform 内蔵の biome-check 定義は stdin = true + check --write --stdin-file-path
> - この呼び出しを実行すると、Biome 2.4.0 は exit 0 でも stdout 0 bytes（実測）
> - conform は非空バッファに対して空出力を受けると WARN で中断する仕様
>
> 対処案（実装はまだしていません）:
>
> 1. biome-check を上書きして stdin = false、args = { "check", "--write", "$FILENAME" } に
> する
> 2. もしくは Web formatter を biome-check から prettierd/biome に切り替える
[[Bun]] 2.3.5 だと再現しないので、何か仕様が変わった？
### tsファイル
`formatters["biome-check"]` を上書きすることで解決はした。不具合な可能性もあるので少し様子見したい。
```lua
return {
opts = function()
return {
formatters = {
["biome-check"] = {
-- Biome 2.4.0 では stdin 経由の check --write が空出力になるため
stdin = false,
args = { "check", "--write", "$FILENAME" },
},
},
}
end,
}
```
#### 2026/02/17 追記
v2.4.1でなおった。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" />
<span class="link-card-v2-site-name">Minerva</span>
</div>
<div class="link-card-v2-title">
📝conform.nvimでBiome v2.4.0のフォーマットが効かない
</div>
<div class="link-card-v2-content">Biome v2.4.0でconform.nvimの`biome-check`が`--stdin-file-path`使用時に整形後コードを標準出力に出さず、`biome check --write --stdin-file-path`実行時のstdoutが空になった結果、保存時フォーマットが動作しなくなった事象である。2.4.1へ更新して解消した。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/troubleshooting.webp" />
<a data-href="📝conform.nvimでBiome v2.4.0のフォーマットが効かない" class="internal-link"></a>
</div>
%%[[📝conform.nvimでBiome v2.4.0のフォーマットが効かない]]%%
### vueファイル
そもそもコマンドが効かない。
```console
$ bunx biome check app/app.vue
Checked 1 file in 2ms. No fixes applied.
```
`html.formatter.enabled` が指定されてなかった。
```json
{
"html": {
"experimentalFullSupportEnabled": true,
"formatter": {
"enabled": true
}
},
}
```
## VueファイルでLintされない
tsファイルでは[[Lint]]されるがvueファイルでされない。`html.experimentalFullSupportEnabled` を `false` にすると動作するという謎。
```json
{
"html": {
"experimentalFullSupportEnabled": false,
}
}
```
ただこれは、[[📜2025-10-26 Biome 2.3でVueからPrettierをアンインストールしてみる#Neovim でlintが発動しない]] と似ている。
`debugger` を挿入したら[[Biome]] 自体は反応したので、もしかして設定が何か違ったり？
```html
<script>
debugger
</script>
```
そもそも、[[experimentalFullSupportEnabled (Biome)|experimentalFullSupportEnabled]]の意味を勘違いしていた。これを有効にすると **[[Biome]]の機能では正しく診断できないルールを敢えて無効化する** らしい。
```json
"rules": {
"style": {
"useConst": "off",
"useImportType": "off"
},
"correctness": {
"noUnusedVariables": "off",
"noUnusedImports": "off"
}
}
```
たまたま試したコードはこれらのルールに対するものだったというだけ。
## [[Tailwind CSS]]周りの対応が要件を満たさなそう
`useSortedClasses` で対応はされている。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://biomejs.dev/img/favicon.svg" />
<span class="link-card-v2-site-name">Biome</span>
</div>
<div class="link-card-v2-title">
useSortedClasses
</div>
<div class="link-card-v2-content">
Learn more about useSortedClasses
</div>
<img class="link-card-v2-image" src="https://biomejs.dev/img/og.png?v=2" />
<a href="https://biomejs.dev/ja/linter/rules/use-sorted-classes/#_top"></a>
</div>
しかし、`Caution` にある通り対応状況は道半ば。
> This rule is a work in progress, and is only partially implemented. Progress is being tracked in the following GitHub issue: https://github.com/biomejs/biome/issues/1274
[[prettier-plugin-tailwindcss]]を使っている場合はデグレになる確率が高いので、しばらくはおとなしく[[Prettier]]を使っている方がいいと思った。どっちにしろ[[Vue Tsgo]]に移行することのほうがボトルネック解消という意味では優先。