Skip to content

Biome v2.3 - 让生态系统更紧密地联系在一起

The image, on the right, shows the mascot of the Biome project named Cookie, which is the Biome logo with eyes. On the left, the Vue, Svelte and Astro logos. The mascot has hearts on her, which shows that is in love with the three frameworks. The image, on the right, shows the mascot of the Biome project named Cookie, which is the Biome logo with eyes. On the left, the Vue, Svelte and Astro logos. The mascot has hearts on her, which shows that is in love with the three frameworks.

我们很高兴地宣布 Biome 2.3 版本发布,其中包含社区强烈要求的多项功能。此版本标志着我们在支持更广泛的 Web 生态系统方面迈出了重要一步。

¥We’re excited to announce the release of Biome 2.3, bringing several features that have been highly requested by the community. This release marks a significant milestone in our journey to support the broader web ecosystem.

升级到 Biome v2.3.0 后,运行 migrate 命令将 Biome 配置迁移到新版本:

¥Once you have upgraded to Biome v2.3.0, migrate your Biome configuration to the new version by running the migrate command:

Terminal window
biome migrate --write

¥Full support for Vue, Svelte, and Astro

Biome 2.3 全面支持 Vue、Svelte 和 Astro 文件。这意味着你现在可以格式化和检查这些框架中 <script> 标签内的 JavaScript 和 TypeScript 代码,以及 <style> 标签内的 CSS 代码。这些文件的 HTML/模板部分也会根据 Biome 的 HTML 格式化规则进行解析和格式化。

¥Biome 2.3 introduces full support for Vue, Svelte, and Astro files. This means you can now format and lint the JavaScript and TypeScript code inside <script> tags, as well as the CSS inside <style> tags in these frameworks. The HTML/template portions of these files are also parsed and formatted according to Biome’s HTML formatting rules.

如果没有 Core Contributor Member @ematipico @ematipico Core Contributor Member @dyc3 @dyc3 的巨大努力,这项成就将无法实现。

¥This achievement wouldn’t have been possible without the great efforts of Core Contributor Member @ematipico @ematipico and Core Contributor Member @dyc3 @dyc3 .

这是许多开发者一直以来都期待的功能,我们很高兴终于实现了它。实现此功能颇具挑战性,需要进行大量试验才能根据工具链的限制正确构建架构。

¥This is a feature that many developers have been asking for, and we’re thrilled to finally deliver it. Achieving this has had its challenges, and it required extensive trials to get the architecture right based on the constraints of the toolchain.

然而,出于几个重要原因,此功能被标记为实验性功能。首先,这些框架有其自身特定的语法和惯用法,这些语法和惯用法超出了标准的 HTML、CSS 和 JavaScript。虽然我们已经做了大量工作来处理许多模式,但仍有一些情况和框架特定的语法可能尚未完全支持(例如 Svelte 控制流语法或 Astro JSX 类语法)。我们鼓励你使用这项新功能,并根据你的需求和可能遇到的限制进行微调。

¥However, this feature is marked as experimental for several important reasons. First, these frameworks have their own specific syntaxes and idioms that extend beyond standard HTML, CSS, and JavaScript. While we’ve done extensive work to handle many patterns, there are cases and framework-specific syntaxes that may not yet be fully supported (for example Svelte control-flow syntax, or Astro JSX-like syntax). We encourage you to avail of this new feature, and fine-tune it based on your needs and possible limitations found.

如果你发现任何尚未实现的功能,或者存在需要正确处理的解析错误,请发起讨论或提交 issue。

¥Please open a discussion if you find something that hasn’t been implemented, or an issue if there’s a parsing error that should be handled correctly.

要启用此功能,你需要选择新的 html.experimentalFullSupportEnabled 选项:

¥To enable the feature, you’ll have to opt in the new html.experimentalFullSupportEnabled option:

biome.json
{
"html": {
"experimentalFullSupportEnabled": true
}
}

¥Script and style indentation

此外,你可以配置 HTML 内容的特定格式选项,例如是否缩进 <script><style> 标签的内容:

¥Additionally, you can configure specific formatting options for HTML content, such as whether to indent the content of <script> and <style> tags:

biome.json
{
"html": {
"formatter": {
"indentScriptAndStyle": true
}
}
}
file.vue
<script setup lang="ts">
const foo = "bar";
const foo = "bar";
</script>
file.svelte
<script lang="ts">
const foo = "bar";
const foo = "bar";
</script>
file.astro
---
const foo = "bar";
const foo = "bar";
---

