VSCode 扩展

Biome VS Code 扩展

¥Biome VS Code Extension

Biome 通过组合不同工具的功能来统一你的开发堆栈。它使用单个配置文件，具有出色的性能，并且可以与任何堆栈一起使用。此扩展将 Biome 引入你的编辑器，以便你可以：

¥Biome unifies your development stack by combining the functionality of separate tools. It uses a single configuration file, has fantastic performance, and works with any stack. This extension brings Biome to your editor so that you can:

保存时或发出“格式化文档”命令时格式化文件

¥Format files on save or when issuing the Format Document command
在键入和应用代码修复时查看 lint

¥See lints while you type and apply code fixes
执行重构

¥Perform refactors

安装

¥Installation

你可以通过前往扩展的 Visual Studio Code 市场页面或从 VS Code 内部安装代码扩展：

¥You can install the code extension by heading to the extension’s Visual Studio Code Market Place page or from within VS Code by either:

打开扩展选项卡（视图 → 扩展）并搜索 Biome。

¥Open the extensions tab (View → Extensions) and search for Biome.
打开快速打开覆盖（Ctrl/⌘+P 或转到 → 转到文件），输入 ext install biomejs.biome，然后按回车键。

¥Open the Quick Open Overlay (Ctrl/⌘+P or Go -> Go to File), enter ext install biomejs.biome, and hit enter.

入门

¥Getting Started

默认格式化程序

¥Default Formatter

当字符串分布在多行上时，允许连接多个字符串，以防止超过最大行宽。你可以通过打开 JavaScript 或 TypeScript 然后执行此操作：

¥Configure Biome as the default formatter for supported files to ensure that VS Code uses Biome over other formatters that you may have installed. You can do so by opening a JavaScript or TypeScript and then:

打开命令面板（Ctrl/⌘+⇧+P 或视图 → 命令面板）

¥Open the Command Palette (Ctrl/⌘+⇧+P or View → Command Palette)
选择使用…格式化文档

¥Select Format Document With…
选择配置默认格式化程序…

¥Select Configure Default Formatter…
选择 Biome

¥Select Biome

你还可以仅为特定语言启用 Biome：

¥You can also enable Biome for specific languages only:

打开 settings.json：打开命令面板（Ctrl/⌘+⇧+P）并选择首选项：打开用户设置（JSON）

¥Open the settings.json: open the Command Palette(Ctrl/⌘+⇧+P) and select Preferences: Open User Settings (JSON)
将所需语言的 editor.defaultFormatter 设置为 biomejs.biome

¥And set the editor.defaultFormatter to biomejs.biome for the desired language

