Biome v1.5

Jan 8, 2024 - 6 min read

Emanuele Stoppa

Biome Core Team, Biome Maintainers

除了 2024 年路线图 之外，我们还发布了 新的徽标和主页 的新版本。此版本在命令行接口 (CLI) 方面新增了一些功能，并修复了格式化程序中的许多问题。我们的 TypeScript、JSX 和 JavaScript 格式化程序与 Prettier 的兼容性已超过 97%。Biome 现在提供超过 190 条 lint 规则。

¥Along with the Roadmap for 2024, the new logo and homepage, we also published a new version. This version has few features around the CLI and many fixes in our formatter. Our TypeScript, JSX and JavaScript formatting has surpassed the 97% compatibility rate with Prettier. Biome now provides over 190 lint rules.

使用以下命令更新 Biome：

¥Update Biome using the following commands:

npm install --save-dev --save-exact @biomejs/biome@latest
npx @biomejs/biome migrate

新功能

¥New features

• 仅处理已更改的文件。

  ¥Process only the files that were changed.

• 命令 biome ci 现在会在 GitHub PR 中打印诊断信息。

  ¥The command biome ci now prints diagnostics in GitHub PRs.

• 新的命令 biome explain。

  ¥A new command,biome explain.

• 命令 biome migrate 会更新 $schema。

  ¥The command biome migrate updates the $schema.

• 新的代码检查规则。

  ¥New lint rules.

仅处理已更改的文件

¥Process only the files that were changed

如果你启用了与版本控制系统 (VCS) 的集成，你可以指示 Biome 仅处理已更改的文件。目前，此功能通过版本控制系统 (VCS) 计算已更改的文件，因此 Biome 无法准确知道哪些行发生了更改。

¥If you enable the integration with VCS, you can tell Biome to process only the files that were changed. As for now, this feature computes the files that were changed by using a VCS, so Biome doesn’t know exactly which lines changed.

此功能实际上使某些实用程序（例如 lint-staged）过时。

¥This feature practically makes some utilities such as lint-staged obsolete.

要使用此功能，你必须在配置文件中告知 Biome 默认分支，然后通过 CLI 传递选项 --changed：

¥To take advantage of this feature, you have to tell Biome what’s the default branch in the configuration file, and then you’ll have to pass the option --changed via CLI:

biome.json

{
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "defaultBranch": "main"
  }
}

修改某些文件后，请在所需的命令（例如 format 命令）中使用新的选项：

¥Once you modified some files, use the new option to the command you need, for example the format command:

biome format --changed --write

命令 biome ci 现在会在 GitHub PR 中打印诊断信息

¥The command biome ci now prints diagnostics in GitHub PRs

长期以来，用户一直对 check 和 ci 命令之间的区别感到困惑，因为到目前为止，它们的行为非常相似。从这个版本开始，命令 ci 可以检测 GitHub CI 环境并在 PR 中打印注释。

¥For quite some time, users were confused by the difference between the commands check and cibecause, until now, their behaviours have been very similar. From this version, the command ci can detect the GitHub CI environment and print annotation in the PRs.

如果你看不到注释，可能需要更改工作流文件的权限：

¥It’s possible that you would need to change your permissions of your workflow files in case you don’t see the annotations:

.github/workflows/action.yml

permissions:
  pull-requests: write

新增命令 biome explain

¥A new command biome explain

此命令将用作 “offline” 文档工具。在此版本中，该命令支持对所有 lint 规则的解释；例如，你可以请求 noAccumulatingSpread 的文档：

¥This command will serve as an “offline” documentation tool. In this release, the command supports the explanation of all the lint rules; for example you can request documentation for noAccumulatingSpread:

biome explain noAccumulatingSpread

这将打印以下 Markdown：

¥Which will print the following Markdown:

# noAccumulatingSpread

No fix available.

This rule is recommended.

# Description

Disallow the use of spread (`...`) syntax on accumulators.

Spread syntax allows an iterable to be expanded into its individual elements.

Spread syntax should be avoided on accumulators (like those in `.reduce`)
because it causes a time complexity of `O(n^2)` instead of `O(n)`.

Source: https://prateeksurana.me/blog/why-using-object-spread-with-reduce-bad-idea/

## Examples

### Invalid



```js,expect_diagnostic
var a = ['a', 'b', 'c'];
a.reduce((acc, val) => [...acc, val], []);

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {return [...acc, val];}, []);

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => ({...acc, [val]: val}), {});

Valid

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {acc.push(val); return acc}, []);

我们计划优化终端输出，使其更易于阅读，并为该命令提供自动补全功能。

¥We plan to make this output more readable for terminals, as well as provide autocompletion for this command.

#### 命令 `biome migrate` 会更新 `$schema`

¥The command `biome migrate` updates the `$schema`

如果你使用在线模式，命令 `biome migrate` 现在会更新配置文件 `biome.json` 中的 `$schema` 值。更新到 Biome `v1.5.0` 后立即运行此命令：

¥The command `biome migrate` now updates the `$schema` value inside the configuration file `biome.json` if you avail of the online schema. Run this command as soon as you update to Biome `v1.5.0`:


```json title="biome.json" ins="1.5.0" del={2} ins={3}
{
  "$schema": "https://biome.nodejs.cn/schemas/1.4.1/schema.json"
  "$schema": "https://biome.nodejs.cn/schemas/1.5.0/schema.json"
}

