跳转到内容

导入排序

Biome允许使用自然排序对导入语句进行排序。

此功能默认启用,但可以通过配置选择禁用:

biome.json
{
"organizeImports": {
"enabled": false
}
}

导入语句按照“距离”排序。与用户“距离”较远的模块放在顶部,与用户“距离”较近的模块放在底部:

  1. 通过bun:协议导入的模块。这适用于编写Bun运行的代码;
  2. 显式使用node:协议导入的内置Node.js模块和常见的Node内置模块,如assert
  3. 通过npm:协议导入的模块。这适用于编写Deno运行的代码;
  4. 通过URL导入的模块;
  5. 从库导入的模块;
  6. 通过绝对导入导入的模块;
  7. 通过以#为前缀的名称导入的模块。这适用于使用Node的子路径导入时;
  8. 通过相对导入导入的模块;
  9. 无法通过前面的标准确定的模块;

例如,给定以下代码:

example.ts
import uncle from "../uncle";
import sibling from "./sibling";
import express from "npm:express";
import imageUrl from "url:./image.png";
import assert from "node:assert";
import aunt from "../aunt";
import { VERSION } from "https://deno.land/std/version.ts";
import { mock, test } from "node:test";
import { expect } from "bun:test";
import { internal } from "#internal";
import { secret } from "/absolute/path";
import React from "react";

它们将按照以下方式排序:

example.ts
import { expect } from "bun:test";
import assert from "node:assert";
import { mock, test } from "node:test";
import express from "npm:express";
import { VERSION } from "https://deno.land/std/version.ts";
import React from "react";
import { secret } from "/absolute/path";
import { internal } from "#internal";
import aunt from "../aunt";
import uncle from "../uncle";
import sibling from "./sibling";
import imageUrl from "url:./image.png";

您可以通过两种方式应用排序:通过CLIVSCode扩展

在特定顺序下导入语句是很常见的,特别是在前端项目中工作时,您导入CSS文件:

example.js
import "../styles/reset.css";
import "../styles/layout.css";
import { Grid } from "../components/Grid.jsx";

另一个常见的情况是导入polyfill或shim文件,这需要在文件顶部保留:

example.js
import "../polyfills/array/flatMap";
import { functionThatUsesFlatMap } from "./utils.js";

在这些情况下,Biome将对所有这些导入语句进行排序,可能会导致顺序破坏应用程序。

为了避免这种情况,创建一个导入语句的“组”。通过添加一个新行来分隔这些组。

这样做,Biome将仅对属于同一组的导入语句进行排序:

example.js
// 组1,仅对这两个文件进行排序
import "../styles/reset.css";
import "../styles/layout.css";
// 组2,仅对这个文件进行排序
import { Grid } from "../components/Grid.jsx";
example.js
// 组1,polyfill/shim
import "../polyfills/array/flatMap";
// 组2,需要polyfill/shim的文件
import { functionThatUsesFlatMap } from "./utils.js";

使用check命令,带有--write选项。

Terminal window
biome check --write --unsafe ./path/to/src

通过VSCode扩展进行导入排序

Section titled 通过VSCode扩展进行导入排序

Biome VS Code扩展通过“Organize Imports”代码操作支持导入排序。 默认情况下,可以使用+Alt+O键盘快捷键运行此操作,也可以通过命令面板Ctrl/++P)选择Organize Imports来访问它。

如果希望自动在保存时运行该操作而不是手动调用它,请将以下内容添加到编辑器配置中:

settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}