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
- Combines imports from the same source
- Combines type and value imports (if
importOrderTypeScriptVersionis 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
- Sample
- Install
- Usage
- FAQ / Troubleshooting
- Compatibility
- Contribution
- Disclaimer
// prettier-ignore
import { environment } from "./misguided-module-with-side-effects.js";
import "core-js/stable";
import "regenerator-runtime/runtime";
import React, {
FC,
useEffect,
useRef,
ChangeEvent,
KeyboardEvent,
} from 'react';
import { logger } from '@core/logger';
import { reduce, debounce } from 'lodash';
import { Message } from '../Message';
import { createServer } from '@server/node';
import { Alert } from '@ui/Alert';
import { repeat, filter, add } from '../utils';
import { initializeApp } from '@core/app';
import { Popup } from '@ui/Popup';
import { createConnection } from '@server/database';// prettier-ignore
import { environment } from "./misguided-module-with-side-effects.js";
import "core-js/stable";
import "regenerator-runtime/runtime";
import { debounce, reduce } from 'lodash';
import React, {
ChangeEvent,
FC,
KeyboardEvent,
useEffect,
useRef,
} from 'react';
import { createConnection } from '@server/database';
import { createServer } from '@server/node';
import { initializeApp } from '@core/app';
import { logger } from '@core/logger';
import { Alert } from '@ui/Alert';
import { Popup } from '@ui/Popup';
import { Message } from '../Message';
import { add, filter, repeat } from '../utils';npm
npm install --save-dev @ianvs/prettier-plugin-sort-importsyarn
yarn add --dev @ianvs/prettier-plugin-sort-importspnpm
pnpm add --save-dev @ianvs/prettier-plugin-sort-importsNote: If you are migrating from v3.x.x to v4.x.x, please read the migration guidelines
Add your preferred settings in your prettier config file.
// @ts-check
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
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',
};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 theimportOrder - The third party imports position (it's 2nd by default) can be overridden using the
<THIRD_PARTY_MODULES>special word in theimportOrder.
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 inimportOrder<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:
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';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';If you want to group your imports into "chunks" with blank lines between, you can add empty strings like this:
"importOrder": ["<BUILT_IN_MODULES>", "", "<THIRD_PARTY_MODULES>", "", "^[.]"]e.g.:
import fs from 'fs';
import { debounce, reduce } from 'lodash';
import MyApp from './MyApp';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>^[.]",
"<BUILT_IN_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';If you 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.
"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';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';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>", "^[.]" ]
}
}
]type: string
default value: 1.0.0
When using TypeScript, some import syntax can only be used in newer versions of TypeScript. If you would like to enable modern features like mixed type and value imports, set this option to the semver version string of the TypeScript in use in your project.
type: Array<string>
default value: ["typescript", "jsx"]
Previously known as experimentalBabelParserPluginsList.
A collection of plugins for babel parser. The plugin passes this list to babel parser, so it can understand the syntaxes used in the file being formatted. The plugin uses prettier itself to figure out the parser it needs to use but if that fails, you can use this field to enforce the usage of the plugins' babel parser needs.
To pass the plugins to babel parser:
"importOrderParserPlugins" : ["classProperties", "decorators-legacy"]To pass the options to the babel parser plugins: Since prettier options are limited to string, you can pass plugins
with options as a JSON string of the plugin array:
"[\"plugin-name\", { \"pluginOption\": true }]".
"importOrderParserPlugins" : ["classProperties", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]To disable default plugins for babel parser, pass an empty array:
"importOrderParserPlugins": []This plugin supports standard prettier ignore comments. By default, side-effect imports (like
import "core-js/stable";) are not sorted, so in most cases things should just work. But if you ever need to, you can
prevent an import from getting sorted like this:
// prettier-ignore
import { goods } from "zealand";
import { cars } from "austria";This will keep the zealand import at the top instead of moving it below the austria import. Note that since only
entire import statements can be ignored, line comments (// prettier-ignore) are recommended over inline comments
(/* prettier-ignore */).
We make the following attempts at keeping comments in your imports clean:
- If you have one or more comments at the top of the file, we will keep them at the top.
- Comments on lines after the final import statement will not be moved. (Runtime-code between imports will be moved below all the imports).
- In general, if you place a comment on the same line as an Import
Declarationor*Specifier, we will keep it attached to that same specifier if it moves around. - Other comments are preserved, and are generally considered "leading" comments for the subsequent Import
Declarationor*Specifier.
Having some trouble or an issue? You can check FAQ / Troubleshooting section.
| Framework | Supported | Note |
|---|---|---|
| JS with ES Modules | ✅ Everything | - |
| NodeJS with ES Modules | ✅ Everything | - |
| React | ✅ Everything | - |
| Angular | ✅ Everything | Supported through importOrderParserPlugins API |
| Vue | ✅ Everything | SFCs only, peer dependency @vue/compiler-sfc is required |
| Svelte | Contributions are welcome |
For more information regarding contribution, please check the Contributing Guidelines. If you are trying to debug some code in the plugin, check Debugging Guidelines
This plugin modifies the AST which is against the rules of prettier.