organizeImports

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

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.organizeImports.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.organizeImports.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.organizeImports.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": "on"
6
      }
7
    }
8
  }
9
}

Description

Sorts imports and exports in your JavaScript and TypeScript files.

By default, imports and exports are sorted by “distance” from the current file:

URLs such as https://example.org.
Packages with a protocol such as node:path, bun:test, jsr:@my?lib, or npm:lib.
Packages such as mylib or @my/lib.
Aliases: sources starting with @/, #, ~, $, or %. They usually are Node.js subpath imports or TypeScript path aliases.
Absolute and relative paths.

Imports and exports with the same distance are sorted using a natural sort order such that A < a < a9 < a10 < B < b

The action also merges imports and exports from the same source, sorts named specifiers and attributes using a natural sort order.

For example, the following code…

1
import sibling from "./file.js";
2
import internal from "#alias";
3
import fs from "fs";
4
import { test } from "node:test";
5
import path from "node:path";
6
import { mock } from "node:test";
7
import parent from "../parent.js";
8
import scopedLibUsingJsr from "jsr:@scoped/lib";
9
import data from "https://example.org";
10
import { B, A, b, a10, a9 } from "lib";
11
import scopedLib from "@scoped/lib";
12
export { Y } from "dep";
13
export * from "./inner.js";
14
export { X } from "dep";

…is sorted as follows:

1
import data from "https://example.org";
2
import scopedLibUsingJsr from "jsr:@scoped/lib";
3
import path from "node:path";
4
import { mock, test } from "node:test";
5
import scopedLib from "@scoped/lib";
6
import fs from "fs";
7
import { A, a9, a10, B, b } from "lib";
8
import internal from "#alias";
9
import parent from "../parent.js";
10
import sibling from "./file.js";
11

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

Options

The action provides several options to customize how imports and exports are ordered:

groups allows to group imports and exports before sorting them; It allows expressing custom order between imports or exports.
identifierOrder allows changing how named specifiers and attributes are sorted

`groups`

You can customize how imports and exports are grouped using the groups option. The option accepts an array of group matchers, which in their simplest form are glob patterns or predefined group matchers. Imports and exports that don’t match any group are automatically moved after all the groups.

Groups are always matched in order, so earlier matchers take priority. To exclude some imports of a group, you can use an array of group matchers with negated matchers, prefixed with !. In the following example, we use the negated glob matcher !@myown/**, to exclude @myown/package from the :PACKAGE: group.

With this configuration…

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                ":BUN:",
10
                ":NODE:"
11
              ],
12
              ":BLANK_LINE:",
13
              [
14
                ":PACKAGE:",
15
                "!@myown/**"
16
              ],
17
              ":BLANK_LINE:",
18
              "@myown/**",
19
              ":BLANK_LINE:",
20
              [
21
                ":ALIAS:",
22
                ":PATH:"
23
              ]
24
            ]
25
          }
26
        }
27
      }
28
    }
29
  }
30
}

…the following code…

1
import aliased from "@/components/Button";
2
import lib from "lib";
3
import path from "node:path";
4
import sibling from "./file.js";
5
import myown from "@myown/package";
6
import scopedLib from "@scoped/lib";
7
import fs from "fs";

…is sorted as:

1
import fs from "fs";
2
import path from "node:path";
3

4
import scopedLib from "@scoped/lib";
5
import lib from "lib";
6

7
import myown from "@myown/package";
8

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

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

A predefined group like :NODE:, :BUN:, or :PACKAGE:
A glob pattern like @my/lib/**; the action supports a limited set of globs.
Type-only imports like { "type": true }
A combination of the above, e.g. [":BUN:", ":NODE:"]
:BLANK_LINE: to insert a blank line between groups

Predefined groups

:URL:: sources starting with https:// or http://
:NODE:: Node.js built-in modules (node:path, fs, path, etc.)
:BUN:: Bun built-in modules (bun:test, bun, etc.)
: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

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…

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              {
9
                "type": false,
10
                "source": [
11
                  "@my/lib",
12
                  "@my/lib/**"
13
                ]
14
              },
15
              [
16
                "@my/lib",
17
                "@my/lib/**"
18
              ]
19
            ]
20
          }
21
        }
22
      }
23
    }
24
  }
25
}

…the following code…

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

…is sorted as:

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

`identifierOrder`

By default, attributes, imported and exported names are sorted with a natural sort order. Opt for a lexicographic sort, also referred as binary sort, by setting the identifierOrder option to lexicographic:

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "identifierOrder": "lexicographic"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

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

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

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { var1, var2, var21, var11, var12, var22 } from “my-package” with { “att10”: "", “att2”: "" };
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
    3 │ export { var1, var2, var21, var11, var12, var22 };
  
  ℹ Safe fix: Organize Imports (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-in

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

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                ":BUN:",
10
                ":NODE:"
11
              ],
12
              ":BLANK_LINE:"
13
            ]
14
          }
15
        }
16
      }
17
    }
18
  }
19
}

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";

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { test } from “bun:test”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import path from “node:path”;
    3 │ import { A } from “@my/package”;
  
  ℹ Safe fix: Organize Imports (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 groups are matched in order, the first group has to exclude monorepo imports. Indeed, :PACKAGE: matches imports like @mycompany/db, and thus must be excluded thanks to the exception !@mycompany/**.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                ":PACKAGE:",
10
                ":PACKAGE_WITH_PROTOCOL:",
11
                "!@mycompany/**"
12
              ],
13
              ":BLANK_LINE:",
14
              [
15
                "@mycompany/**"
16
              ],
17
              ":BLANK_LINE:"
18
            ]
19
          }
20
        }
21
      }
22
    }
23
  }
24
}

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"

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { Button } from “@mycompany/ui”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import express from “express”;
    3 │ import { db } from “@mycompany/db”;
  
  ℹ Safe fix: Organize Imports (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.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                "react",
10
                "react/**",
11
                "react-*",
12
                "react-*/**"
