VS Code拡張機能

Biome VS Code 拡張機能

Biomeは、開発スタックを統合し、複数のツールの機能を1つにまとめます。単一の設定ファイルを使用し、素晴らしいパフォーマンスで、あらゆる環境で動作します。この拡張機能はエディタ上で、以下のことを可能にします：

ファイルを保存時にフォーマット、ドキュメントのフォーマットコマンドの使用
タイプ中に静的解析の結果を確認し、コード修正を適用
リファクタリングの実行

インストール方法

VS Codeの拡張機能をインストールするには、Visual Studio Code マーケットプレイスページにアクセスするか、VS Code内で以下の方法でインストールできます：

拡張機能 タブ（表示 → 拡張機能）を開き、Biomeを検索する。
コマンドパレット（Ctrl/⌘+Pまたは移動 → ファイルに移動）で ext install biomejs.biome と入力し、Enterキーを押す。

はじめに

デフォルトのフォーマッタに設定する

Biomeを、サポートされているファイルのデフォルトフォーマッタとして設定し、VS Codeが他にインストールされているフォーマッタではなくBiomeを使用するようにします。これを行うには、JavaScriptまたはTypeScript形式のファイルを開いて次の操作を行います：

コマンドパレットを開く（Ctrl/⌘+⇧+P または表示 → コマンドパレット）
ドキュメントのフォーマット… を選択
デフォルトのフォーマッターの設定… を選択
Biomeを選択

また、特定の言語のみにBiomeを有効にすることもできます：

settings.jsonを開く: コマンドパレット（Ctrl/⌘+⇧+P）を開き、設定: ユーザー設定（JSON）を開く を選択
Biomeを有効にしたい言語のeditor.defaultFormatterにbiomejs.biomeを設定する

1
{
2
  "editor.defaultFormatter": "<other formatter>",
3
  "[javascript]": {
4
    "editor.defaultFormatter": "biomejs.biome"
5
  }
6
}

この設定の場合、BiomeをJavaScriptファイルのデフォルトフォーマッタとして設定します。その他のファイルは<other formatter>を使ってフォーマットされます。

設定の読み込み

拡張機能は、ワークスペースのルートディレクトリからbiome.jsonファイルを自動的に読み込みます。

Biomeの読み込み

拡張機能は、プロジェクトのローカル依存関係（node_modules/@biomejs/biome）からBiomeを使用しようとします。npmスクリプトと拡張機能が同じバージョンを使用することを確実にするために、Biomeをプロジェクトの依存関係に追加することをおすすめします。

また、エディタのオプションでbiome.lspBin設定を構成することにより、拡張機能が使用すべきBiomeバイナリを明示的に指定することもできます。

プロジェクトがBiomeに依存しておらず、明示的なパスも設定されていない場合、拡張機能はバンドルされたBiomeのバージョンを使用します。

使用方法

ドキュメントのフォーマット

ドキュメント全体をフォーマットするには、コマンドパレット（Ctrl/⌘+⇧+P）を開き、ドキュメントのフォーマット を選択します。

ドキュメントの一部をフォーマットするには、フォーマットしたいテキストを選択し、コマンドパレット（Ctrl/⌘+⇧+P）を開き、選択範囲のフォーマット を選択します。

保存時のフォーマット

Biomeは、VS Codeの 保存時のフォーマット 設定を尊重します。保存時のフォーマットを有効にするには、設定を開き（ファイル -> 設定 -> 設定）、editor.formatOnSaveを検索し、オプションを有効にします。

保存時の修正

Biomeは、VS Codeの 保存時のコードアクション 設定を尊重します。保存時の修正を有効にするには、以下を追加してください。

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.fixAll.biome": "explicit"
4
  }
5
}

これは、VS Codeのsettings.jsonで行います。

インポートの並び替え [実験的機能]

BiomeのVS Code拡張機能は、Organize Importsコードアクションを通じてインポートの並び替えをサポートしています。デフォルトでは、このアクションは⇧+Alt+Oのキーボードショートカットを使用して実行することができます。または、コマンドパレット (Ctrl/⌘+⇧+P) を開き、Organize Importsを選択してアクセスすることもできます。

保存時に自動的にこのアクションを実行したい場合は、エディタの設定に以下を追加してください：

1
{
2
  "editor.codeActionsOnSave":{
3
    "source.organizeImports.biome": "explicit"
4
  }
5
}

拡張機能の設定

`biome.lspBin`

biome.lspBinオプションは、拡張機能が使用するBiomeのバイナリを上書きします。相対パスを指定した場合は、ワークスペースフォルダが基準パスとして使用されます。

`biome.rename`

Biomeがワークスペース内の名前変更を処理することを有効にします（実験的機能）。

バージョン管理

公式ドキュメントで提案された仕様に従っています：

奇数のマイナーバージョンはプレリリース専用として割り振られています。例：*.5.* 偶数のマイナーバージョンは正式リリース専用として割り振られています。例：*.6.*

トラブルシューティング

`@biomejs/biome`をインストールしましたが、拡張機能で「ライブラリを解決できませんでした」という警告が表示される

ライブラリ@biomejs/biomeは、OSやアーキテクチャに基づいてインストールされるいくつかのオプションの依存関係を指定しています。

しかし、拡張機能の読み込み時にバイナリを解決できない場合があります。これはおそらくあなたのパッケージマネージャーによるものです。

問題を解決するには、バイナリを手動でインストールしてみてください。警告には、あなたのマシンに適したバイナリが表示されるはずです。

異なるOSやアーキテクチャを使用するチームで作業する場合は、すべてのバイナリをインストールすることをお勧めします：

@biomejs/cli-darwin-arm64
@biomejs/cli-darwin-x64
@biomejs/cli-linux-arm64
@biomejs/cli-linux-x64
@biomejs/cli-win32-arm64
@biomejs/cli-win32-x64

マルチルートのワークスペースで `biome.json` ファイルが無視される

マルチルートのワークスペースのサポートは現在限られており、各ルートフォルダに配置された biome.json が拡張に無視されることがあります。現時点では、Biomeに依存する各フォルダについて個別のワークスペースを作成する必要があります。対応状況はこのIssueで追跡できます。