{
  "editor.defaultFormatter": "<other formatter>",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

此配置将 Biome 设置为 JavaScript 文件的默认格式化程序。所有其他文件将使用 <other formatter> 格式化

¥This configuration sets Biome as the default formatter for JavaScript files. All other files will be formatted using <other formatter>

配置解析度

¥Configuration Resolution

扩展会自动从工作区的根目录加载 biome.json 文件。

¥The extension automatically loads the biome.json file from the workspace’s root directory.

Biome 解析

¥Biome Resolution

扩展会尝试从项目的本地依赖（node_modules/@biomejs/biome）中使用 Biome。我们建议将 Biome 添加为项目依赖，以确保 NPM 脚本和扩展使用相同的 Biome 版本。

¥The extension tries to use Biome from your project’s local dependencies (node_modules/@biomejs/biome). We recommend adding Biome as a project dependency to ensure that NPM scripts and the extension use the same Biome version.

你还可以通过在编辑器选项中配置 biome.lspBin 设置来明确指定扩展应使用的 Biome 二进制文件。

¥You can also explicitly specify the Biome binary the extension should use by configuring the biome.lspBin setting in your editor options.

如果项目不依赖 Biome 且未配置显式路径，则扩展将使用其包中包含的 Biome 版本。

¥If the project has no dependency on Biome and no explicit path is configured, the extension uses the Biome version included in its bundle.

用法

¥Usage

格式化文档

¥Format document

要格式化整个文档，请打开命令面板（Ctrl/⌘+⇧+P）并选择“格式化文档”。

¥To format an entire document, open the Command Palette (Ctrl/⌘+⇧+P) and select Format Document.

要格式化文本范围，请选择要格式化的文本，打开命令面板（Ctrl/⌘+⇧+P），然后选择“格式化选择”。

¥To format a text range, select the text you want to format, open the Command Palette (Ctrl/⌘+⇧+P), and select Format Selection.

格式化保存

¥Format on save

Biome 尊重 VS Code 的“保存时格式”设置。要启用保存时格式化，请打开设置（文件 -> 首选项 -> 设置），搜索 editor.formatOnSave，然后启用该选项。

¥Biome respects VS Code’s Format on Save setting. To enable format on save, open the settings (File -> Preferences -> Settings), search for editor.formatOnSave, and enable the option.

保存时修复

¥Fix on save

Biome 尊重 VS Code 的“保存时的代码操作”设置。要启用保存时修复，请添加

¥Biome respects VS Code’s Code Actions On Save setting. To enable fix on save, add

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

在 vscode settings.json 中。

¥in vscode settings.json.

导入排序 [实验性]

¥Imports Sorting [Experimental]

Biome VS Code 扩展支持通过 “组织导入” 代码操作进行导入排序。默认情况下，可以使用 ⇧+Alt+O 键盘快捷键运行此操作，也可以通过命令面板 (Ctrl/⌘+⇧+P) 选择“组织导入”来访问。

¥The Biome VS Code extension supports imports sorting through the “Organize Imports” code action. By default this action can be run using the ⇧+Alt+O keyboard shortcut, or is accessible through the Command Palette (Ctrl/⌘+⇧+P) by selecting Organize Imports.

如果你希望操作在保存时自动运行而不是手动调用，则可以将以下内容添加到编辑器配置中：

¥You can add the following to your editor configuration if you want the action to run automatically on save instead of calling it manually:

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

扩展设置

¥Extension Settings

`biome.lspBin`

biome.lspBin 选项会覆盖扩展使用的 Biome 二进制文件。如果路径是相对的，则工作区文件夹用作基本路径。

¥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`

使 Biome 能够处理工作区中的重命名（实验性）。

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

版本控制

¥Versioning

我们遵循官方文档建议的规范：

¥We follow the specs suggested by the official documentation:

奇数小版本专用于预发布，例如 *.5.* 。即使是小版本也专用于正式发布，例如 *.6.*。

¥Odd minor versions are dedicated to pre-releases, e.g. *.5.* . Even minor versions are dedicated to official releases, e.g. *.6.*.

故障排除

¥Troubleshooting

我安装了 `@biomejs/biome`，但扩展显示警告，说它无法解析库

¥I installed @biomejs/biome, but the extension shows a warning saying that it could not resolve library

库 @biomejs/biome 指定了一些根据你的操作系统和架构安装的可选依赖。

¥The library @biomejs/biome specifies some optional dependencies that are installed based on your OS and architecture.

不过，扩展在加载扩展时可能无法解析二进制文件。这是导致的 - probably - 由你的包管理器。

¥It’s possible though, that the extension can’t resolve the binary when loading the extension. This is caused - probably - by your package manager.

要解决此问题，请尝试手动安装二进制文件。警告应该会显示属于你机器的二进制文件。

¥To resolve the issue, try to install the binary manually. The warning should show you the binary that belongs to your machine.

如果你在使用不同操作系统/架构的团队中工作，建议安装所有二进制文件：

¥If you work in a team that use different OSs/architectures, it’s advised to install all the binaries:

@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` 文件在多根工作区中被忽略

¥My biome.json file is ignored in a multi-root workspace

目前，对多根工作区的支持有限，因此放置在单个根文件夹中的 biome.json 文件有时对扩展不可见。目前，你可能需要为每个依赖 Biome 的文件夹设置一个单独的工作区。你可以跟踪我们在此问题上的进度。

¥Currently, support for multi-root workspaces is limited, making biome.json files placed in individual root folders sometimes invisible to the extension. For now, you may need to set up an individual workspace for each folder that depends on Biome. You can track our progress on this issue.