Biome：更快的格式化和 Linting
网络项目的高效工具链
大家好，今天要介绍一个超棒的工具链——Biome，它是为网络项目量身打造的，旨在为开发者提供维护项目健康的工具。
Biome 是一个速度极快的代码格式化工具，支持 JavaScript、TypeScript、JSX 和 JSON。它与 Prettier 的兼容性高达 97%，这意味着如果你习惯了 Prettier，那么切换到 Biome 会非常顺滑。
Biome 还是一个性能出色的 linter 工具，支持 JavaScript、TypeScript 和 JSX，提供了超过 200 条规则，这些规则来自 ESLint、typescript-eslint 以及其他来源。它输出的诊断信息详细且具有上下文，帮助你提升代码质量，成为一个更优秀的程序员！
Biome 从一开始就被设计为在编辑器中交互式使用。当你在编写代码时，它可以即时格式化和 lint 那些写得乱七八糟的代码。
安装
想要安装 Biome？非常简单，只需要在你的项目中运行：
npm install --save-dev --save-exact @biomejs/biome
使用方法
格式化文件：
npx @biomejs/biome format --write ./src
lint 检查文件：
npx @biomejs/biome lint ./src
运行格式化、lint 等，并将安全的提议应用到代码中：
npx @biomejs/biome check --apply ./src
在 CI 环境中检查所有文件是否符合格式化、lint 等要求：
npx @biomejs/biome ci ./src
如果你不想安装 Biome，也可以使用它的 在线游乐场[1]，它被编译成了 WebAssembly 格式。
文档和更多信息
想了解更多关于 Biome 的信息？请访问 主页[2]，或者直接查看 入门指南[3] 开始使用 Biome。
Biome 的更多亮点
- Biome 默认设置很合理，不需要额外配置。
- Biome 旨在支持现代网络开发的所有主要语言。
- Biome 运行不依赖 Node.js。
- Biome 提供了一流的 LSP（语言服务器协议）支持，拥有一个复杂的解析器，能够以完全保真的方式表示源文本，并具有一流的错误恢复能力。
- Biome 将以前是独立工具的功能统一起来。在共享基础上构建，让我们能够为处理代码、显示错误、并行工作、缓存和配置提供一致的体验。
Biome v1.7 版本发布
Biome v1.7 版本正式和大家见面了！这个新版本不仅让从 ESLint 和 Prettier 迁移变得更简单，还带来了实验性的机器可读报告、新的 linter 规则，以及许多修复。
更新 Biome 的步骤
想要尝鲜的朋友，可以通过以下命令更新你的 Biome：
npm install --save-dev --save-exact @biomejs/biome@latest
npx @biomejs/biome migrate
从 ESLint 迁移，一键搞定
这次更新，带来了一个新命令 biome migrate eslint。这个命令会读取你的 ESLint 配置，并尝试将设置迁移到 Biome 中。
无论是传统的还是扁平化的配置文件，这个命令都能搞定。它支持传统配置的 extends 字段，并能加载共享和插件配置。此外，它还会迁移 .eslintignore 文件。
举个例子，假设你有如下的 ESLint 配置：
{
"extends": ["plugin:unicorn/recommended"],
"plugins": ["unicorn"],
"ignore_patterns": ["dist/**"],
"globals": {
"Global1": "readonly"
},
"rules": {
"eqeqeq": "error"
},
"overrides": [
{
"files": ["tests/**"],
"rules": {
"eqeqeq": "off"
}
}
]
}
以及如下的 Biome 配置：
{
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
只需运行 biome migrate eslint --write，你的 ESLint 配置就能迁移到 Biome 了。这个命令会覆盖你最初的 Biome 配置。比如，它会禁用 recommended。最终你会得到如下的 Biome 配置：
{
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": false,
"complexity": {
"noForEach": "error",
"noStaticOnlyClass": "error",
"noUselessSwitchCase": "error",
"useFlatMap": "error"
},
"style": {
"noNegationElse": "off",
"useForOf": "error",
"useNodejsImportProtocol": "error",
"useNumberNamespace": "error"
},
"suspicious": {
"noDoubleEquals": "error",
"noThenProperty": "error",
"useIsArray": "error"
}
}
},
"javascript": {
"globals": ["Global1"]
},
"overrides": [
{
"include": ["tests/**"],
"linter": {
"rules": {
"suspicious": {
"noDoubleEquals": "off"
}
}
}
}
]
}
这个命令需要 Node.js 来加载和解析 ESLint 配置文件中配置的插件和 extends。目前，biome migrate eslint 还不支持 YAML 格式的配置。有一个专门的页面[4]列出了给定 ESLint 规则的等效 Biome 规则。处理了一些 ESLint 插件，比如 TypeScript ESLint[5]、ESLint JSX A11y[6]、ESLint React[7] 和 ESLint Unicorn[8]。一些规则与它们的 ESLint 对应物相同，而其他一些则是受启发的。默认情况下，Biome 不会迁移受启发的规则。你可以使用 CLI 标志 --include-inspired 来迁移它们。
从 Prettier 迁移，也是一键搞定
Biome v1.6 引入了 `biome migrate prettier` 命令[9]。
在 Biome v1.7 中，增加了对 Prettier 的 overrides 支持，并尝试将 .prettierignore 的全局模式转换为 Biome 支持的模式。
在迁移过程中，Prettier 的 overrides 被转换成了 Biome 的 `overrides`[10]。假设你有如下的 .prettierrc.json：
{
"useTabs": false,
"singleQuote": true,
"overrides": [
{
"files": ["*.json"],
"options": {
"tabWidth": 2
}
}
]
}
运行 biome migrate prettier --write 将你的 Prettier 配置迁移到 Biome。这将得到如下的 Biome 配置：
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto"
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingComma": "all",
"semicolons": "asNeeded",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto"
}
},
"overrides": [
{
"include": ["*.json"],
"formatter": {
"indentWidth": 2
}
}
]
}
这个命令需要 Node.js 来加载 JavaScript 配置，如 .prettierrc.js。biome migrate prettier 不支持 JSON5、TOML 或 YAML 格式的配置。
发出机器可读的报告
Biome 现在能够输出 JSON 报告，详细列出命令发出的诊断信息。
例如，你可以在代码库进行 linter 检查时发出报告：
biome lint --reporter=json-pretty .
目前，支持两种报告格式：json 和 json-pretty。
请注意，报告格式是 实验性的，未来可能会有所变化。
检查 git 暂存的文件
Biome v1.5 添加了 --changed 选项，用于格式化和 linter 检查已经更改的 git 跟踪文件。
今天，引入了一个新的选项 --staged，它允许你只检查添加到 Git 索引（即暂存的文件）中的文件。这对于确保你想要提交的文件已经格式化和 linter 检查非常有用：
这个功能非常适合用来编写你自己的 pre-commit 脚本[11]。请注意，对于暂存文件上的未暂存更改 不会被忽略。因此，仍然推荐使用一个 专门的 pre-commit 工具[12]。
总结
总的来说，Biome以其强大的功能、灵活的配置和用户友好的设计，正逐渐成为网络开发者不可或缺的工具之一，引领着代码质量和开发效率的双重提升。大家快去试试吧。
参考链接：
- https://biomejs.dev/blog/biome-v1-7/
- https://github.com/biomejs/biome
Reference
[1]
在线游乐场: https://biomejs.dev/playground/
[2]
主页: https://biomejs.dev/
[3]
入门指南: https://biomejs.dev/guides/getting-started/
[4]
专门的页面: https://biomejs.dev/linter/rules-sources/
[5]
TypeScript ESLint: https://typescript-eslint.io/
[6]
ESLint JSX A11y: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
[7]
ESLint React: https://github.com/jsx-eslint/eslint-plugin-react
[8]
ESLint Unicorn: https://github.com/sindresorhus/eslint-plugin-unicorn
[9]
Biome v1.6 引入了 biome migrate prettier 命令: https://biomejs.dev/blog/biome-v1-6/#easier-migration-from-prettier
[10]
Biome 的 overrides: https://biomejs.dev/reference/configuration/#overrides
[11]
pre-commit 脚本: https://biomejs.dev/recipes/git-hooks/#shell-script
[12]
专门的 pre-commit 工具: https://biomejs.dev/recipes/git-hooks/