organizeImports (JavaScript)

Language JavaScript (and super languages)

Summary

• Rule available since: v1.0.0
• Diagnostic Category: assist/source/organizeImports
• This action is recommended.
• Sources:
  • Inspired from sort-imports
  • Inspired from no-duplicate-imports
  • Inspired from import/order

How to enable in your editor

VS Code

.vscode/settings.json

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

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.organizeImports.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

Use the source action code source.organizeImports.biome

How to configure

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Description

Organize imports and exports in JavaScript and TypeScript files.

By default, the action sorts module sources in this order:

1. URLs, such as https://example.org.
2. Module sources with a protocol, such as node:path, bun:test, jsr:@my/lib, or npm:lib.
3. Packages, such as mylib or @my/lib.
4. Aliases starting with @/, #, ~, $, or %. These are commonly Node.js subpath imports or TypeScript path aliases.
5. Absolute and relative file paths.

Sources in the same category use natural order, which compares numbers by value: A < a < a9 < a10 < B < b.

The action also merges compatible statements from the same source. It sorts imported and exported names inside braces, along with import attributes, using natural order.

For example, the following code:

import sibling from "./file.js";
import internal from "#alias";
import fs from "fs";
import { test } from "node:test";
import path from "node:path";
import { mock } from "node:test";
import parent from "../parent.js";
import scopedLibUsingJsr from "jsr:@scoped/lib";
import data from "https://example.org";
import { B, A, b, a10, a9 } from "lib";
import scopedLib from "@scoped/lib";
export { Y } from "dep";
export * from "./inner.js";
export { X } from "dep";

…is sorted as follows:

import data from "https://example.org";
import scopedLibUsingJsr from "jsr:@scoped/lib";
import path from "node:path";
import { mock, test } from "node:test";
import scopedLib from "@scoped/lib";
import fs from "fs";
import { A, a9, a10, B, b } from "lib";
import internal from "#alias";
import parent from "../parent.js";
import sibling from "./file.js";

export { X, Y } from "dep";
export * from "./inner.js";

Options

• groups defines custom source groups and their order. Without this option, the action uses the default source categories listed above.
• sortBareImports includes imports that load a module without introducing a local name. Defaults to false because reordering these imports can change program behavior.
• identifierOrder selects how imported names, exported names, and attributes are sorted. Defaults to natural.

groups

The groups option accepts an ordered array of matchers. A matcher can be a predefined group, a glob pattern, or an object that selects a kind of import. The first matching group wins, and unmatched sources move after all configured groups.

Prefix a matcher with ! to exclude matching sources. In the following example, !@myown/** excludes @myown/package from the :PACKAGE: group.

With this configuration…

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                ":BUN:",
                ":NODE:"
              ],
              ":BLANK_LINE:",
              [
                ":PACKAGE:",
                "!@myown/**"
              ],
              ":BLANK_LINE:",
              "@myown/**",
              ":BLANK_LINE:",
              [
                ":ALIAS:",
                ":PATH:"
              ]
            ]
          }
        }
      }
    }
  }
}

…the following code…

import aliased from "@/components/Button";
import lib from "lib";
import path from "node:path";
import sibling from "./file.js";
import myown from "@myown/package";
import scopedLib from "@scoped/lib";
import fs from "fs";

…is sorted as:

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

import scopedLib from "@scoped/lib";
import lib from "lib";

import myown from "@myown/package";

import aliased from "@/components/Button";
import sibling from "./file.js";

Each entry in the groups array is a group matcher that can be:

• A predefined group such as :NODE:, :BUN:, or :PACKAGE:.
• A glob pattern such as @my/lib/**. The action supports a limited set of globs.
• Type-only imports, selected with { "type": true }.
• A combination of matchers, such as [":BUN:", ":NODE:"].
• :BLANK_LINE:, which inserts a blank line between groups.

Predefined groups

• :URL:: sources starting with https:// or http://
• :NODE:: Node.js built-in modules, including node:path, fs, and path.
• :BUN:: Bun built-in modules, including bun:test and bun.
• :PACKAGE_WITH_PROTOCOL:: packages with a protocol (jsr:@my/lib, npm:lib)
• :PACKAGE:: bare and scoped packages (lib, @scoped/lib)
• :ALIAS:: path aliases starting with #, @/, ~, $, or %
• :PATH:: absolute and relative paths
• :STYLE:: paths ending with the following style extensions: .css, .less, .pcss, .sass, .scss, .sss and .styl

Kind matcher

Use a kind matcher to filter imports by their syntactic kind. Currently, the only supported kind is bare, which matches bare (side-effect) imports such as import "polyfill". Prefix the kind with ! to match everything except that kind.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "sortBareImports": true,
            "groups": [
              {
                "kind": "!bare"
              },
              ":BLANK_LINE:",
              {
                "kind": "bare"
              }
            ]
          }
        }
      }
    }
  }
}

The kind matcher composes with the source field, allowing patterns such as “only bare imports that import a CSS file”:

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "sortBareImports": true,
            "groups": [
              {
                "kind": "bare",
                "source": "**/*.css"
              }
            ]
          }
        }
      }
    }
  }
}

