多年来,Prettier 凭借其强大的功能,在开发者中赢得了广泛的赞誉,成为了格式化 JavaScript、TypeScript、JSON 等多种代码的首选工具。然而,随着前端项目的日益庞大和复杂,Prettier 在性能上的不足逐渐凸显。幸运的是,一款新兴的开源 Web 开发工具链出现了—— Biome ,它融合了更高效的格式器和代码检查器,成功解决了性能瓶颈。
Biome 以 Rust 为基石,充分利用了 Rust 语言的速度和效率优势,从而在性能上实现了对 Prettier 的显著超越。值得一提的是,在最近一场由 Prettier 创始人发起的挑战赛中,Biome 团队使用 Rust 成功重构了 Prettier,充分展现了其在代码优化和性能提升方面的能力。
作为一款集成了代码检查器和格式器的全能工具,Biome 堪称基于 Rust 的 ESLint 与 Prettier 的完美结合。它为开发者提供了极致的便捷与高效,让代码开发变得更加轻松、流畅。
Biome 是一款集代码分析、格式化和检查于一体的强大工具,具有来自 ESLint、TypeScript ESLint 和其他来源的 190 多个规则,格式化程序现在与 Prettier 的兼容性超过 96%。只需一个简单的check
命令,就能轻松完成代码的检查与格式化,无需在多个工具之间切换。
npx @biomejs/biome check --apply
Biome 的代码检查器相较于 Prettier 更为前瞻,它能够及早发现并处理问题,从而有效避免了后续可能出现的严重问题。Biome 能够迅速识别出多种潜在问题,例如未使用的变量、括号位置错误等,使得我们能够以更高的效率解决这些问题,进而让代码更加清晰有条理。
complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ The call chain .map().flat() can be replaced with a single .flatMap() call. 1 │ const array = ["split", "the text", "into words"]; > 2 │ array.map(sentence => sentence.split(' ')).flat(); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 3 │ ℹ Safe fix: Replace the chain with .flatMap(). 1 1 │ const array = ["split", "the text", "into words"]; 2 │ - array.map(sentence·=>·sentence.split('·')).flat(); 2 │ + array.flatMap(sentence·=>·sentence.split('·')); 3 3 │
在当今的 Web 开发领域,对 HTML 进行无障碍检查已变得越来越重要。Biome 在这方面表现出色,它能够准确地识别出可访问性问题,并提供简明扼要的错误提示以及相应的解决方案。下面来看两个例子。
Biome 精确地指出了在div元素中需要修复的问题。在上面的例子中,当发现role="slider"的不当使用时,Biome 清晰地指明了应如何修正。
对于上面的例子,Biome 提供了修复的解决方案。这使得在开发过程中更容易识别和解决问题。
Biome 建立了一个专门的存储库,用于执行与 Prettier 和 parallel-prettier 的对比基准测试。这些基准测试聚焦于不同规模和复杂度的 JavaScript 及 TypeScript 文件的格式化过程,以全面评估 Biome 的性能表现。
测试结果:
显然,Biome 在格式化和 linting 方面的性能均显著优于 Prettier 和 Eslint。
注意:
- 基于 MacBook Pro (13-inch, M1, 2020) 进行测试。
- 多线程基准测试的速度提升可能因硬件配置和使用环境的不同而有显著变化。例如,在配备 10 个内核的 M1 Max 芯片上,Biome 的速度甚至可以比 Prettier 快 100 倍。
尽管 Biome 以其出色的速度崭露头角,但作为一个早期开发阶段的项目,它在某些方面仍存在局限。
比如,Biome 在类型检查 lint 规则方面的覆盖不如 ESLint 全面。基于 Rust 的 linter 能够快速识别语法错误和常见样式问题,但在涉及依赖类型信息的问题时,它可能会力不从心。相比之下,ESLint 与 typescript-eslint 的结合提供了更强大的类型检查功能。
截至 2024 年 1 月,Biome 已经集成了 64 条 typescript-eslint 规则,但这仍然只是整个 typescript-eslint 规则集的一部分。例如,与 typescript-eslint 相比:
还有一些 Biome 当前尚未包含的规则,但值得注意的是,Biome 仍在积极开发中,并且其规则库也在不断扩展中。
在选择工具时,应该基于项目的具体需求进行权衡。如果对性能有严格要求,并且愿意在 typescript-eslint 规则方面做出一些妥协,那么 Biome 可能是一个值得考虑的选择。然而,如果项目需要全面的类型检查功能,那么继续使用 Prettier 和 ESLint 可能是更稳妥的选择,同时可以密切关注 Biome 的后续发展,以便在将来做出更合适的选择。
与此同时,Prettier 也在不断优化其性能。未来,Prettier 有望通过改进解析引擎、AST(抽象语法树)表示、空白处理以及利用硬件加速技术等方式,实现显著的速度提升。因此,如果对 Prettier 的表现感到满意,继续沿用它可能是一个不错的选择。
随着 Biome 的不断更新和完善,它在优化 Web 应用开发方面展现出了巨大的潜力。其卓越的性能表现、出色的兼容性以及以用户体验为核心的易用性设计,为开发者提供了一个极具吸引力的解决方案。展望未来,我坚信 Biome 将有望在 Web 开发领域确立其作为标准工具链的重要地位。
本文链接:http://www.28at.com/showinfo-26-65872-0.htmlPrettier + ESLint + Rust = ?? 快,真是太快了!
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com