Imports Sorting

Biome allows sorting import statements using natural ordering.

This feature is enabled by default but can be opted-out via configuration:

{
  "organizeImports": {
    "enabled": false
  }
}

How imports are sorted

Import statements are sorted by “distance”. Modules that are “farther” from the user are put on the top, modules “closer” to the user are put on the bottom:

modules imported via bun: protocol. This is applicable when writing code run by Bun;
built-in Node.js modules that are explicitly imported using the node: protocol and common Node built-ins such as assert;
modules imported via npm: protocol. This is applicable when writing code run by Deno;
modules that contain the protocol :. These are usually considered “virtual modules”, modules that are injected by your working environment, e.g. vite;
modules imported via URL;
modules imported from libraries;
modules imported via absolute imports;
modules imported from a name prefixed by #. This is applicable when using Node’s subpath imports;
modules imported via relative imports;
modules that couldn’t be identified by the previous criteria;

For example, given the following code:

import uncle from "../uncle";
import sibling from "./sibling";
import express from "npm:express";
import imageUrl from "url:./image.png";
import { sortBy } from "virtual:utils";
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";

They will be sorted like this:

 import { expect } from "bun:test";
 import assert from "node:assert";
 import { mock, test } from "node:test";
 import express from "npm:express";
 import { sortBy } from "virtual:utils";
 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";

You can apply the sorting in two ways: via CLI or VSCode extension.

Grouped imports

It’s widespread to have import statements in a certain order, primarily when you work on a frontend project, and you import CSS files:

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

Another common case is import polyfills or shim files, that needs to stay at the top file:

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

In these cases, Biome will sort all these three imports, and it might happen that the order will break your application.

To avoid this, create a “group” of imports. You create a “group” by adding a new line to separate the groups.

By doing so, Biome will limit the sorting only to the import statements that belong to the same group:

// group 1, only these two files will be sorted
import "../styles/reset.css";
import "../styles/layout.css";

// group 2, only this one is sorted
import { Grid } from "../components/Grid.jsx";

// group 1, the polyfill/shim
import "../polyfills/array/flatMap";

// group 2, the files that require the polyfill/shim
import { functionThatUsesFlatMap } from "./utils.js";

Import sorting via CLI

Using the command check, with the option --apply.

biome check --apply ./path/to/src

Import sorting via VSCode extension

The Biome VS Code extension supports imports sorting through the “Organize Imports” code action. By default, this action can be run using the ⇧+Alt+O keyboard shortcut, or is accessible through the Command Palette (Ctrl/⌘+⇧+P) by selecting Organize Imports.

You can add the following to your editor configuration if you want the action to run automatically on save instead of calling it manually:

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