网络项目的高效工具链
大家好,今天要介绍一个超棒的工具链——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,也可以使用它的 在线游乐场,它被编译成了 WebAssembly 格式。
文档和更多信息
想了解更多关于 Biome 的信息?请访问 主页,或者直接查看 入门指南 开始使用 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 格式的配置。有一个专门的页面列出了给定 ESLint 规则的等效 Biome 规则。处理了一些 ESLint 插件,比如 TypeScript ESLint、ESLint JSX A11y、ESLint React 和 ESLint Unicorn。一些规则与它们的 ESLint 对应物相同,而其他一些则是受启发的。默认情况下,Biome 不会迁移受启发的规则。你可以使用 CLI 标志 --include-inspired
来迁移它们。
从 Prettier 迁移,也是一键搞定
Biome v1.6 引入了 biome migrate prettier
命令。
在 Biome v1.7 中,增加了对 Prettier 的 overrides
支持,并尝试将 .prettierignore
的全局模式转换为 Biome 支持的模式。
在迁移过程中,Prettier 的 overrides
被转换成了 Biome 的 overrides
。假设你有如下的 .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 脚本。请注意,对于暂存文件上的未暂存更改 不会被忽略。因此,仍然推荐使用一个 专门的 pre-commit 工具。
总结
总的来说,Biome以其强大的功能、灵活的配置和用户友好的设计,正逐渐成为网络开发者不可或缺的工具之一,引领着代码质量和开发效率的双重提升。大家快去试试吧。
参考链接: