将 JavaScript 项目从 Prettier 和 ESLint 迁移到 BiomeJS

Damilola Olatunji 发表于 2025 年 5 月 7 日

目录

• 什么是 Biome？
• 与 Prettier 的比较
• 与 JavaScript 的 ESLint 的比较
• Biome 入门
• 在代码编辑器中集成 Biome
• 为你的 JavaScript 项目配置 Biome
• 忽略 Linting 或格式化错误
• 在现有项目中集成 Biome
• 设置 Pre-commit Hook
• 设置持续集成工作流
• 你应该切换到 Biome 吗？
• 总结

分享这篇文章

你的应用出问题了吗？AppSignal 会通知你。 AppSignal 监控

长期以来，Prettier 和 ESLint 一直是 JavaScript 生态系统中不可或缺的工具，用于确保代码的一致性和质量。它们已成为全球 JavaScript 项目工具链中的必备品。

然而，一个新的参与者出现了，它挑战着它们的统治地位：BiomeJS。这个雄心勃勃的项目旨在将这两种工具的功能合并到一个单一的、高性能的解决方案中，用于代码格式化和 linting。

通过结合这些功能，Biome 旨在简化工作流程，减少配置复杂性，并显着提高性能，从而将自身定位为下一代 JavaScript 工具。

在本文中，我将介绍 BiomeJS 项目，探讨它的设置，并帮助你确定从 Prettier 和 ESLint 迁移是否适合你。

什么是 Biome？

BiomeJS 最初是已解散的 Rome project 的一个分支，但此后已发展成为其自身独特的工具链，专注于提供快速、集成的开发体验。

它目前为 JavaScript 开发人员提供两种解决方案：

1. 类似于 Prettier 的代码格式化工具。
2. 一个强大的 linter，其灵感来自 ESLint。

通过将这些工具组合成一个单一的解决方案，Biome 减少了对多个配置的需求，从而为开发人员创建了更无缝的体验。

它还采用现代架构构建，使用 Rust 来提高速度和多线程处理能力，使其比其前身快一个数量级以上。

这样，它不仅代表着一种替代方案，而且代表着简化和优化 JavaScript 开发工作流程的重大飞跃。

与 Prettier 的比较

与 Prettier 一样，Biome 的格式化工具仅提供少量的配置选项。 它的输出与 Prettier 大部分兼容 —— 尽管存在一些差异 —— 并且格式化速度大约快 25 倍，因为它使用多线程并且使用 Rust 编写。

虽然 Biome 支持多种语言，但就覆盖范围而言，它落后于 Prettier。 值得注意的是，HTML、Markdown 和 SCSS 尚未支持，而 Vue、Astro 和 Svelte 等框架仅具有部分支持。

与 JavaScript 的 ESLint 的比较

Biome 的许多 linting 规则都受到 ESLint 和其他流行的 linters 的启发，并组织成特定的类别。 与 ESLint 类似，这些规则是完全可配置的，允许你禁用任何规则或仅启用子集。

你可以自定义处理规则冲突的方式，选择它们是触发警告还是错误，以及是否应建议自动修复。 例如：

{
 "linter": {
  "rules": {
   "correctness": {
    "noUnusedVariables": {
     "level": "error",
     "fix": "none"
    }
   },
   "style": {
    "useConst": {
     "level": "warn",
     "fix": "unsafe"
    }
   }
  }
 }
}

除了 JavaScript/TypeScript 之外，Biome 的 linter 还支持其他语言。 它包括来自 stylelint-config-recommended 的多个 CSS linting 规则，并且还在开发中。 有关支持规则的完整列表，请参阅 Biome 文档。

在性能方面，Biome 比 ESLint 快 15 倍以上，这再次归功于其基于 Rust 的多线程架构。

Biome 入门

虽然 Biome 不是用 JavaScript 编写的，但它的可执行文件是通过 NPM registry 分发的，因此你可以通过你喜欢的包管理器轻松地安装它：

npm install --save-dev --save-exact @biomejs/biome

安装后，你可以通过运行以下命令访问 biome 可执行文件：

npx biome --version # Version: 1.9.2

Biome 不需要配置文件即可开始，允许你在安装后立即使用它。

为了演示，这里有一个你可以用来进行实验的 JavaScript 示例文件：

// index.js
function sayHello(name){if(name){console.log("Hello, "+name+"!");}else{console.log("Hello, World!");}}let person="John";sayHello(person);

使用 Biome 格式化

要格式化代码，你可以像这样使用 format 命令：

npx biome format index.js

