导入排序
Biome允许使用自然排序对导入语句进行排序。
此功能默认启用,但可以通过配置选择禁用:
{ "organizeImports": { "enabled": false }}
导入的排序方式
Section titled 导入的排序方式导入语句按照“距离”排序。与用户“距离”较远的模块放在顶部,与用户“距离”较近的模块放在底部:
- 通过
bun:
协议导入的模块。这适用于编写Bun运行的代码; - 显式使用
node:
协议导入的内置Node.js模块和常见的Node内置模块,如assert
; - 通过
npm:
协议导入的模块。这适用于编写Deno运行的代码; - 通过URL导入的模块;
- 从库导入的模块;
- 通过绝对导入导入的模块;
- 通过以
#
为前缀的名称导入的模块。这适用于使用Node的子路径导入时; - 通过相对导入导入的模块;
- 无法通过前面的标准确定的模块;
例如,给定以下代码:
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";
它们将按照以下方式排序:
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";
在特定顺序下导入语句是很常见的,特别是在前端项目中工作时,您导入CSS文件:
import "../styles/reset.css";import "../styles/layout.css";import { Grid } from "../components/Grid.jsx";
另一个常见的情况是导入polyfill或shim文件,这需要在文件顶部保留:
import "../polyfills/array/flatMap";import { functionThatUsesFlatMap } from "./utils.js";
在这些情况下,Biome将对所有这些导入语句进行排序,可能会导致顺序破坏应用程序。
为了避免这种情况,创建一个导入语句的“组”。通过添加一个新行来分隔这些组。
这样做,Biome将仅对属于同一组的导入语句进行排序:
// 组1,仅对这两个文件进行排序import "../styles/reset.css";import "../styles/layout.css";
// 组2,仅对这个文件进行排序import { Grid } from "../components/Grid.jsx";
// 组1,polyfill/shimimport "../polyfills/array/flatMap";
// 组2,需要polyfill/shim的文件import { functionThatUsesFlatMap } from "./utils.js";
通过CLI进行导入排序
Section titled 通过CLI进行导入排序使用check
命令,带有--write
选项。
biome check --write --unsafe ./path/to/src
通过VSCode扩展进行导入排序
Section titled 通过VSCode扩展进行导入排序Biome VS Code扩展通过“Organize Imports”代码操作支持导入排序。 默认情况下,可以使用⇧+Alt+O键盘快捷键运行此操作,也可以通过命令面板(Ctrl/⌘+⇧+P)选择Organize Imports来访问它。
如果希望自动在保存时运行该操作而不是手动调用它,请将以下内容添加到编辑器配置中:
{ "editor.codeActionsOnSave": { "source.organizeImports.biome": "explicit" }}