VS Code の Biome 自動保存設定

.vscode/settings.json

{
	"editor.codeActionsOnSave": {
		"source.fixAll.biome": "explicit",
		"source.organizeImports.biome": "explicit"
	},
	"[javascript][typescript][typescriptreact][json][jsonc][css]": {
		"editor.defaultFormatter": "biomejs.biome",
		"editor.formatOnSave": true
	}
}

Biome の対象・対応ファイルのみ defaultFormatter と formatOnSave を設定しています。
→ Biome の対応言語 / 対応コード (v3.0.2)

Prettier を設定する際は言語ごとにブロックを分けないと動作しなかった記憶ですが、Biome の場合は纏めて指定できます。
(Prettier の最新の設定方法は必要に応じてご確認ください)

対応言語など意識・指定せず乱暴めに指定する場合

.vscode/settings.json

{
	"editor.defaultFormatter": "biomejs.biome",
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.biome": "explicit",
		"source.organizeImports.biome": "explicit"
	}
}

TS 系の開発では特に悪さしないと思うので、この設定もアリかなと思います。
もし不具合の知見など有ればコメントなどで共有いただけると幸いです。

参照ページ

ワークスペースを利用している場合

ワークスペースを利用している場合、folders 配下のファイルでは .vscode 内の設定が効かない事が有りました。
その場合は settings.json の内容をワークスペースファイルの settings 貼り付ければ機能します。

[project].code-workspace

{
	"folders": [
		{
			"path": "."
		},
		{
			"path": "src/app"
		},
		{
			"path": "src/components"
		}
	],
	"settings": {
		"editor.codeActionsOnSave": {
			"source.fixAll.biome": "explicit",
			"source.organizeImports.biome": "explicit"
		},
		"[javascript][typescript][typescriptreact][json][jsonc][css]": {
			"editor.defaultFormatter": "biomejs.biome",
			"editor.formatOnSave": true
		}
	}
}

.vscode/settings.json と [project].code-workspace の双方を git 管理するのは2重管理であまりお勧めできないので、ドチラかのみを管理の対象に、ルール化・ドキュメントでカバーするのが良いかと思います。

何度か Biome の設定など繰り返してるので、ナレッジ定着も兼ねて記事化してみました。
Biome の設定も quickfix.biome から source.fixAll.biome に変わるなど、微妙に更新されてたりするので、暫く設定を触ってない場合は改めて確認してみるのも良いかもしれません。