Important
This repository has been extracted from the Biome monorepo. It is still a work in progress. If you find any issues, please report them in the Biome monorepo.
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
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)
This section describes how to get started with the Biome VS Code extension.
By default, the extension will not start unless a biome.json
file is present at the
root of the workspace. You can disable this behaviour by setting the biome.requireConfiguration
setting to false
.
To set the VS Code extension for Biome as the default formatter, follow the steps below.
- Open the Command Palette: ⌘/Ctrl+⇧+P
- Select Format Document With…
- Select Configure Default Formatter…
- Select Biome
This will ensure that VS Code uses Biome to format all supported files, instead of other formatters that you may have installed.
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.
- Open the Command Palette
- 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"
}
To resolve the location of the biome
binary, the extension will look into the following places, in order:
- The project's local dependencies (
node_modules
) - The path specified in the
biome.lspBin
configuration option of the extension - 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
To format a document on-demand, follow the steps below.
- Open the Command Palette: ⌘/Ctrl+⇧+P
- Select Format Document
You can also format a selection of text by following the steps below.
- Select the text you want to format
- Open the Command Palette: ⌘/Ctrl+⇧+P
- Select Format Selection
Thhis 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.
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": true
}
}
Biome has an experimental Organize Imports
feature that allows you to sort imports automatically. This feature can be run manually or automatically on save.
To sort imports on-demand, follow the steps below.
- Open the Command Palette: ⌘/Ctrl+⇧+P
- Select Organize Imports
To automatically sort imports on save, add the following to your editor configuration.
{
"editor.codeActionsOnSave": {
"source.organizeImports.biome": true
}
}
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.
Enables Biome to handle renames in the workspace (experimental).
Disables formatting, linting, and syntax errors for projects without a biome.json
file.
Enabled by default.