默认情况下,indentScriptAndStyle 设置为 false,以与 Prettier 的行为保持一致。

¥By default, indentScriptAndStyle is set to false to match Prettier’s behavior.

¥Possible inconsistencies

此次发布标志着我们迈入了一个需要解决和讨论的新字段。在 Biome 中,你可以根据需要配置每种语言,这意味着一个项目最终可能会有不同的格式(例如)。

¥With this release, we step into something new that needs to be addressed and discussed. In Biome you can configure each language as you see fit, which means that a project might end up with different formatting (as example).

在以下配置文件中,JavaScript 文件使用双引号格式化,而 CSS 文件使用单引号格式化。

¥In the following configuration file, JavaScript files are formatted using double quotes, while CSS files are formatted using single quotes.

{
"html": {
"formatter": { "enabled": true },
"experimentalFullSupportEnabled": true
},
"javascript" : {
"formatter": {
"quoteStyle": "double"
}
},
"css": {
"formatter": {
"quoteStyle": "single"
}
}
}

为什么有人会需要它?这并非我们能解答的问题,但使用这样的配置,你的 HTML 类文件中会出现不同的引号。这可能会导致内部不一致。我们创建了一个 GitHub 讨论区 文档来了解这是否是一个问题,如果是,Biome 应该如何解决。请告诉我们你的想法。

¥Why would someone want that? That’s not for us to answer, however with a configuration like this you would end with different quotes inside your HTML-ish files. This could cause inconsistencies inside the same. We created a GitHub discussion to understand if this is a problem, and if so, how Biome should solve it. Please let us know what do you think.

¥New ignore syntax

Biome 2.3 引入了更精细的语法,用于忽略项目中的路径,解决了自引入多文件分析和 TypeScript 推断以来出现的重要问题。

¥Biome 2.3 introduces a refined syntax for ignoring paths in your project, addressing important problems that arose since the introduction of multi file analysis and TypeScript inference.

Biome 2.0 发布时,我们在内部引入了 “正在索引的路径” 的概念。当路径被索引时,Biome 会解析该路径,并更新模块图和类型推断(如果已启用)。

¥When Biome 2.0 came out, we internally introduced the concept of “paths being indexed”. When a path is indexed, Biome parses it and updates the module graph and the type inference, if enabled.

然而,我们逐渐意识到,多文件分析和类型推断是非常复杂的问题,很容易变得难以控制。

¥However, we slowly came to the realization that multi-file analysis and type inference are very complex problems that can get out of hand easily.

例如,类型推断可能会进入一个非常糟糕的循环,其中大量类型被递归索引,从而消耗大量内存。

¥For example, type inference can enter a very nasty loop where tons of types are recursively indexed, consuming a lot of memory.

对于多文件分析,node_modules/ 文件夹可能是一个陷阱,其中充满了深度很高的符号链接和超过最大允许字符数的路径名。

¥As for multi-file analysis, the node_modules/ folder can be a rabbit hole, full of symbolic links with high depths and path names that exceed the maximum allowed characters.

解决这些复杂问题需要时间、大量的测试以及我们和社区的耐心。通过这种新的语法,用户现在可以更好地控制 Biome 的功能。

¥Solving these complex problems takes time, a lot of testing and patience from us and the community. With this new syntax, users have now more control over what Biome can and can’t do.

此次发布新增了两种语法:

¥With this release, two syntaxes are now available:

  • !(单感叹号):忽略代码检查和格式化过程中的路径,但仍允许类型系统对其进行索引。这对于你不想格式化或检查但仍然需要用于类型推断和导入的生成文件或第三方代码非常有用。

    ¥! (single exclamation mark): Ignores the path from linting and formatting, but still allows it to be indexed by the type system. This is useful for generated files or third-party code that you don’t want to format or lint, but still need for type inference and imports.

  • !!(双感叹号):完全忽略所有 Biome 操作(包括类型索引)中的路径。这对于应该完全排除在 Biome 分析之外的文件(例如 dist/ 文件夹)非常有用。

    ¥!! (double exclamation mark): Completely ignores the path from all Biome operations, including type indexing. This is useful for files that should be entirely excluded from Biome’s analysis, such as dist/ folders.

在使用依赖于依赖或生成代码进行类型推断的 TypeScript 项目时,这种区别尤为重要。使用 !,你可以将这些文件从格式化和代码检查中排除,同时仍然保持整个项目的正确类型信息。

¥This distinction is particularly important when working with TypeScript projects that rely on type inference from dependencies or generated code. By using !, you can exclude these files from formatting and linting while still maintaining correct type information across your project.

