chansuke/biome-vscode

Biome extension for Visual Studio Code

Visual Studio Code extension for Biome

The Visual Studio Code extension for Biome brings first-party support for Biome to VS Code and similar editors such as VSCodium. By integrating with Biome's language server, the extension provides the following features, among others:

• 💾 Format on save
• 💡 Inline suggestions with quick fixes
• 🚧 Refactoring

Installation

The Visual Studio Code extension for Biome is available from the following sources.

• Visual Studio Code Marketplace (recommended for VS Code users)
• Open VSX Registry (recommended for VSCodium users)

Getting Started

This section describes how to get started with the Biome VS Code extension.

Setting as the default formatter

To set the VS Code extension for Biome as the default formatter, follow the steps below.

1. Open the Command Palette: ⌘/Ctrl+⇧+P
2. Select Format Document With…
3. Select Configure Default Formatter…
4. Select Biome

This will ensure that VS Code uses Biome to format all supported files, instead of other formatters that you may have installed.

Setting as the default formatter for specific languages

If you'd rather not set Biome as the default formatter for all languages, you can set it as the default formatter for specific languages only. The following steps describe how to do this.

1. Open the Command Palette
2. Select Preferences: Open User Settings (JSON)

Set the editor.defaultFormatter to biomejs.biome for the desired language. For example, to set Biome as the default formatter for JavaScript files, add the following to your editor's options.

"[javascript]": {
	"editor.defaultFormatter": "biomejs.biome"
}

Choosing a biome binary

To resolve the location of the biome binary, the extension will look into the following places, in order:

1. The project's local dependencies (node_modules)
2. The path specified in the biome.lspBin configuration option of the extension
3. The extension's globalStorage location

If none of these locations has a biome binary, the extension will prompt you to download a binary compatible with your operating system and architecture and store it in the globalStorage.

Note

We recommend adding Biome to your project's devDependencies so that both the extension and your NPM scripts use the same version of Biome.

npm install -D @biomejs/biome

Usage

Formatting documents

On-demand formatting

To format a document on-demand, follow the steps below.

1. Open the Command Palette: ⌘/Ctrl+⇧+P
2. Select Format Document

You can also format a selection of text by following the steps below.

1. Select the text you want to format
2. Open the Command Palette: ⌘/Ctrl+⇧+P
3. Select Format Selection

Formatting on save

This supports formatting on save out of the box. You should enable format on save in your editor's settings and make sure that the Biome extension is set as the default formatter for your documents/languages.

Autofix on save

This extension supports VS Code's Code Actions On Save setting. To enable autofix on save, add the following to your editor configuration.

{
  "editor.codeActionsOnSave": {
	"quickfix.biome": "explicit"
  }
}

Sorting imports (experimental)

Biome has an experimental Organize Imports feature that allows you to sort imports automatically. This feature can be run manually or automatically on save.

On-demand sorting

To sort imports on-demand, follow the steps below.

1. Open the Command Palette: ⌘/Ctrl+⇧+P
2. Select Organize Imports

Sorting on save

To automatically sort imports on save, add the following to your editor configuration.

{
  "editor.codeActionsOnSave": {
	"source.organizeImports.biome": "explicit"
  }
}

Extension Settings

biome.lspBin

The biome.lspBin option overrides the Biome binary used by the extension. The workspace folder is used as the base path if the path is relative.

biome.rename

Enables Biome to handle renames in the workspace (experimental).