Note

The bare kind requires sortBareImports to be true for bare imports to participate in group matching.

Type-only matcher

Use a type-only matcher to separate import type from regular imports: Setting "type": true matches only import type and export type statements. Setting "type": false matches only non-type imports and exports.

Given the following configuration…

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              {
                "type": false,
                "source": [
                  "@my/lib",
                  "@my/lib/**"
                ]
              },
              [
                "@my/lib",
                "@my/lib/**"
              ]
            ]
          }
        }
      }
    }
  }
}

…the following code…

import type { T } from "@my/lib";
import { V } from "@my/lib";

…is sorted as:

import { V } from "@my/lib";
import type { T } from "@my/lib";

The source field accepts predefined groups and glob patterns.

sortBareImports

A bare import loads a module without importing a name, as in import "polyfill". Loading the module may run setup code as a side effect. The action does not reorder bare imports by default. Set sortBareImports to true to sort them with other imports.

Caution

Changing the order of bare imports can change program behavior because their setup code runs in import order.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "sortBareImports": true
          }
        }
      }
    }
  }
}

import "./file";
import { A } from "my-package";

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import "./file";
      │ ^^^^^^^^^^^^^^^^
  > 2 │ import { A } from "my-package";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·"./file";
    2   │ - import·{·A·}·from·"my-package";
      1 │ + import·{·A·}·from·"my-package";
      2 │ + import·"./file";
    3 3 │   
  

identifierOrder

By default, attributes and imported or exported names use natural order. Set identifierOrder to lexicographic to compare them character by character instead:

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "identifierOrder": "lexicographic"
          }
        }
      }
    }
  }
}

import { var1, var2, var21, var11, var12, var22 } from "my-package" with { "att10": "", "att2": "" };

export { var1, var2, var21, var11, var12, var22 };

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Some imports or exports are not organized.
  
  > 1 │ import { var1, var2, var21, var11, var12, var22 } from "my-package" with { "att10": "", "att2": "" };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ 
  > 3 │ export { var1, var2, var21, var11, var12, var22 };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ Sort the imported names.
  
  > 1 │ import { var1, var2, var21, var11, var12, var22 } from "my-package" with { "att10": "", "att2": "" };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
    3 │ export { var1, var2, var21, var11, var12, var22 };
  
  ℹ Sort the exported names.
  
    1 │ import { var1, var2, var21, var11, var12, var22 } from "my-package" with { "att10": "", "att2": "" };
    2 │ 
  > 3 │ export { var1, var2, var21, var11, var12, var22 };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·{·var1,·var2,·var21,·var11,·var12,·var22·}·from·"my-package"·with·{·"att10":·"",·"att2":·""·};
      1 │ + import·{·var1,·var11,·var12,·var2,·var21,·var22·}·from·"my-package"·with·{·"att10":·"",·"att2":·""·};
    2 2 │   
    3   │ - export·{·var1,·var2,·var21,·var11,·var12,·var22·};
      3 │ + export·{·var1,·var11,·var12,·var2,·var21,·var22·};
    4 4 │   
  