新增规则

¥New rules

useExportType

interface I {
}

export {I};

nursery/useExportType.js:2:8 lint/nursery/useExportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ All exports are only types and should thus use export type.

    1 │ interface I {}
  > 2 │ export { I };
      │        ^^^^^^
    3 │ 

  ℹ Using export type allows transpilers to safely drop exports of types without looking for their definition.

  ℹ Safe fix: Use a grouped export type.

    2 │ export·type·{·I·};
      │        +++++

useImportType

import {A} from "./mod.js";

type TypeOfA = typeof A;
let a: A;

nursery/useImportType.js:1:1 lint/nursery/useImportType  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ All these imports are only used as types.

  > 1 │ import { A } from "./mod.js";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ type TypeOfA = typeof A;
    3 │ let a: A;

  ℹ Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.

  ℹ Safe fix: Use import type.

    1 │ import·type·{·A·}·from·"./mod.js";
      │        +++++

useFilenamingConvention

强制 JavaScript 和 TypeScript 文件名遵循命名规范。

¥Enforces naming conventions for JavaScript and TypeScript filenames.

useNodejsImportProtocol

import fs from 'fs';

nursery/useNodejsImportProtocol.js:1:16 lint/nursery/useNodejsImportProtocol  FIXABLE  ━━━━━━━━━━━━━━━━━

  ⚠ Import from Node.js builtin module "fs" should use the "node:" protocol.

  > 1 │ import fs from 'fs';
      │                ^^^^
    2 │ 

  ℹ Using the node: protocol is more explicit and signals that the imported module belongs to Node.js.

  ℹ Unsafe fix: Change to "node:fs".

    1   │ - import·fs·from·'fs';
      1 │ + import·fs·from·"node:fs";
    2 2 │ 

noNodejsModules

import fs from "fs";
import path from "node:path";

nursery/noNodejsModules.js:1:16 lint/nursery/noNodejsModules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Using Node.js modules are forbidden.

  > 1 │ import fs from "fs";
      │                ^^^^
    2 │ import path from "node:path";
    3 │ 

  ℹ Can be useful for client-side web projects that do not have access to those modules.

  ℹ Remove the import module.

noInvalidUseBeforeDeclaration

function f() {
    console.log(x);
    const x;
}

nursery/noInvalidUseBeforeDeclaration.js:3:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Const declarations must have an initialized value.

    1 │ function f() {
    2 │     console.log(x);
  > 3 │     const x;
      │           ^
    4 │ }
    5 │ 

  ℹ This variable needs to be initialized.

noGlobalEval

eval("var a = 0");

nursery/noGlobalEval.js:1:1 lint/nursery/noGlobalEval ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ eval() exposes to security risks and performance issues.

  > 1 │ eval("var a = 0");
      │ ^^^^
    2 │ 

  ℹ See the MDN web docs for more details.

  ℹ Refactor the code so that it doesn't need to call eval().

noGlobalAssign

Object = null;

nursery/noGlobalAssign.js:1:1 lint/nursery/noGlobalAssign ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A global variable should not be reassigned.

  > 1 │ Object = null;
      │ ^^^^^^^
    2 │ 

  ℹ Assigning to a global variable can override essential functionality.

noMisleadingCharacterClass

/^[Á]$/u;

nursery/noMisleadingCharacterClass.js:1:1 lint/nursery/noMisleadingCharacterClass ━━━━━━━━━━━━━━━━━━

  ⚠ Unexpected combined character in the character class.

  > 1 │ /^[Á]$/u;
      │ ^^^^^^^^
    2 │ 

noThenProperty

const foo = {
    then() {
    }
};

nursery/noThenProperty.js:2:5 lint/nursery/noThenProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Do not add then to an object.

    1 │ const foo = {
  > 2 │     then() {}
      │     ^^^^
    3 │ };
    4 │ 

const foo = {
    get then() {
    }
};

noUselessTernary

var a = x ? true : true;

nursery/noUselessTernary.js:1:9 lint/nursery/noUselessTernary ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unnecessary use of boolean literals in conditional expression.

  > 1 │ var a = x ? true : true;
      │         ^^^^^^^^^^^^^^^
    2 │ 

  ℹ Simplify your code by directly assigning the result without using a ternary operator.

  ℹ If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
     Check for more details about NOT operator.

2024 年路线图

Biome 格式化程序赢得 Prettier 挑战赛