前言
作为一个前端开发,我相信大家对 eslint 一定不陌生。实际业务开发中我们经常需要使用 eslint 帮助我们统一团队代码风格、及时发现潜在语法错误和不规范用法以及规范最佳实践等。在代码 commit 阶段,eslint 就已经开始介入帮助我们规范代码。
随着前端项目规模的不断扩大,团队协作开发已成为常态。不同开发者的编码习惯、风格差异会导致代码风格不统一、潜在 bug 难以及维护成本上升。如果没有 lint 工具,这些问题将很难解决。
但是,使用 ESLint 维护过中大型项目的研发人员,一定都有过这样的痛苦经历:
一鼓作气地写完一段代码,调试完成,满怀期待地准备提交。然而,刚敲完 commit 命令,却发现控制台仿佛陷入了无尽的沉睡,一直在转圈圈。仔细一看,原来是 ESLint 卡住了,研发体验瞬间从巅峰跌入谷底。在现实中,这样 ESLint 速度慢影响研发效率的场景屡见不鲜,前端开发者们对 ESLint 可以说是又爱又恨。
不过,现在一款新工具的出现,犹如一道曙光,可能帮助我们彻底摆脱 ESLint 的困境。
Biome:更快的前端 lint 工具
Biome 的诞生源于前端社区对高性能、低维护成本代码质量工具的强烈需求。它最初由 Rome 团队孵化,后独立发展,核心目标是用 Rust 语言重写前端工具链,解决 JavaScript 生态下 lint、格式化等工具的性能瓶颈和依赖复杂问题。
Biome 最早是 Rome 项目的一部分,Rome 致力于打造一体化的前端开发工具链。随着社区需求的聚焦,Biome 独立出来,专注于 lint、格式化等代码质量领域。
Biome 采用 Rust 编写,天然具备高性能和内存安全优势,极大提升了 lint 和格式化的速度。
既然 Biome 号称是高性能的 lint 根据,那么它和 eslint 对比,到底快了多少呢。
Biome 的主要性能优势:
根据官方和社区的 benchmark 数据:
- 全量 lint 检查:
- ESLint 检查 1000 个文件,耗时约 60-120 秒
- Biome 检查 1000 个文件,耗时仅 3-8 秒
- 格式化速度:Biome 内置格式化能力,速度远超 Prettier
- 资源占用:Biome 运行时内存占用更低,适合 CI/CD 场景下大规模并发 lint
- 本地开发体验:Biome 支持编辑器实时 lint,几乎无感延迟,极大提升开发流畅度
以实际体验为例,原本需要等待几十秒甚至数分钟的 lint 检查,在 Biome 下几秒即可完成。对于大型项目、多人协作、频繁提交的场景,Biome 的性能优势尤为明显。
在大型项目中,Biome 的执行时间可以比 ESLint 和 Prettier 组合缩短约 30%-50%。
快速上手
接下来我们来看看 Biome 具体是怎么使用的。
安装 Biome
Biome 提供了多种安装方式,这里以 npm 为例:
npm install --save-dev @biomejs/biome
初始化配置
npx biome init
会生成 .biome.json
配置文件。
运行 Lint 和格式化
npx biome lint src
npx biome format src --write
编辑器集成
Biome 支持 VSCode 插件,安装 Biome VSCode 插件 后即可获得实时提示和自动修复。
现在,我们就可以愉快的使用 Biome 了。
如何配置规则
和 ESlint 类似,Biome 也支持在 json 文件中配置 lint 规则。
在 .biome.json
配置文件中,可以通过如下方式启用或自定义规则:
{
"linter": {
"rules": {
"style.indent": "error",
"suspicious.noExplicitAny": "warn",
"typescript.noImplicitAny": "error"
}
}
}
尽管都支持 json 格式配置,但是两者在配置方式、规则命名、环境差异化等方面还是存在一些显著不同(毕竟是两款工具):
1. 配置文件格式
- ESLint 支持多种格式(.eslintrc.js、.eslintrc.json、.eslintrc.yml 等),可以用 JS 动态生成配置。
- Biome 目前主要采用
.biome.json
或.biome.jsonc
(支持注释),不支持 JS 动态配置,配置更为静态和简洁。
2. 规则命名方式
- ESLint 规则多为
kebab-case
,如no-unused-vars
。 - Biome 规则采用
camelCase
,如noUnusedVars
,并且规则分组更细致(如style.indent
、suspicious.noExplicitAny
)。
3. 预发/环境差异化配置
- ESLint 可以通过
overrides
、env
字段,或 JS 配置文件动态判断环境,实现不同目录、文件、环境下的规则差异化。 - Biome 目前支持
overrides
字段,可以针对不同文件类型、路径进行规则覆盖,但不支持 JS 动态逻辑。环境变量相关的差异化需通过多份配置文件或 CI 脚本切换实现。
Biome 配置差异化示例:
{
"linter": {
"rules": {
"suspicious.noConsole": "off"
}
},
"overrides": [
{
"files": ["src/**/*.ts"],
"linter": {
"rules": {
"suspicious.noConsole": "error"
}
}
}
]
}
如需在预发、生产等不同环境下使用不同规则,建议在 CI/CD 脚本中切换不同的 .biome.json
配置,或通过 overrides
针对特定目录/文件做差异化处理。
更多差异和高级用法可参考 Biome 配置文档。
推荐规则
Biome 内置了丰富的规则体系,涵盖代码风格、最佳实践、类型安全等多个方面。以下是一些常用且推荐启用的规则类别:
- 代码风格
style.indent
:统一缩进风格style.semicolons
:强制分号使用style.trailingComma
:尾随逗号规范
- 最佳实践
suspicious.noExplicitAny
:禁止显式 any 类型suspicious.noVar
:禁止使用 var 声明变量suspicious.noConsole
:禁止生产环境下使用 console
- 类型安全
typescript.noImplicitAny
:禁止隐式 anytypescript.strictNullChecks
:严格空值检查
- React 相关
react/jsx-no-undef
:JSX 组件未定义检测react/jsx-boolean-value
:布尔属性显式赋值
eslint 迁移 Biome
既然 eslint 这么强大,那么我想在现有的项目中使用,可以做到平滑迁移吗?
当然可以。
由于现有存量业务中存在着庞大的 ESLint+Prettier 组合的项目,Biome 官方提供专用命令来简化从 ESLint 和 Prettier 的迁移。
如果你不想知道详细信息,只需运行以下命令就可以完成迁移。
biome migrate eslint --write
biome migrate prettier --write
想要知道更多的细节,也可以去官网了解。
关于兼容性问题
当然,需要注意的是,Biome 目前并不能 100% 兼容 ESLint 的所有规则(大概可能 95%左右)。
- Biome 支持大部分主流的 JavaScript/TypeScript 语法检查和格式化规则,但对于一些高度定制化的 ESLint 规则、社区插件(如部分 React/Angular/Vue 相关插件)、自定义规则等,Biome 目前还不完全支持。
- Biome 的规则体系与 ESLint 有所不同,部分规则名称、配置方式、细节实现存在差异(Biome 使用 camelCaseRuleName,而 ESLint 使用 kebab-case-rule-name)。
- 某些 ESLint 的生态插件(如复杂的 import 规则、部分安全性/最佳实践插件)暂时无法直接迁移到 Biome。
迁移建议
- 对于依赖大量自定义规则或特殊插件的项目,建议分阶段迁移,可先将主流规则迁移到 Biome,保留部分 ESLint 配置作为补充,逐步适配。
- 关注 Biome 官方和社区的规则支持进展,后续会有更多规则和插件被支持。
- 迁移前可通过
biome check
等命令评估当前项目的兼容性。
总之,Biome 目前已能满足绝大多数主流前端项目的 lint 和格式化需求,但对于极端依赖 ESLint 生态的项目,迁移时需做好兼容性评估和测试。
注意事项
从 ESLint+Prettier 组合迁移到 Biome 之后,由于有些内置规则的不一致(具体的可以去官网了解:biome.nodejs.cn/formatter/d… code review 带来一些麻烦。
这里我们推荐迁移完成之后可以先统一执行一次 lint 来解决这个问题。
Biome 与 ESLint 能力对比
能力 | ESLint | Biome |
---|---|---|
语法检查 | ✅(JS/TS) | ✅(JS/TS/JSON/CSS 等) |
代码格式化 | ❌(需配合 Prettier) | ✅(内置) |
自动修复 | 部分支持 | ✅(内置) |
性能 | 一般 | 极快 |
配置复杂度 | 较高 | 低 |
插件生态 | 丰富 | 起步阶段 |
编辑器支持 | 完善 | 完善 |
依赖 | Node.js 及插件 | 单一二进制/包 |
5. 总结
ESLint 作为前端领域的事实标准,帮助我们极大提升了代码质量和团队协作效率。但随着项目规模和团队人数的增长,ESLint 的性能瓶颈和生态复杂度问题日益突出。
Biome 作为新一代前端代码质量工具,凭借 Rust 带来的极致性能、一体化的能力和较低的维护成本,正在成为 ESLint 的有力替代者。对于大型项目、追求极致研发体验的团队,Biome 值得重点关注和尝试。
未来,随着 Biome 社区和生态的不断完善,相信会有越来越多的团队选择 Biome 作为主力 lint 工具。
因为它是真的快啊。