13
              ],
14
              ":BLANK_LINE:"
15
            ]
16
          }
17
        }
18
      }
19
    }
20
  }
21
}

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

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import lib from “lib”;
      │ ^^^^^^^^^^^^^^^^^^^^^^
    2 │ import { useState } from “react”;
    3 │ import { render } from “react-dom/client”;
  
  ℹ Safe fix: Organize Imports (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 CSS/style imports last

The following example groups style imports together and place 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.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                "**",
10
                "!**/*.css",
11
                "!**/*.scss"
12
              ],
13
              ":BLANK_LINE:",
14
              [
15
                "**/*.css",
16
                "**/*.scss"
17
              ]
18
            ]
19
          }
20
        }
21
      }
22
    }
23
  }
24
}

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

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import ”./styles/reset.css”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import { useState } from “react”;
    3 │ import styles from ”./Component.module.css”;
  
  ℹ Safe fix: Organize Imports (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.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              [
9
                "vitest",
10
                "vitest/**",
11
                "@testing-library",
12
                "@testing-library/**",
13
                "jest",
14
                "@jest/**"
15
              ],
16
              ":BLANK_LINE:"
17
            ]
18
          }
19
        }
20
      }
21
    }
22
  }
23
}

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";

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { render } from “@testing-library/react”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import { Button } from ”@/components/Button”;
    3 │ import { describe, it, expect } from “vitest”;
  
  ℹ Safe fix: Organize Imports (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:

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              {
9
                "type": true
10
              }
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

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

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { V } from “my-package”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import type { T } from “my-package”;
    3 │ 
  
  ℹ Safe fix: Organize Imports (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.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "organizeImports": {
6
          "options": {
7
            "groups": [
8
              {
9
                "type": false
10
              }
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

The following code…

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

…is organized as:

1
import { V } from "my-package";
2
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…

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useImportType": {
6
          "level": "on",
7
          "options": {
8
            "style": "separatedType"
9
          }
10
        }
11
      }
12
    }
13
  },
14
  "assist": {
15
    "enabled": true,
16
    "actions": {
17
      "source": {
18
        "organizeImports": "on"
19
      }
20
    }
21
  }
22
}

…the following code…

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

…is organized as:

1
import type { T1, T2 } from "a";
2
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:

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useImportType": {
6
          "level": "on",
7
          "options": {
8
            "style": "inlineType"
9
          }
10
        }
11
      }