Note that this order doesn’t change how import and export sources are sorted.

Common configurations

Group Node.js and Bun built-ins

The following example moves Node.js and Bun built-ins to the top of the file and adds a blank line after them. Other imports are placed after this blank line.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                ":BUN:",
                ":NODE:"
              ],
              ":BLANK_LINE:"
            ]
          }
        }
      }
    }
  }
}

import { test } from "bun:test";
import path from "node:path";
import { A } from "@my/package";
import { $ } from "bun";
import fs from "fs";

code-block.ts:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import { test } from "bun:test";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import path from "node:path";
  > 3 │ import { A } from "@my/package";
  > 4 │ import { $ } from "bun";
  > 5 │ import fs from "fs";
      │ ^^^^^^^^^^^^^^^^^^^^
    6 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1 1 │   import { test } from "bun:test";
    2 2 │   import path from "node:path";
    3   │ - import·{·A·}·from·"@my/package";
    4   │ - import·{·$·}·from·"bun";
    5   │ - import·fs·from·"fs";
      3 │ + import·{·$·}·from·"bun";
      4 │ + import·fs·from·"fs";
      5 │ + 
      6 │ + import·{·A·}·from·"@my/package";
    6 7 │   
  

Group monorepo packages

Let’s assume that all your monorepo packages are scoped by @mycompany. The following example groups all monorepo imports after imports of external dependencies.

Because the first matching group wins, the package group must explicitly exclude monorepo imports. The :PACKAGE: matcher also matches @mycompany/db, while !@mycompany/** excludes it from that group.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                ":PACKAGE:",
                ":PACKAGE_WITH_PROTOCOL:",
                "!@mycompany/**"
              ],
              ":BLANK_LINE:",
              [
                "@mycompany/**"
              ],
              ":BLANK_LINE:"
            ]
          }
        }
      }
    }
  }
}

import { Button } from "@mycompany/ui";
import express from "express";
import { db } from "@mycompany/db";
import { handler } from "./handler.js";
import { A } from "./file.js"

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import { Button } from "@mycompany/ui";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import express from "express";
  > 3 │ import { db } from "@mycompany/db";
  > 4 │ import { handler } from "./handler.js";
  > 5 │ import { A } from "./file.js"
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·{·Button·}·from·"@mycompany/ui";
    2   │ - import·express·from·"express";
    3   │ - import·{·db·}·from·"@mycompany/db";
    4   │ - import·{·handler·}·from·"./handler.js";
    5   │ - import·{·A·}·from·"./file.js"
      1 │ + import·express·from·"express";
      2 │ + 
      3 │ + import·{·db·}·from·"@mycompany/db";
      4 │ + import·{·Button·}·from·"@mycompany/ui";
      5 │ + 
      6 │ + import·{·A·}·from·"./file.js"
      7 │ + import·{·handler·}·from·"./handler.js";
    6 8 │   
  

Group multiple libraries

In the following example, react and libraries like react-dom are grouped together. A blank line separates them from the other imports placed directly below.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                "react",
                "react/**",
                "react-*",
                "react-*/**"
              ],
              ":BLANK_LINE:"
            ]
          }
        }
      }
    }
  }
}

import lib from "lib";
import { useState } from "react";
import { render } from "react-dom/client";

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import lib from "lib";
      │ ^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import { useState } from "react";
  > 3 │ import { render } from "react-dom/client";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·lib·from·"lib";
    2   │ - import·{·useState·}·from·"react";
    3   │ - import·{·render·}·from·"react-dom/client";
      1 │ + import·{·useState·}·from·"react";
      2 │ + import·{·render·}·from·"react-dom/client";
      3 │ + 
      4 │ + import·lib·from·"lib";
    4 5 │   
  

Place side-effect imports last