以下是一个配置示例:

¥Here’s an example configuration:

biome.json
{
"files": {
"includes": [
"**",
"!**/generated",
"!!**/dist"
]
}
}

在此配置中,generated/ 目录中的文件将被忽略,不进行格式化和代码检查,但仍保留类型和模块图的索引;而 dist/ 目录中的文件将被完全排除在所有 Biome 操作之外。

¥In this configuration, files in the generated/ directory are ignored for formatting and linting but remain indexed for types and module graph, while files in dist/ directory are completely excluded from all Biome operations.

这是一个重要的工具,可让你控制 Biome 以及 avoidpossibleslownessmemoryleaks

¥This is an important tool at your disposal that allows you to control Biome, and avoid possible slowness and memory leaks.

因此,files.experimentalScannerIgnores 选项已被弃用。我们计划在后续版本中移除此选项。运行 biome migrate 命令更新你的配置文件。

¥As result, the option files.experimentalScannerIgnores has been deprecated. We plan to remove this option in the next releases. Run the biome migrate command update your configuration file.

非常感谢 Core Contributor Member @arendjr @arendjr 实现了这项新功能。

¥Great shoutout to Core Contributor Member @arendjr @arendjr for implementing this new feature.

¥Tailwind v4 support

Core Contributor Member @dyc3 @dyc3 非常努力,它为我们带来了对 Tailwind 文件的原生支持!

¥ Core Contributor Member @dyc3 @dyc3 worked really hard, and he shipped for us native support of tailwind files!

这是 CSS 解析器的一个可选功能,你可以使用新的 css.parser.tailwindDirectives 选项启用它:

¥This is a opt-in feature of the CSS parser, and you can enable it using the new css.parser.tailwindDirectives option:

biome.json
{
"css": {
"parser": {
"tailwindDirectives": true
}
}
}
tailwind.css
@utility container {
margin-inline: auto;
padding-inline: 2rem;
}
@theme {
--color-*: intial;
}

¥Lint rules

¥Promoted rules

  • noNonNullAssertedOptionalChain 提升至可疑组

    ¥Promoted noNonNullAssertedOptionalChain to the suspicious group

  • useReactFunctionComponents 提升至 style

    ¥Promoted useReactFunctionComponents to the style group

  • useImageSize 提升至 correctness

    ¥Promoted useImageSize to the correctness group

  • useConsistentTypeDefinitions 提升至 style

    ¥Promoted useConsistentTypeDefinitions to the style group

  • useQwikClasslist 提升至 correctness

    ¥Promoted useQwikClasslist to the correctness group

  • noSecrets 提升至 security

    ¥Promoted noSecrets to the security group

¥Removed rules

移除初始 lint 规则 useAnchorHref,因为它的用例已被 useValidAnchor 涵盖。

¥Removed nursery lint rule useAnchorHref, because its use case is covered by useValidAnchor.

¥Updated the react domain

以下规则现已成为 react 域的一部分,除非你启用该域,或者 Biome 检测到 react 是你最近的 package.json 的依赖,否则这些规则不会自动启用:

¥The following rules are now a part of the react domain, and they won’t be enabled automatically unless you enabled the domain, or Biome detects react as a dependency of your closest package.json:

¥Improved --skip and --only flags

标志位 --skip--only 已得到增强,它们也可以接受 lint 域

¥The flags --skip and --only have been enhanced, and they can accept lint domains too.

在以下示例中,lint 命令仅运行 project 域中的规则:

¥In the following example, the lint command runs only the rules that belong to the project domain:

Terminal window
biome lint --only=project

在以下示例中,lint 命令运行你配置的所有规则,但 test 域中的规则除外:

¥In the following example, the lint command runs all the rules that you configured, expect for the rules that belong to the test domain:

Terminal window
biome lint --skip=test

¥Enhanced init command

init 命令现在会检查项目是否包含忽略文件和 dist/ 文件夹。如果找到受支持的忽略文件,Biome 将启用 VCS 集成;如果找到 dist/ 文件夹,则会使用新的忽略语法将其排除。这将有助于减少 Biome 的入门门槛:

¥The init command now checks if the project contains ignore files and dist/ folders. If supported ignore files are found, Biome will enable the VCS integration, and if dist/ folder is found, it will exclude it using the new ignore syntax. This should help reducing the friction when starting with Biome:

{
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
}
}

¥New reporters

新增了两个 CLI 报告器:

¥Two new CLI reporters have been added:

¥New CLI flags