默认情况下，format 命令以 dry-run 模式运行，在终端中显示建议的更改，其中未格式化的代码显示为红色，更正后的版本显示为绿色。

如果你对更改感到满意，请使用 --write 标志来应用它们：

npx biome format --write index.js

你将看到类似这样的确认消息：

Formatted 1 file in 840µs. Fixed 1 file

使用 Biome 进行 Linting

Biome 还可以使用 lint 命令来 lint 你的项目文件：

npx biome lint index.js

如果文件中有 linting 问题，你将看到以下输出：

Linting 问题分为三个级别：info、warn 和 error。 lint 命令以非零代码退出 error 级别的问题，但你可以使用 --error-on-warnings 标志类似地处理警告：

npx biome lint --error-on-warnings

linting 输出提供了有关为什么触发规则以及如何解决该问题的详细说明。

每个问题都标有文件名、行号、违反的规则以及该规则的易于理解的描述。 有问题的代码用红色标记突出显示，对于“可修复”的问题，建议的修复以绿色显示。

Biome 为 linting 问题提供两种类型的修复：

1. 安全修复，保证保留代码的语义。
2. 不安全修复，可能会更改程序的语义。

要仅应用安全修复，请按如下所示使用 --write 标志：

npx biome lint --write <path/to/files_or_dir>

对于不安全修复，请添加 --unsafe 标志：

npx biome lint --write --unsafe <path/to/files_or_dir>

结合格式化和 Linting

Biome 还允许你使用 check 命令一步格式化、lint 并应用修复：

npx biome check <path/to/files_or_dir>

npx biome check --write --unsafe <path/to/files_or_dir>

现在你已经熟悉了 Biome 的基本命令，让我们继续将其与你的文本编辑器集成。

在代码编辑器中集成 Biome

Biome 旨在与代码编辑器无缝集成，允许你在键入时接收 linting 反馈并在保存时自动格式化代码。

目前，为 VS Code、IntelliJ 和 Zed 提供了 第一方扩展。 你还可以探索用于 Vim、Sublime Text 和其他编辑器的 第三方扩展。 在本节中，我将使用 Visual Studio Code。

要在 Visual Studio Code 中使用 BiomeJS，请在扩展面板中搜索“Biome”，单击条目，然后点击 Install 按钮。

安装后，你将立即在支持的文件中看到突出显示的 linting 错误：

要在保存时自动应用建议的修复，让我们配置 VS Code 的“保存时操作”设置。 使用 CTRL+SHIFT+P（或 macOS 上的 CMD+SHIFT+P）打开命令面板，搜索“User Settings”，然后选择 Preferences: Open User Settings (JSON)：

在 settings.json 文件中，添加或更新以下配置：

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

此设置确保 Biome 在保存支持的文件时自动应用“安全”修复。 目前，该扩展不支持不安全修复，因此必须通过命令行或代码操作菜单应用这些修复：

Biome 还可以自动格式化你的代码。 要启用此功能，请使用以下内容更新你的 settings.json 文件：

{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "biomejs.biome"
}

editor.formatOnSave 选项启用保存时自动格式化，而 editor.defaultFormatter 将 Biome 指定为默认格式化程序。

如果你想为特定文件类型启用 Biome 格式化，请使用以下配置：

{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "prettier",
 "[javascript]": {
  "editor.defaultFormatter": "biomejs.biome"
 }
}

在此设置中，Prettier 用作所有文件类型的默认格式化程序，而 Biome 专门应用于 JavaScript 文件。

使用这些设置，Biome 将在每次保存文件时自动修复和格式化你的代码。

为你的 JavaScript 项目配置 Biome

你可以通过 CLI 选项或通过在项目的根目录中创建一个 biome.json 文件来配置 Biome。 Biome 将自动在当前目录和父目录中搜索此配置文件，直到文件系统根目录。

此功能在较大的项目或 monorepo 中特别有用，因为它允许根据文件夹结构使用特定于项目的设置。

创建 Biome 配置文件的最简单方法是使用 init 命令：

npx biome init

这将在你的当前目录中生成一个 biome.json 文件，其中包含默认设置，例如：

{
 "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
 "vcs": {
  "enabled": false,
  "clientKind": "git",
  "useIgnoreFile": false
 },
 "files": {
  "ignoreUnknown": false,
  "ignore": []
 },
 "formatter": {
  "enabled": true,
  "indentStyle": "tab"
 },
 "organizeImports": {
  "enabled": true
 },
 "linter": {
  "enabled": true,
  "rules": {
   "recommended": true
  }
 },
 "javascript": {
  "formatter": {
   "quoteStyle": "double"
  }
 }
}

