## 経緯
2日前に[[Biome]]の2.3.0がリリースされた。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
Release Biome CLI v2.3.0
· biomejs/biome
</div>
<div class="link-card-v2-content">
2.3.0Minor Changes#7263 a3e3369 Thanks @arendjr! - Biome's resolver now supports baseUrl if specified in tsconfi ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/ef3e61309853a4a98f050198f3a4132c1af91715cf3c34a393751a289eda4c19/biomejs/biome/releases/tag/%40biomejs/biome%402.3.0" />
<a href="https://github.com/biomejs/biome/releases/tag/%40biomejs%2Fbiome%402.3.0"></a>
</div>
v2.3の主な変更点は以下の記事に記載がある。
<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.3—Let's bring the ecosystem closer
</div>
<img class="link-card-v2-image" src="https://biomejs.dev/og/blog/biome-v2-3.png" />
<a href="https://biomejs.dev/blog/biome-v2-3/"></a>
</div>
中でも[[Vue]]の完全対応は待ちに待ったものだった。
> Full support for Vue, Svelte, and Astro
現状、[[Vue]]のプロジェクトにはすべて[[Prettier]]([[prettierd]])を使っていたが、[[Biome]]に一本化できるかを確かめてみる。
なお、[[Tailwind CSS]]のv4に対応したのも地味に嬉しいポイント。
> Tailwind v4 support
## プロジェクト作成
```console
toki nuxt nuxt-sandbox
```
```console
$ bun pm ls
/Users/tadashi-aikawa/tmp/nuxt-sandbox node_modules (718)
├── @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 --dev @biomejs/biome
```
```console
$ bun pm ls
/Users/tadashi-aikawa/tmp/nuxt-sandbox node_modules (714)
├── @biomejs/
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
└──
[email protected]
```
## 設定
`biome.json` で[[Vue]]のサポートを有効にするため `experimentalFullSupportEnabled` を `true` にする。そのためにまずは `biome.json` の初期化が必要。
```console
bunx biome init .
```
少し設定を修正。
- `html.experimentalFullSupportEnabled: true` を追加
- v2.3の[[Vue]] full supportはまだこのオプションが必要
- `formatter.indentstyle: "space"` に変更
- `linter.rules.correctness: {"noUnusedImports": "warn"}` を追加
```json
{
"$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false
},
"formatter": {
"enabled": true,
"indentStyle": "space"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": { "noUnusedImports": "warn" }
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"html": {
"formatter": {
"enabled": true
},
"experimentalFullSupportEnabled": true
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}
```
## [[Neovim]]でlintが発動しない
`bunx biome lint` をターミナルで実行すると動作するが、[[Neovim]]上では[[Lint]]が表示されない。
`html.experimentalFullSupportEnabled` を `false` にするとlintは動作するが、scriptタグはv2.3以前の内容なので、v2.3の内容でなにかおかしくなっていそうな気がする。そして、エラーの位置は少しずれているような。。
[[HTML]]周りでissue挙がっているので、[[LSP]]周りでなにか問題が起きているのかも？
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
🐛 Biome crashed while open astro file · Issue #7837 · biomejs/biome
</div>
<div class="link-card-v2-content">
Environment information CLI: Version: 2.3.0 Color support: true Platform: CPU Architecture: aarch64 OS: macos En ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/09477b4359553e1cfcaaae27a63ebabf5b86c8f05c38b289598ae1b2d6d64494/biomejs/biome/issues/7837" />
<a href="https://github.com/biomejs/biome/issues/7837"></a>
</div>
### 2025/10/30 追記
[[Biome]]を `2.3.0` から `2.3.2` にアップデートしたら問題が解消した。
## 使用されていないimport文が自動で削除されない
[[Biome]] v2.0.0以降で挙動が変わっているので、設定を変更していない場合は変更が必要。
<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">
📝Biomeで未使用import文の削除ができない
</div>
<div class="link-card-v2-content">Biome 2.3.0でnoUnusedImportsによる未使用import文の自動削除が動作しない事象について、原因はv2.0.0以降でunsafe fixに変更されたためである。解決策は--unsafeフラグ追加や設定でsafe fix指定が必要である。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/troubleshooting.webp" />
<a data-href="📝Biomeで未使用import文の削除ができない" class="internal-link"></a>
</div>
%%[[📝Biomeで未使用import文の削除ができない]]%%
## templateタグ内で使用している変数・関数がunusedと解釈される
[[Vue]]はpartialサポートという方針なので仕様。設定で無効化する。
<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">
📝Biomeでvueファイルのscriptで定義されている変数をtemplate内で使用しているのにunused警告が出る
</div>
<div class="link-card-v2-content">Vueファイルのscriptで定義しtemplateで使用している変数に対し、Biomeのlintで「This variable count is unused.」「This variable increment is unused.」警告が出る事象である。原因はBiomeのVue対応が部分的なためで、noUnusedVariablesルールを無効化することで解決できる。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/troubleshooting.webp" />
<a data-href="📝Biomeでvueファイルのscriptで定義されている変数をtemplate内で使用しているのにunused警告が出る" class="internal-link"></a>
</div>
%%[[📝Biomeでvueファイルのscriptで定義されている変数をtemplate内で使用しているのにunused警告が出る]]%%