12
    }
13
  },
14
  "assist": {
15
    "enabled": true,
16
    "actions": {
17
      "source": {
18
        "organizeImports": "on"
19
      }
20
    }
21
  }
22
}

The following code…

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

…is organized as:

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

How it works

This section provides an in-depth explanation of the internal mechanics of the action.

Import anatomy

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

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

5
export * from "@my/lib" with { "attribute1": "value" };
6
^^^^^^^^       ^^^^^^^         ^^^^^^^^^^^^^^^^^^^^^
7
  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:

Switching between imports and exports
Any statement that is not an import or an export
Bare imports also called side-effect imports (import "polyfill"); Each forms its own chunk.
A comment followed by a blank line that we call a detached comment; See the comment handling section for more details.

The following example shows how imports and exports are chunked.

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

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

13
// New chunk starts here
14
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.

Sorting within a chunk

As described in the preliminary section, Imports and exports of a chunk are sorted by “distance” from the current file.

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

Namespace type import / Namespace type export
Default type import
Named type import / Named type export
Namespace import / Namespace export
Combined default and namespace import
Default import
Combined default and named import
Named import / Named export

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

1
import * as namespaceImport from "same-source";
2
import type * as namespaceTypeImport from "same-source";
3
import type { namedTypeImport } from "same-source";
4
import defaultNamespaceCombined, * as namespaceCombined from "same-source";
5
import defaultNamedCombined, { namedCombined } from "same-source";
6
import defaultImport from "same-source";
7
import type defaultTypeImport from "same-source";
8
import { importWithAttribute } from "same-source" with { "attribute": "value" } ;

is sorted as follows:

1
import { importWithAttribute } from "same-source" with { "attribute": "value" } ;
2
import type * as namespaceTypeImport from "same-source";
3
import type defaultTypeImport from "same-source";
4
import type { namedTypeImport } from "same-source";
5
import * as namespaceImport from "same-source";
6
import defaultNamespaceCombined, * as namespaceCombined from "same-source";
7
import defaultImport from "same-source";
8
import defaultNamedCombined, { namedCombined } from "same-source";

This kind order cannot be changed.

Named specifier and attribute sorting

Named imports, named exports, and import attributes are also sorted, as shown in the following example.

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" };

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

  ℹ The imports and exports are not sorted.
  
  > 1 │ import { a, b, A, B, c10, c9 } from “a”;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
    3 │ export { a, b, A, B, c10, c9 } from “a”;
  
  ℹ Safe fix: Organize Imports (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…

1
import type { T1 } from "package";
2
import type { T2 } from "package";
3
import * as ns from "package";
4
import D1 from "package";
5
import D2 from "package";
6
import { A } from "package";
7
import { B } from "package";
8
import { type T3 } from "package";

…becomes:

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

With useImportType set to separatedType, the result is:

1
import type { T1, T2, T3 } from "package";
2
import D1, * as ns from "package";
3
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, i.e. 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…

1
// Copyright notice and file header comment
2
import F from "f";
3
// Attached comment for `e`
4
import E from "e";
5
// Attached comment for `d`
6
import D from "d";
7
// Detached comment (new chunk)
8

9
// Attached comment for `b`
10
import B from "b";
11
// Attached comment for `a`
12
import A from "a";

…becomes:

1
// Copyright notice and file header comment
2

3
// Attached comment for `d`
4
import D from "d";
5
// Attached comment for `e`
6
import E from "e";
7
import F from "f";
8

9
// Detached comment (new chunk)
10

11
// Attached comment for `a`
12
import A from "a";
13
// Attached comment for `b`
14
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 \.

organizeImports

Summary

How to enable in your editor

How to configure

Description

Options

groups

Predefined groups

Type-only matcher

identifierOrder

Common configurations

Group Node.js and bun built-in

Group monorepo packages

Group multiple libraries

Place CSS/style imports last

Group test utilities together

Group import type and group export type

Maximize import merging with useImportType

How it works

Import anatomy

Chunks

Sorting within a chunk

Named specifier and attribute sorting

Import and export merging

Comment handling

Supported glob patterns

Related links

`groups`

`identifierOrder`

Group `import type` and group `export type`

Maximize import merging with `useImportType`