如果你希望在你的配置中包含 带有注释的 JSON，请使用 --jsonc 标志来创建 biome.jsonc 文件：

npx biome init --jsonc

以下是默认设置的细分：

• Schema：确保与特定版本的 Biome 兼容。 你还可以将其指向相对路径：

{
 "$schema": "./node_modules/@biomejs/biome/configuration_schema.json"
}

• VCS：默认情况下，Biome 的 VCS 集成已关闭。
• Files：Biome 将处理你项目中的所有文件，并且不会忽略任何未知文件类型。
• Formatter：代码格式化已启用，并且制表符用于缩进。
• Organize Imports：自动导入排序和组织已启用。
• Linter：linting 已启用，使用 Biome 推荐的规则集。
• JavaScript：双引号用于 JavaScript 和 TypeScript 文件中的字符串。

你可以根据你的项目需求通过修改 biome.json 进一步自定义配置。 在 官方 Biome 文档 中探索支持的配置选项的完整列表。

从 Prettier 和 ESLint 迁移

如果你要从 Prettier 或 ESLint 过渡，则无需从头开始你的 Biome 配置。 Biome 提供了一个 migrate 命令，该命令读取你现有的配置文件并尝试将设置移植到 Biome：

biome migrate eslint --write
biome migrate prettier --write

有关更详细的说明和指南，请参阅 ESLint 和 Prettier 迁移指南。

忽略 Linting 或格式化错误

有时需要绕过特定代码行的 linting 或格式化规则。 使用 biome-ignore 注释，你只需要将注释放在你要排除的代码行之前。

要防止格式化某些行，请使用：

// biome-ignore format: <explanation>

例如：

// biome-ignore format: ignore this function
function sayHello(name){if(name){console.log("Hello, "+name+"!");}else{console.log("Hello, World!");}}

同样，你可以通过以下方式忽略 linting 规则：

// biome-ignore lint: <explanation>
// biome-ignore lint<rule>: <explanation>

例如：

// biome-ignore lint: lint/style/useConst: prefer let
let person = "John";
console.log(person);

要忽略整个文件，请在你的 biome.json 文件中配置 files.ignore、linter.ignore 或 formatter.ignore 设置：

{
 "files": {
  "include": ["src/**/*.js", "src/**/*.ts"],
  "ignore": ["**/*.min.js"]
 },
 "linter": {
  "ignore": ["**/dist/*"]
 },
 "formatter": {
  "ignore": ["bundle.js"]
 }
}

在现有项目中集成 Biome

将 Biome 添加到现有项目时，你可能希望在整个代码库中应用所有格式化和 linting 修复，并在单个提交中提交更改。 但是，如果这不切实际，你可以将格式化和 linting 限制为仅自上次提交以来所做的更改。

要启用此功能，你需要激活 Biome 的 VCS 集成并在你的配置中指定 vcs.defaultBranch 字段：

{
 "vcs": {
  "enabled": true,
  "clientKind": "git",
  "useIgnoreFile": true,
  "defaultBranch": "main"
 }
}

使用此配置，你可以使用 --changed 选项仅处理自上次提交以来修改的文件：

npx biome check --changed

这确保 Biome 仅检查你的版本控制系统识别为已更改的文件并应用修复。

设置 Pre-commit Hook

从 Biome v1.7.0 开始，你可以使用 --staged 选项专门处理暂存的文件，而无需像 lint-staged 这样的外部工具：

npx biome check --staged

要自动执行此操作，请将脚本添加到你的 package.json 文件：

{
 "scripts": {
  "lint:staged": "biome check --error-on-warnings --no-errors-on-unmatched --staged ./**/*.{js,ts}"
 }
}

接下来，设置 husky 以在提交更改之前运行 lint:staged 脚本：

# .husky/pre-commit
npm run lint:staged

有关更详细的示例和其他配方，请参阅 Biome 文档。

设置持续集成工作流

在每个 pull request 上运行 linting 和格式化检查有助于确保只有符合你项目标准的代码才能合并到你的代码库中。

你可以通过将 Biome 集成到你的持续集成 (CI) 管道中来自动执行此操作。 如果你使用的是 GitHub Actions，你可以按如下方式设置 官方 setup-biome action：

# .github/workflows/biome.yml
name: Code quality
on:
 pull_request:
