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:
The Visual Studio Code extension for Biome is available from the following sources.
This section describes how to get started with the Biome VS Code extension.
To set the VS Code extension for Biome as the default formatter, follow the steps below.
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.
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"
}
biome
binaryTo resolve the location of the biome
binary, the extension will look into the following places, in order:
node_modules
)biome.lspBin
configuration option of the extensionglobalStorage
locationIf 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.
You can also format a selection of text by following the steps below.
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.
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"
}
}
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.
To automatically sort imports on save, add the following to your editor configuration.
{
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}
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).