Biome 与 Prettier 兼容性挑战报告深度解读96% 相似度的背后【免费下载链接】biomeA toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.项目地址: https://gitcode.com/gh_mirrors/bi/biome导读本文基于 Biome 仓库中的 report-challenge.md 及其两份配套兼容性报告 report-es2015.md、report-es2024.md系统解读 Biome 参与 Prettier 兼容性挑战Prettier Challenge的评测口径、测试用例取舍、选项支持范围与底层测试基础设施。读完本文你将理解这两份报告里的兼容性百分比是如何计算出来的、哪些语法被排除在评测之外及其原因以及 Biome 如何借助自动化测试基础设施.prettier-snap快照对比、非严格模式标记、范围格式化占位符等持续对齐 Prettier 的输出。挑战背景为什么会有这两份报告report-challenge.md是 Biome 面向 Prettier 兼容性挑战algora.io 上发起的 Prettier Challenge提交的说明文档。该挑战要求参赛格式化工具尽可能在输出上与 Prettier 保持一致Biome 为此提供了两份口径不同的兼容性报告报告文件评测范围report-es2015.md仅统计 ES2015 语法report-es2024.md统计 ES2024 语法以及被广泛支持的实验性语法decorators、import assertions、import attributes、explicit resource management 等两份报告的核心差异在于语法覆盖范围而非格式化质量本身report-es2015刻意排除了 ES2016 的标准语法用于衡量「在纯 ES2015 代码库上」的兼容度report-es2024则面向更接近当前 JavaScript 生态的真实代码形态纳入 ES2024 及广泛使用的实验性语法。总体指标兼容性如何量化两份报告开头都给出了两个总体指标并附带了严格的数学定义平均兼容性Average compatibility$$average \frac{\sum_{file}^{files}compatibility_{file}}{files}$$即对每个测试文件计算 Prettier Similarity相似度百分比再对所有文件取算术平均。兼容行Compatible lines$$average \frac{\sum_{file}^{files}matching_lines_{file}}{max(lines_{rome}, lines_{prettier})}$$即所有文件中「匹配行数」之和除以「Biome 输出行数与 Prettier 输出行数中的较大者」。这一指标以行粒度衡量输出一致性能避免少数文件的行数差异掩盖整体水平。两报告的实际数值report-es2015.md4530 行平均兼容性 96.70兼容行 97.28report-es2024.md5490 行平均兼容性 96.75兼容行 97.32。两份报告主体均按测试文件逐条列出Prettier Similarity百分比对未达到 100% 的文件附上 unified diff直观展示 Biome 输出与 Prettier 输出的差异点。有代表性的低分用例js/assignment/issue-15534.jsSimilarity 18.18%。差异集中在计算属性访问params[redirectTo]这类成员表达式在赋值左侧的换行策略上Biome 与 Prettier 对括号位置的处理不同js/arrows/newline-before-arrow/newline-before-arrow.jsSimilarity 0.00%仅出现在 report-es2024.md 中。该文件在 ES2024 口径下被纳入评测Biome 的解析阶段对async (x) x;换行后的处理与 Prettier 出现整体性差异js/arrays/numbers-with-tricky-comments.jsSimilarity 54.55%差异围绕注释/*block*/、// line后的数字字面量分组换行策略。这些 diff 块是定位格式化差异的第一手材料也是 Biome 后续迭代修复格式化的回归测试输入。如何亲测Playground 与 Nightly 版本报告文档给出了两种直接验证方式在线 Playground将任意代码粘贴到 Biome 的在线 Playground 中格式化与 Prettier 输出逐行对比安装 nightly 版本报告撰写时对应1.3.3-nightly.ced82danpm install -D biomejs/biome1.3.3-nightly.ced82da由于这些报告记录的是特定时间点的快照若要复现当时的评测环境应使用文档标注的 nightly 版本当前仓库的格式化逻辑biome_js_formatter已经在此基础上持续演进使用最新稳定版实测结果可能与报告数值存在差异。测试用例说明忽略、非严格、不稳定与刻意差异report-challenge.md的「Test case notes」章节是理解报告口径的关键。它把 Prettier 官方测试套件中的用例分成了四类处理方式。忽略的测试用例两份报告共同忽略1. JSX 相关13 个如js/binary-expressions/inline-jsx.js、js/call/first-argument-expansion/jsx.js、js/comments/jsx.js、js/trailing-comma/jsx.js、js/unicode/nbsp-jsx.js等。报告并未解释具体原因但从源码测试入口 prettier_tests.rs 可以看到Biome 的 Prettier 测试套件本身已将.js文件按 JSX 源码类型JsFileSource::jsx()处理说明忽略这些用例并非因为无法解析 JSX而是这些用例聚焦 JSX 格式化细节与评测目标无关。2. 模板字面量中的嵌入式语言格式化13 个目录/文件js/multiparser-comments/、js/multiparser-css/、js/multiparser-graphql/、js/multiparser-html/、js/multiparser-markdown/、js/multiparser-text/、js/template-literals/css-prop.js、js/template-literals/styled-jsx.js等。Prettier 能在模板字面量内识别 CSS、GraphQL、HTML、Markdown 并递归格式化而 Biome 挑战报告聚焦 JavaScript 语法本身故排除这类跨语言场景报告文档中该列表embed.js出现两次系原文笔误不影响结论。3. 非标准与实验性语法包括 V8 内部函数js/v8_intrinsic、Babel 插件语法js/babel-plugins/、async do 表达式js/async-do-expressions/、do 表达式js/do/、export X from modjs/export-default/export-default-from/等、module id {}模块块js/module-blocks等、元组/记录语法#[]与#{}js/tuple、js/record等 8 个用例、管道运算符|js/comments-pipeline-own-line、js/partial-application、js/pipeline-operator、绑定运算符::js/arrows-bind/、js/bind-expressions/等、私有字段解构js/destructuring-private-fields/、延迟导入求值js/deferred-import-evaluation/、source phase importsjs/source-phase-imports/、import reflectionjs/import-reflection/。这些语法要么尚未标准化、要么处于 Stage 早期Biome 解析器不保证支持因此被排除在评测之外。ES2015 报告额外忽略的用例report-challenge.md 特别说明report-es2015在共同忽略列表之上还排除了以下两类广泛使用的实验性语法Decoratorsjs/decorators、js/decorator-auto-accessors/、js/decorators-export/等、js/import-assertions/、js/import-attributes/、js/explicit-resource-management。这些语法在 TypeScript/React 生态中已被大量使用但并非 ES2015 标准故从 ES2015 口径中排除却被纳入 ES2024 口径。标准 ES2016 语法完整列表见原文此处列举代表指数运算符**js/async/exponentiation.js、js/binary-expressions/exp.js、async/awaitjs/async/、js/arrows/newline-before-arrow/newline-before-arrow.js等 9 个用例、函数调用尾逗号js/trailing-comma/function-calls.js等、对象展开与剩余{ ...x }js/spread、js/destructuring/等 8 个用例、for awaitjs/for-await/、私有类字段#fieldjs/classes-private-fields等、可省略 catch 绑定try {} catch {}js/optional-catch-binding、空值合并a ?? bjs/nullish-coalescing等、可选链prop?.js/optional-chaining/等 3 个用例、BigIntjs/big-int/等、数字分隔符1_000js/literal-numeric-separator/等、逻辑赋值??/js/logical-assignment/、私有品牌检查#field injs/private-in、私有方法、类实例字段、静态块static {}js/class-static-block/、顶层awaitjs/top-level-await/、regexd/vflagjs/regex/d-flag.js、js/regex/v-flag.js、Shebang#!/usr/bin/nodejs/shebang/。非严格模式测试用例以下测试用例在非严格 JavaScript 模式sloppy mode / script mode下处理js/with/js/sloppy-mode/js/identifier/with语句、部分标识符解析仅在 sloppy 模式下合法。这一处理在测试基础设施中有直接实现prettier_tests.rs 中的is_non_strict_mode函数会检查文件路径前缀是否命中这三个目录命中则调用source_type.with_module_kind(ModuleKind::Script)切换到脚本非模块解析模式。不稳定测试用例以稳定后的输出为准报告指出Prettier 对部分用例连续格式化两次结果不同格式化不稳定。Biome 的测试基础设施会捕获这类问题CheckReformat二次格式化校验见下文源码分析Biome 选择匹配「稳定化后的版本」即对输入多次运行 Prettier 后得到的最终稳定输出文档说明实际上运行第二次即可稳定。受影响的用例共 9 个js/sequence-expression/parenthesized.jsjs/comments/tagged-template-literal.jsjs/comments/return-statement.jsjs/last-argument-expansion/embed.jsjs/for/continue-and-break-comment-without-blocks.jsjs/class-comment/misc.jsjs/range/boundary.jsjs/range/class-declaration.jsjs/range/multiple-statements2.js这意味着当 Biome 输出与 Prettier 的「第一次输出」不同、但与「第二次输出」一致时该用例仍被判定为兼容。有意的格式化差异部分差异是刻意保留的要么因为 Biome 解析阶段的严格性解析出的 AST 本身不允许 Prettier 那样的输出形态要么是 Biome 认为保持现状可读性更好。报告指向了对应的 issue 以查看这些用例的详细描述本文不再赘述但需明确报告中的兼容性百分比是「实际差异」而非「目标差异」这 9 个不稳定用例与刻意差异用例共同构成了兼容性 100% 之外的合理缺口。选项支持quoteProps 的刻意取舍报告「Option support」章节声明Biome 实现了 Prettier 提供的全部 JavaScript 格式化选项。唯一例外是quoteProps与 Prettier 不同Biome 只为quoteProps提供as-needed和preserve两个值不提供consistent这是刻意选择。这一声明在源码中得到验证context.rs 中QuoteProperties枚举只有两个变体且FromStr实现只接受as-needed与preserve两个字符串context.rs传入其他值会得到Value not supported for QuoteProperties错误。此外格式化的通用选项缩进风格、缩进宽度、行宽、行尾、尾随换行等在 biome_formatter_test 的测试基建中均会透传给真实 workspace 配置说明测试环境与用户实际 CLI/LSP 配置路径一致。源码级验证测试基础设施如何产出这些报告理解报告的生成机制有助于判断其可信度与复现方式。测试入口与用例发现prettier_tests.rs 通过tests_macros::gen_tests!宏扫描tests/specs/prettier/{js,typescript,jsx}/**/*.{js,ts,jsx,tsx}下的全部 Prettier 官方用例每个文件生成一个测试。测试中.js文件统一按 JSX 源码类型解析Prettier 测试套件常在.js中混用 JSX文件名含jsx的.ts文件按 TSX 解析命中非严格模式目录的文件切换为ModuleKind::Script另有is_restricted_typescript将三个特定 TypeScript 文件切换为StandardRestricted变体对应 Prettier 对const类型参数等语法的受限解析。快照对比与 diff 生成核心逻辑在 test_prettier_snapshot.rs占位符剥离strip_prettier_placeholders会移除 Prettier 用例中的游标占位符|与范围占位符PRETTIER_RANGE_START/PRETTIER_RANGE_ENDutils.rs因此既有用例同时覆盖了「全文格式化」与「范围格式化」两种模式prettier-ignore 桥接将prettier-ignore替换为biome-ignore format: prettier ignore输出后再替换回来实现与 Prettier 等价的局部忽略语义二次格式化校验对格式化结果再次运行CheckReformat若输出不一致则测试失败——这正是报告「不稳定测试用例」章节所述能力的实现位置test_prettier_snapshot.rs与 Prettier 输出对比get_prettier_diffutils.rs读取同目录下由 Prettier 预先生成的.prettier-snap文件若 Biome 输出与之一致则直接删除冗余快照PrettierDiff::Same否则生成 unified diff 写入.snap快照并交给DiffReport汇总——这正是报告逐文件列出Prettier Similarity与 diff 的数据来源。从仓库结构看crates/biome_js_formatter/tests/specs/prettier/下存放着与 Prettier 官方套件对应的输入文件及快照报告中的每条 diff 均可回溯到具体的.prettier-snap对比结果具备可复现性。结论与启示综合两份报告与源码实现可以得出以下要点兼容性数值ES2015 口径平均兼容性 96.70、兼容行 97.28ES2024 口径平均兼容性 96.75、兼容行 97.32。两份报告针对的是报告撰写时的特定版本快照当前仓库代码已进一步演进评测口径透明报告明确列出了被忽略的测试用例分类JSX、嵌入式语言、非标准语法、ES2016 语法并解释了三类特殊处理非严格模式、不稳定用例取稳定输出、刻意差异读者可据此判断兼容性数据的适用范围选项层面对齐Biome 实现了 Prettier 全部 JavaScript 格式化选项唯一差异是quoteProps刻意不提供consistent值相关枚举与解析逻辑见 context.rs基础设施保障通过.prettier-snap对比、占位符剥离、二次格式化校验与DiffReport汇总test_prettier_snapshot.rs、utils.rsBiome 将「与 Prettier 输出一致」固化为可回归的自动化测试使兼容性提升具有持续可度量性。对希望评估或复现 Biome 兼容性水平的开发者建议直接阅读 report-es2015.md 与 report-es2024.md 中的 diff 段落定位差异语法点再结合 prettier_tests.rs 与测试用例目录深入调试。【免费下载链接】biomeA toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.项目地址: https://gitcode.com/gh_mirrors/bi/biome创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考