jobs:
 biome:
  runs-on: ubuntu-latest
  steps:
   - name: Checkout
    uses: actions/checkout@v4
   - name: Setup Biome
    uses: biomejs/setup-biome@v2
    with:
     version: latest
   - name: Run Biome
    run: biome ci .

配置完成后，Biome 发现的任何问题都将以内联方式显示在 pull request 中，以防止新问题滑入。

你应该切换到 Biome 吗？

通过将 linting 和格式化整合到一个具有统一配置文件的依赖项中，Biome 提供了一种令人耳目一新的开发工具方法。 这降低了管理多个工具的复杂性，并允许团队快速上手，这得益于其强大的默认设置。

除了巨大的性能提升之外，Biome 的一个关键优势是其清晰、用户友好的错误消息传递，其中通常包括有关如何解决问题的指导。 与 ESLint 相比，这些错误消息更易于阅读，并帮助开发人员以更少的挫败感遵守编码标准。

但是，Biome 也有其局限性。 它对 JSON（或 JSONC）的依赖进行配置可能会让人感到限制，尤其是在动态设置中，在这种情况下，使用 JavaScript 会提供更大的灵活性。

切换到 Biome 还可能导致对 某些文件类型（例如 Vue、Markdown、YAML 等）的支持不如最佳，如果你大量使用这些格式，这可能会是一个缺点。

最终，切换的决定取决于你的项目需求。 如果 Biome 支持你最常用的文件，并且你重视改进的性能、简单性和统一的工具链，那么它肯定是一个有吸引力的替代方案。

你还可以通过将 Biome 用于其完全支持的文件类型，同时继续将 Prettier/ESLint 用于其余文件类型，直到 Biome 变得更加成熟，从而获得两全其美的效果。

总结

在这篇文章中，我们介绍了 Biome 的来龙去脉，将其与 Prettier 和 ESLint 进行了比较，并了解了如何配置 Biome 并将其集成到项目中。 我们还提到了它的一些局限性。

我希望这能让你更好地了解 Biome 以及你是否应该为你的下一个 JavaScript 项目选择它。

感谢阅读！

想知道接下来可以做什么？

读完这篇文章了吗？ 以下是你还可以做的一些事情：

• 订阅我们的 JavaScript Sorcery newsletter，永远不会错过任何文章。

• 开始使用 AppSignal 监控你的 JavaScript 应用程序。

• 在社交媒体上分享这篇文章

最受欢迎的 Javascript 文章

• Node.js 的前 5 个 HTTP 请求库让我们看看我们可以用于 Node.js 的 5 个主要 HTTP 库，并深入了解它们的优点和缺点。查看更多
• 何时使用 Bun 而不是 Node.jsBun 由于其出色的性能而越来越受欢迎。 让我们看看 Bun 何时是 Node.js 的更好替代方案。查看更多
• 如何在 Node.js 的 Express 中实现速率限制我们将探索速率限制的来龙去脉，并了解为什么你的 Node.js 应用程序需要它。查看更多

Damilola Olatunji

Damilola 是一位自由技术作家和软件开发人员，常驻尼日利亚拉各斯。 他专注于 JavaScript 和 Node.js，旨在为开发人员提供简洁实用的文章。 不写作或编码时，他喜欢阅读、玩游戏和旅行。 Damilola Olatunji 的所有文章 成为我们的下一位作者！ 了解更多

AppSignal 监控你的应用程序

AppSignal 为 Ruby、Rails、Elixir、Phoenix、Node.js、Express 和许多其他框架和库提供见解。 我们位于美丽的阿姆斯特丹。 我们喜欢 stroopwafels。 如果你也喜欢，请告诉我们。 我们可能会给你寄一些！ 探索 AppSignal

特性

• 错误跟踪
• 性能监控
• 主机监控
• 异常检测
• 正常运行时间监控
• 指标仪表板
• 工作流
• 日志管理
• 自动化仪表板
• Check-ins
• Time Detective

资源

• 计划和定价
• 文档
• 博客
• 客户案例
• 更新日志
• 学习中心
• 为什么选择 AppSignal

比较

• 对比 New Relic
• 对比 Datadog
• 对比 Sentry
• 对比 Scout APM
• 对比 Honeybadger

支持

你需要帮助、有功能要求或只是需要有人一起解决问题吗？ 与我们的一位工程师联系。

• 联系我们
• 在线聊天
• 状态
• 安全

关于我们

AppSignal 位于美丽的荷兰。 我们喜欢 stroopwafels。 如果你也喜欢，请告诉我们。 我们可能会给你寄一些！

• 关于
• [职位](https://