我们添加了新的 CLI 标志,以便更好地控制 Biome,而无需依赖配置文件。以下是列表:

¥We added the new CLI flags to better control Biome without relying on the configuration file. Here’s the list:

  • --format-with-errors:用于格式化包含解析错误的代码的 CLI 标志。

    ¥--format-with-errors: CLI flag that allows to format code that contains parse errors.

  • --css-parse-css-modules:用于控制是否启用 CSS Modules 语法的 CLI 标志。

    ¥--css-parse-css-modules: CLI flag to control whether CSS Modules syntax is enabled.

  • --css-parse-tailwind-directives:用于控制是否启用 Tailwind CSS 4.0 指令和函数的 CLI 标志。

    ¥--css-parse-tailwind-directives: CLI flag to control whether Tailwind CSS 4.0 directives and functions are enabled.

  • --json-parse-allow-comments:用于控制是否允许在 JSON 文件中添加注释的 CLI 标志。

    ¥--json-parse-allow-comments: CLI flag to control whether comments are allowed in JSON files.

  • --json-parse-allow-trailing-commas:CLI 标志用于控制 JSON 文件中是否允许尾随逗号。

    ¥--json-parse-allow-trailing-commas: CLI flag to control whether trailing commas are allowed in JSON files.

¥lineEnding format option

选项 lineEnding 现在新增了一个名为 auto 的变体,以匹配操作系统预期的换行符样式:在 Windows 系统上,这将是 CRLF (\r\n),在 macOS/Linux 系统上,这将是 LF (\n)。

¥The option lineEnding now has a variant called auto to match the operating system’s expected line-ending style: on Windows, this will be CRLF (\r\n), and on macOS / Linux, this will be LF (\n).

这使得使用 Biome 的跨平台项目无需强制选择其中一个选项,这与 Git 在这些平台上的默认行为更加一致。

¥This allows for cross-platform projects that use Biome not to have to force one option or the other, which aligns better with Git’s default behavior on these platforms.

biome.json
{
"formatter": {
"lineEnding": "auto"
}
}
Terminal window
biome format --line-ending auto

¥And more!

已发布更多功能和修复,例如 React v19 支持、tsconfig.json 中对 baseUrl 的支持等等。请参阅 功能详细说明 的更新日志页面。

¥More features and fixes have been shipped, like React v19 support, baseUrl support inside tsconfig.json, and more. Refer to the changelog page for a detailed breakdown of the features.

我喜欢这个项目的发展方向,我能做些什么?

Section titled “我喜欢这个项目的发展方向,我能做些什么?”

¥I like where this is going, how can I help?

我想提醒你,Biome 是一个由热爱编程、开源并秉持 Biome 理念的志愿者领导的项目,因此我们欢迎任何形式的帮助。 😁

¥I want to remind you that Biome is a project led by volunteers who like programming, open-source, and embrace the Biome philosophy, so any help is welcome 😁

¥Translations

如果你熟悉 Biome 并希望为其推广做出贡献,你可以将网站翻译成你的母语来帮助我们。在 dashboard 中,你可以检查支持的语言及其是否为最新版本。

¥If you are familiar with Biome and would like to contribute to its outreach, you can assist us by translating the website into your native language. In this dashboard, you can check the supported languages and if they are up to date.

¥Chat with us

加入我们的 Discord 服务器,与社区互动。与社区交流并成为社区的一份子也是一种贡献。

¥Join our Discord server, and engage with the community. Chatting with the community and being part of the community is a form of contribution.

¥Code contributions

如果你对项目的技术方面感兴趣,并且想要学习 Rust 语言,或者想要练习解析器、编译器、分析器等方面的知识,Biome 项目正是你所需要的!

¥If you like the technical aspects of the project, and you want to make your way into the Rust language, or practice your knowledge around parsers, compilers, analysers, etc., Biome is the project that does for you!

有很多方面值得探索;我保证你不会感到无聊。以下是一些你可以尝试的入门示例:

¥There are numerous aspects to explore; I assure you that you won’t get bored. Here is a small list of the things you can start with:

¥Financial help

如果你相信本项目未来发展,可以通过 Open CollectiveGitHub 赞助商 提供资金支持。

¥If you believe in the future of the project, you can also help with a financial contribution, via Open Collective or GitHub Sponsors.

此外,该项目提供了一个 企业支持计划,允许公司聘请一位核心贡献者来负责 Biome 工具链的特定方面。

¥Additionally, the project provides an enterprise support program where a company you can employ one of the core contributors to work a specific aspect of the Biome toolchain.