prettier-plugin-sort-imports

Prettier plugin sort imports

A prettier plugin to sort import declarations by provided Regular Expression order, while preserving side-effect import order.

This project is based on @trivago/prettier-plugin-sort-imports, but adds additional features:

Does not re-order across side-effect imports by default
Combines imports from the same source
Combines type and value imports (if importOrderTypeScriptVersion is set to "4.5.0" or higher)
Groups type imports with <TYPES> keyword
Sorts node.js builtin modules to top (configurable with <BUILTIN_MODULES> keyword)
Supports custom import order separation
Handles comments around imports correctly
Simplifies options for easier configuration

We welcome contributions!

Sample
- Input
- Output
Install
Usage
FAQ / Troubleshooting
Compatibility
Contribution
Disclaimer

Sample

Input

…

Output

…

Install

npm

npm install --save-dev @ianvs/prettier-plugin-sort-imports

yarn

yarn add --dev @ianvs/prettier-plugin-sort-imports

pnpm

pnpm add --save-dev @ianvs/prettier-plugin-sort-imports

Note: If you are migrating from v3.x.x to v4.x.x, please read the migration guidelines

Usage

Add your preferred settings in your prettier config file.

// @ts-check

/** @type {import("prettier").Config} */
module.exports = {
    // Standard prettier options
    singleQuote: true,
    semi: true,
    // Since prettier 3.0, manually specifying plugins is required
    plugins: ['@ianvs/prettier-plugin-sort-imports'],
    // This plugin's options
    importOrder: ['^@core/(.*)$', '', '^@server/(.*)$', '', '^@ui/(.*)$', '', '^[./]'],
    importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
    importOrderTypeScriptVersion: '5.0.0',
    importOrderCaseSensitive: false,
};

Usage with @prettier/plugin-oxc

This plugin is compatible with the new '@prettier/plugin-oxc' plugin available for Prettier 3.6+, but must be specified after that plugin in the plugins configuration array (i.e. plugins: ['@prettier/plugin-oxc', '@ianvs/prettier-plugin-sort-imports'],).

How does import sort work?

The plugin extracts the imports which are defined in importOrder. These imports are considered as local imports. The imports which are not part of the importOrder are considered to be third party imports.

First, the plugin checks for side effect imports, such as import 'mock-fs'. These imports often modify the global scope or apply some patches to the current environment, which may affect other imports. To preserve potential side effects, these kind of side effect imports are classified as unsortable. They also behave as a barrier that other imports may not cross during the sort. So for example, let's say you've got these imports:

import E from 'e';
import F from 'f';
import D from 'd';
import 'c';
import B from 'b';
import A from 'a';

Then the first three imports are sorted and the last two imports are sorted, but all imports above c stay above c and all imports below c stay below c, resulting in:

import D from 'd';
import E from 'e';
import F from 'f';
import 'c';
import A from 'a';
import B from 'b';

Additionally, any import statements lines that are preceded by a // prettier-ignore comment are also classified as unsortable. This can be used for edge-cases, such as when you have a named import with side-effects.

Next, the plugin sorts the local imports and third party imports using natural sort algorithm.

By default the plugin returns final imports with nodejs built-in modules, followed by third party imports and subsequent local imports at the end.