Combine sortBareImports with the { "kind": "bare" } matcher to gather all bare (side-effect) imports at the bottom of the import list. This is useful, for example, to ensure that web-component or polyfill registrations run after imports that introduce local names:

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "sortBareImports": true,
            "groups": [
              {
                "kind": "!bare"
              },
              ":BLANK_LINE:",
              {
                "kind": "bare"
              }
            ]
          }
        }
      }
    }
  }
}

import "./register-my-component";
import { render } from "react-dom";
import "./polyfill";
import { Button } from "@/components/Button";

code-block.ts:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import "./register-my-component";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import { render } from "react-dom";
  > 3 │ import "./polyfill";
  > 4 │ import { Button } from "@/components/Button";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·"./register-my-component";
    2   │ - import·{·render·}·from·"react-dom";
      1 │ + import·{·render·}·from·"react-dom";
      2 │ + import·{·Button·}·from·"@/components/Button";
      3 │ + 
    3 4 │   import "./polyfill";
    4   │ - import·{·Button·}·from·"@/components/Button";
      5 │ + import·"./register-my-component";
    5 6 │   
  

Place style imports last

The following example groups style imports and places them after other imports. Because groups are matched in order, the first group has to exclude style imports. ** matches everything and is followed by the two exceptions that exclude style imports.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                "**",
                "!:STYLE:"
              ],
              ":BLANK_LINE:",
              [
                ":STYLE:"
              ]
            ]
          }
        }
      }
    }
  }
}

import "./styles/reset.css";
import { useState } from "react";
import styles from "./Component.module.css";
import { Button } from "@/components/Button";

code-block.js:2:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
    1 │ import "./styles/reset.css";
  > 2 │ import { useState } from "react";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 3 │ import styles from "./Component.module.css";
  > 4 │ import { Button } from "@/components/Button";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1 1 │   import "./styles/reset.css";
    2 2 │   import { useState } from "react";
    3   │ - import·styles·from·"./Component.module.css";
    4   │ - import·{·Button·}·from·"@/components/Button";
      3 │ + import·{·Button·}·from·"@/components/Button";
      4 │ + 
      5 │ + import·styles·from·"./Component.module.css";
    5 6 │   
  

Group test utilities together

The following example places test-related utilities at the top of the file. They are separated from other imports by a blank line.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [
                "vitest",
                "vitest/**",
                "@testing-library",
                "@testing-library/**",
                "jest",
                "@jest/**"
              ],
              ":BLANK_LINE:"
            ]
          }
        }
      }
    }
  }
}

import { render } from "@testing-library/react";
import { Button } from "@/components/Button";
import { describe, it, expect } from "vitest";
import { server } from "./mocks/server";

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import { render } from "@testing-library/react";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import { Button } from "@/components/Button";
  > 3 │ import { describe, it, expect } from "vitest";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ import { server } from "./mocks/server";
    5 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1 1 │   import { render } from "@testing-library/react";
    2   │ - import·{·Button·}·from·"@/components/Button";
    3   │ - import·{·describe,·it,·expect·}·from·"vitest";
      2 │ + import·{·describe,·expect,·it·}·from·"vitest";
      3 │ + 
      4 │ + import·{·Button·}·from·"@/components/Button";
    4 5 │   import { server } from "./mocks/server";
    5 6 │   
  

Group import type and group export type

Use the following configuration to place import type and export type at the top of the file:

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              {
                "type": true
              }
            ]
          }
        }
      }
    }
  }
}

import { V } from "my-package";
import type { T } from "my-package";

code-block.ts:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Sort these imports.
  
  > 1 │ import { V } from "my-package";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ import type { T } from "my-package";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·{·V·}·from·"my-package";
    2   │ - import·type·{·T·}·from·"my-package";
      1 │ + import·type·{·T·}·from·"my-package";
      2 │ + import·{·V·}·from·"my-package";
    3 3 │   
  

To place them after other imports, use the following configuration.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              {
                "type": false
              }
            ]
          }
        }
      }
    }
  }
}

The following code…

import type { T } from "my-package";
import { V } from "my-package";

…is organized as:

