第 7 章 · VSCode / Zed / JetBrains 插件

7.1 Biome 与 LSP

Biome 本体自带 Language Server Protocol（LSP）实现——biome lsp-proxy。各 IDE 的 Biome 插件其实是薄薄一层"LSP 客户端"，真正做事的是同一个 Biome 二进制。这意味着：

IDE 报的错跟 biome check 命令行输出完全一致（不会有"ESLint 报错 Prettier 又覆盖"的尴尬）
升级 @biomejs/biome 版本就同时升级了 IDE 里的 Biome 能力
可以同时用多个编辑器，行为始终统一

7.2 VSCode

安装

Marketplace 搜索 Biome（发布者 biomejs，id: biomejs.biome）。或：

code --install-extension biomejs.biome

项目级 .vscode/settings.json

{
  // 1. 默认 formatter 设为 Biome
  "editor.defaultFormatter": "biomejs.biome",

  // 2. 保存时自动 format
  "editor.formatOnSave": true,

  // 3. 保存时自动修复 + 整理 import
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

  // 4. 可选：按语言强制 formatter
  "[javascript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
  "[json]": { "editor.defaultFormatter": "biomejs.biome" },
  "[jsonc]": { "editor.defaultFormatter": "biomejs.biome" }
}

共享给团队

把 .vscode/settings.json 与 .vscode/extensions.json（推荐插件列表）一同提交。克隆仓库的人打开项目时 VSCode 会提示安装 Biome 插件——零配置上手。

排错清单

保存不 format？检查是否装了 Prettier 插件却仍为默认 formatter
底部状态栏 Biome 变红？点开看日志，多半是 biome.json 语法错
整理 import 不生效？确认 organizeImports.enabled: true，且 codeAction 配置了 source.organizeImports.biome
单仓库多个 biome.json？插件会按打开的工作区自动定位最近的一个

7.3 Zed

Zed 从 0.140+ 原生支持 Biome，不需要单独插件，只要项目根有 biome.json 就会自动启动 LSP。

~/.config/zed/settings.json

{
  "format_on_save": "on",
  "formatter": { "language_server": { "name": "biome" } },
  "code_actions_on_format": {
    "source.organizeImports.biome": true,
    "source.fixAll.biome": true
  }
}

7.4 JetBrains（WebStorm / IntelliJ）

安装官方插件 Biome（JetBrains Marketplace）：

Preferences → Languages & Frameworks → Biome
选择 Automatic Biome configuration（自动找 node_modules/.bin/biome）
勾选 Run format on save 与 Apply safe fixes on save
在 Prettier 设置页关闭 "On save"，避免两个 formatter 打架

7.5 Neovim / Helix

-- nvim-lspconfig
require('lspconfig').biome.setup({
  cmd = { 'biome', 'lsp-proxy' }
})

-- null-ls / conform.nvim 亦支持 biome formatter

Helix 0.mouse：

# languages.toml
[[language]]
name = "typescript"
formatter = { command = "biome", args = ["format", "--stdin-file-path=file.ts"] }
auto-format = true

7.6 与 Copilot/AI 助手共存

AI 生成的代码风格经常与项目不符——Biome 会在保存时把它们"同化"。推荐的工作流：

让 AI 写完代码粘贴
Ctrl+S（保存触发 source.fixAll.biome + format）
再看 diff——风格统一、import 也排好了

7.7 IDE 与 CI 行为一致性验证

偶尔会有"本地 IDE 没报错、CI 却挂"的问题。排查清单：

CI 用的 Biome 版本与 @biomejs/biome devDep 是否一致
IDE 插件是否指向了项目本地二进制（而不是全局安装的老版本）
是否漏提交了 biome.json 的最新修改
biome rage 命令能导出 IDE 当前 LSP 状态，用来报 issue 或自检

小结

Biome 的"IDE 体验"靠内置 LSP 实现——VSCode、Zed、JetBrains、Neovim 都只是不同客户端。配置三件套：默认 formatter、formatOnSave、codeActionsOnSave。做对这三条，团队里每个人的代码风格就都由 biome.json 唯一决定了。下一章把它塞进 CI。