The nodejs built-in modules position (it's 1st by default) can be overridden using the <BUILTIN_MODULES> special word in the importOrder
The third party imports position (it's 2nd by default) can be overridden using the <THIRD_PARTY_MODULES> special word in the importOrder.

Options

`importOrder`

type: Array<string>

The main way to control the import order and formatting, importOrder is a collection of Regular expressions in string format, along with a few "special case" strings that you can use.

default value:

[
    '<BUILTIN_MODULES>', // Node.js built-in modules
    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
    '^[.]', // relative imports
],

By default, this plugin sorts as documented on the line above, with Node.js built-in modules at the top, followed by non-relative imports, and lastly any relative import starting with a . character.

Available Special Words:

<BUILTIN_MODULES> - All nodejs built-in modules will be grouped here, and is injected at the top if it's not present.
<THIRD_PARTY_MODULES> - All imports not targeted by another regex will end up here, so this will be injected if not present in importOrder
<TYPES> - Not active by default, this allows you to group all type-imports, or target them with a regex (<TYPES>^[.] targets imports of types from local files).

Here are some common ways to configure importOrder:

1. Put specific dependencies at the top

Some styles call for putting the import of react at the top of your imports, which you could accomplish like this:

"importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^[.]"]

e.g.:

import * as React from 'react';
import cn from 'classnames';
import MyApp from './MyApp';

2. Keep css modules at the bottom

Imports of CSS files are often placed at the bottom of the list of imports, and can be accomplished like so:

"importOrder": ["<THIRD_PARTY_MODULES>", "^(?!.*[.]css$)[./].*$", ".css$"]

e.g.:

import * as React from 'react';
import MyApp from './MyApp';
import styles from './global.css';

3. Add spaces between import groups

If you want to group your imports into "chunks" with blank lines between, you can add empty strings like this:

"importOrder": ["<BUILTIN_MODULES>", "", "<THIRD_PARTY_MODULES>", "", "^[.]"]

e.g.:

import fs from 'fs';

import { debounce, reduce } from 'lodash';

import MyApp from './MyApp';

4. Group type imports separately from values

If you're using Flow or TypeScript, you might want to separate out your type imports from imports of values. And to be especially fancy, you can even group built-in types (if you're using node: imports), 3rd party types, and your own local type imports separately:

"importOrder": [
    "<TYPES>^(node:)",
    "<TYPES>",
    "<TYPES>^[.]",
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "^[.]"
]

e.g.:

import type { Logger } from '@tanstack/react-query';
import type { Location } from 'history';
import type {Props} from './App';
import { QueryClient} from '@tanstack/react-query';
import { createBrowserHistory } from 'history';
import App from './App';

5. Group subpath import style local aliases

If you are using subpath imports (local imports starting with "#"), you can include those in your importOrder to keep them grouped with your local code, perhaps just above your relative imports, as shown below.

"importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^#.+",
    "^[.]"]

e.g.:

import { debounce, reduce } from 'lodash';
import { Users } from '#api';
import icon from '#assets/icon';
import App from './App';

6. Group aliases with local imports

If you use some other method to define non-relative aliases to refer to local files without long chains of "../../../", you can include those aliases in your importOrder to keep them grouped with your local code. If you use the common @ symbol for these aliases, you may want some way to group them separately from scoped npm packages, which can be done like this:

"importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^(@api|@assets|@ui)(/.*)$",
    "^[.]"]

e.g.:

import { debounce, reduce } from 'lodash';
import { Users } from '@api';
import icon from '@assets/icon';
import App from './App';

7. Enforce a blank line after top of file comments

If you have pragma-comments at the top of file, or you have boilerplate copyright announcements, you may be interested in separating that content from your code imports, you can add that separator first.

"importOrder": [
    "",
    "^[.]"
]

e.g.:

/**
 * @prettier
 */

import { promises } from 'fs';
import { Users } from '@api';
import icon from '@assets/icon';
import App from './App';

8. Enable/disable plugin or use different order in certain folders or files

If you'd like to sort the imports only in a specific set of files or directories, you can disable the plugin by setting importOrder to an empty array, and then use Prettier's Configuration Overrides to set the order for files matching a glob pattern.

This can also be beneficial for large projects wishing to gradually adopt a sort order in a less disruptive approach than a single big-bang change.

"importOrder": []
"overrides": [
    {
        "files": "**/*.test.ts",
        "options": {
            "importOrder": [ "^vitest", "<THIRD_PARTY_MODULES>", "^[.]" ]
        }
    }
]

You can also do this in reverse, where the plugin is enabled globally, but disabled for a set of files or directories in the overrides configuration. It is also useful for setting a different sort order to use in certain files or directories instead of the global sort order.

`importOrderSafeSideEffects`

type: Array<string>

default value: []

In general, it is not safe to reorder imports that do not actually import anything (side-effect-only imports), because these imports are affecting the global scope, the order in which they occur can be important.

However, in some cases, you may know that some of your side-effect imports can be sorted along with normal imports. For example, import "server-only" can be used in some React applications to ensure some code only runs on the server. For these case

prettier-plugin-sort-imports

About