import { V } from "my-package";
import type { T } from "my-package";

Note that you may want to use the lint rule useImportType and its style to enforce the use of import type instead of import { type }.

With the following configuration…

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "useImportType": {
          "level": "on",
          "options": {
            "style": "separatedType"
          }
        }
      }
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

…the following code…

import type { T1 } from "a";
import { type T2, V } from "a";

…is organized as:

import type { T1, T2 } from "a";
import { V } from "a";

Maximize import merging with useImportType

To merge type-only imports (import type { T }) with regular imports (import { V }), enable useImportType with inlineType:

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "useImportType": {
          "level": "on",
          "options": {
            "style": "inlineType"
          }
        }
      }
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

The following code…

import type { T } from "a";
import { V } from "a";

…is organized as:

import { type T, V } from "a";

Detailed behavior

This section explains which statements may move together and which boundaries the action preserves.

Import anatomy

First, let’s agree on the terminology that we will use in this section.

import A from "@my/lib" with { "attribute1": "value" };
^^^^^^^^       ^^^^^^^         ^^^^^^^^^^^^^^^^^^^^^
  kind         source                attributes

export * from "@my/lib" with { "attribute1": "value" };
^^^^^^^^       ^^^^^^^         ^^^^^^^^^^^^^^^^^^^^^
  kind         source                attributes

Chunks

Before sorting, imports and exports are divided into chunks. A chunk is a sequence of adjacent imports or exports. The action never moves imports or exports across chunk boundaries.

Chunks are separated by:

• a change from imports to exports or from exports to imports;
• any statement that is not an import or export;
• a bare import such as import "polyfill", unless sortBareImports is true;
• a comment followed by a blank line, called a detached comment.

With sortBareImports enabled, the { "kind": "bare" } group matcher can place all bare imports at a chosen position, such as the end of the import list. See Comment handling for detached comments.

Note

Blank lines alone do not create new chunks. Use a comment followed by a blank line to force the start of a new chunk.

The following example shows how imports and exports are chunked.

// chunk 1
import A from "a";
import * as B from "b";
// chunk 2 (a bare import creates its own chunk)
import "x";
// Chunk 3
import A from "a";

// Still same chunk (blank line alone doesn't split)
import * as B from "b";
// Detached comment (followed by blank line)

// New chunk starts here
import { C } from "c";

The action enforces the presence of a blank line between different chunks. Bare imports adjacent to a chunk of imports are not separated by a blank line.

Note

Blank lines inside a chunk are preserved. They can be removed by explicitly defining the option groups.

Sorting within a chunk

Within each chunk, imports and exports are sorted by the source categories described at the beginning of this page.

When two imports share the same source, they are ordered by kind:

1. Bare imports
2. Namespace type import / Namespace type export
3. Default type import
4. Named type import / Named type export
5. Namespace import / Namespace export
6. Combined default and namespace import
7. Default import
8. Combined default and named import
9. Named import / Named export

Imports and exports with attributes (with { ... }) are always placed first. For example, the following code…

import * as namespaceImport from "same-source";
import type * as namespaceTypeImport from "same-source";
import type { namedTypeImport } from "same-source";
import defaultNamespaceCombined, * as namespaceCombined from "same-source";
import defaultNamedCombined, { namedCombined } from "same-source";
import defaultImport from "same-source";
import type defaultTypeImport from "same-source";
import { importWithAttribute } from "same-source" with { "attribute": "value" } ;

is sorted as follows:

import { importWithAttribute } from "same-source" with { "attribute": "value" } ;
import type * as namespaceTypeImport from "same-source";
import type defaultTypeImport from "same-source";
import type { namedTypeImport } from "same-source";
import * as namespaceImport from "same-source";
import defaultNamespaceCombined, * as namespaceCombined from "same-source";
import defaultImport from "same-source";
import defaultNamedCombined, { namedCombined } from "same-source";

This kind order cannot be changed.

Imported name, exported name, and attribute sorting

Names inside braces, such as A and B in import { A, B }, are sorted along with import attributes:

import { a, b, A, B, c10, c9 } from "a";

export { a, b, A, B, c10, c9 } from "a";

import special from "special" with { "type": "ty", "metadata": "data" };

code-block.js:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Some imports or exports are not organized.
  
  > 1 │ import { a, b, A, B, c10, c9 } from "a";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │ 
  > 3 │ export { a, b, A, B, c10, c9 } from "a";
  > 4 │ 
  > 5 │ import special from "special" with { "type": "ty", "metadata": "data" };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ 
  
  ℹ Sort the imported names.
  
  > 1 │ import { a, b, A, B, c10, c9 } from "a";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
    3 │ export { a, b, A, B, c10, c9 } from "a";
  
  ℹ Sort the exported names.
  
    1 │ import { a, b, A, B, c10, c9 } from "a";
    2 │ 
  > 3 │ export { a, b, A, B, c10, c9 } from "a";
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ 
    5 │ import special from "special" with { "type": "ty", "metadata": "data" };
  
  ℹ Sort the attributes.
  
    3 │ export { a, b, A, B, c10, c9 } from "a";
    4 │ 
  > 5 │ import special from "special" with { "type": "ty", "metadata": "data" };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ 
  
  ℹ Safe fix: Organize imports and exports (Biome)
  
    1   │ - import·{·a,·b,·A,·B,·c10,·c9·}·from·"a";
      1 │ + import·{·A,·a,·B,·b,·c9,·c10·}·from·"a";
    2 2 │   
    3   │ - export·{·a,·b,·A,·B,·c10,·c9·}·from·"a";
      3 │ + export·{·A,·a,·B,·b,·c9,·c10·}·from·"a";
    4 4 │   
    5   │ - import·special·from·"special"·with·{·"type":·"ty",·"metadata":·"data"·};
      5 │ + import·special·from·"special"·with·{·"metadata":·"data",·"type":·"ty"·};
    6 6 │   
  

Import and export merging

Imports from the same source in the same chunk are merged when possible.

The following code…

import type { T1 } from "package";
import type { T2 } from "package";
import * as ns from "package";
import D1 from "package";
import D2 from "package";
import { A } from "package";
import { B } from "package";
import { type T3 } from "package";

…becomes:

import type { T1, T2 } from "package";
import D1, * as ns from "package";
import D2, { A, B, type T3 } from "package";

With useImportType set to separatedType, the result is:

import type { T1, T2, T3 } from "package";
import D1, * as ns from "package";
import D2, { A, B } from "package";

Comment handling

Comments directly above an import (attached comments) move with that import when it is sorted. Comments followed by a blank line (detached comments) stay in place and create a new chunk.

File-header comments at the very top of the file are always treated as detached, even without a blank line. This preserves copyright notices and license headers.

The following code…

// Copyright notice and file header comment
import F from "f";
// Attached comment for `e`
import E from "e";
// Attached comment for `d`
import D from "d";
// Detached comment (new chunk)

// Attached comment for `b`
import B from "b";
// Attached comment for `a`
import A from "a";

…becomes:

// Copyright notice and file header comment

// Attached comment for `d`
import D from "d";
// Attached comment for `e`
import E from "e";
import F from "f";

// Detached comment (new chunk)

// Attached comment for `a`
import A from "a";
// Attached comment for `b`
import B from "b";

A blank line is automatically added after the header comment to ensure that the attached comment doesn’t merge with the header comment.

Supported glob patterns

A source is split into segments by /. For example, src/file.js has two segments: src and file.js.

• *: matches zero or more characters within a single segment; file.js matches *.js, but src/file.js does not.

• **: matches zero or more segments and must be enclosed by / or be at the start/end; file.js and src/file.js both match **/*.js.

• !: negates a pattern when used as the first character; file.js matches !*.test.js; Exceptions can be layered: ["@my/lib/**", "!@my/lib/internal/**", "@my/lib/internal/allowed/**"].

• \*: matches a literal * character.

• ?, [, ], {, }: reserved characters, must be escaped with \.

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground