Prettier 27 🎨 Import Sorting Plugins — @ianvs/prettier-plugin-sort-imports & alternatives - KandZ

⏱️ Estimated read: 11 min | |

Prettier does not sort imports. It formats the imports that exist, but it leaves their order exactly as written. The sorting is a separate concern, and it is provided by plugins. The three that matter are @trivago/prettier-plugin-sort-imports, which is the original regex-based sorter, @ianvs/prettier-plugin-sort-imports, which is a fork of the original with safer defaults, and prettier-plugin-organize-imports, which is not a sorter in the same sense—it runs the TypeScript language service’s “Organize Imports” action, which sorts and also removes unused imports . The choice between them is a choice about safety, not about features.

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

The @ianvs plugin is the one the comparison articles recommend for a project that wants a custom import order. It does not move side-effect imports, it merges duplicate imports from the same module, and it requires less configuration than the trivago original . The trivago plugin is the original, it is still maintained, and its configuration is the one that most existing projects use. The organize-imports plugin is the zero-config option, but it has a critical limitation: with TypeScript 7, it silently does nothing . The limitation is the reason the plugin is not a general recommendation, even though it is the only one that removes unused imports.

Key point: @ianvs/prettier-plugin-sort-imports is the safer fork of the trivago plugin. It preserves side-effect imports, merges duplicate imports, and supports the <TYPES> and <BUILTIN_MODULES> special words. prettier-plugin-organize-imports removes unused imports but is incompatible with TypeScript 7. The trivago plugin is the original and is still maintained.

Why the sorting plugins are separate from Prettier

The opinionated formatter problem. Prettier’s design philosophy is to make formatting decisions and to make very few of them configurable. The order of imports is a decision that varies by project—some projects want React first, some want built-ins first, some want CSS at the bottom. Prettier does not want to own that decision, so it leaves the imports in place and exposes a plugin API for the projects that want to sort them . The plugin is the mechanism that adds the sorting without adding the opinion to Prettier itself.

The side-effect problem. Not all imports are safe to reorder. An import that does not bind a name—import './polyfills' or import './styles.css'—is a side-effect import, and its order can affect the runtime. The CSS cascade depends on the order of the CSS imports, and a polyfill must load before the code that depends on it. The @ianvs plugin preserves the side-effect imports by default, and the trivago plugin moves them by default unless importOrderSideEffects is set to false . The difference is the reason the @ianvs plugin is the safer default for a new project.

The duplicate-import problem. A file can import from the same module more than once—a value import and a type import, or two separate imports that were added at different times. The @ianvs plugin merges the imports when it is safe, and the trivago plugin does not . The merging is a formatting improvement, but it is also a semantic decision: merging a type import and a value import changes the output syntax, and the @ianvs plugin has a importOrderTypeScriptVersion option that controls whether the merging is enabled based on the project’s TypeScript version .

The trade-off. The @ianvs plugin is the safer choice, but it is a fork, and a fork carries a maintenance risk that the original does not. The trivago plugin has a larger download count and a longer history, and it is the one that the ant-design project used before switching to the @ianvs fork . The organize-imports plugin is the only one that removes unused imports, but the TypeScript 7 incompatibility makes it unsuitable for a project that has upgraded. The choice is the trade-off between safety, maintenance, and features.

a. The `@ianvs` plugin configuration

The @ianvs plugin is configured with the importOrder array. The array contains regular expressions and special words. The default order is built-in modules, third-party modules, and relative imports .

// .prettierrc — the @ianvs plugin
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "^[.]"
  ]
}

The <BUILTIN_MODULES> and <THIRD_PARTY_MODULES> special words are the mechanism for the default groups. The <TYPES> special word is the mechanism for grouping type imports separately. The "" empty string is the mechanism for adding a blank line between groups .

// .prettierrc — the @ianvs plugin with type grouping
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "<TYPES>",
    "",
    "^[.]"
  ]
}

The <TYPES> word groups the type imports, and the empty strings add the blank lines between the groups. The importOrderSafeSideEffects option is the escape hatch for a side-effect import that is known to be safe to reorder, such as import "server-only" . The option accepts an array of regex patterns that match the side-effect imports that can be sorted.

b. The trivago plugin and the organize-imports plugin

The trivago plugin is the original, and its configuration is similar to the @ianvs plugin’s. The main difference is the side-effect behavior and the duplicate-import behavior.

// .prettierrc — the trivago plugin
{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^[.]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

The importOrderSeparation option is the blank-line mechanism, and the importOrderSortSpecifiers option is the named-import sorting mechanism . The importOrderSideEffects option is the side-effect behavior, and it defaults to true, which means the trivago plugin moves the side-effect imports by default . The importOrderCaseInsensitive option is the case-sensitivity control.

The organize-imports plugin is the different case. It does not use an importOrder array. It runs the TypeScript language service’s “Organize Imports” action, which sorts the imports alphabetically and removes the unused ones.

// .prettierrc — the organize-imports plugin
{
  "plugins": ["prettier-plugin-organize-imports"]
}

The plugin’s value is the unused-import removal, which the other two plugins do not provide. The plugin’s limitation is the TypeScript 7 incompatibility: the plugin silently does nothing when the project is on TypeScript 7 . The limitation is the reason the article recommends it only for a project on TypeScript 6 or older.

Complete Example Session

// ============================================
// PART 1: THE @ianvs PLUGIN
// ============================================

// .prettierrc
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "<TYPES>",
    "",
    "^[.]"
  ]
}

// The plugin sorts the imports and preserves the side-effect imports.

// ============================================
// PART 2: THE INPUT
// ============================================

// src/app.ts
import styles from './styles.css';
import { useState } from 'react';
import fs from 'node:fs';
import { Button } from './Button';
import type { User } from './types';

// The side-effect import (styles.css) is preserved in place.

// ============================================
// PART 3: THE OUTPUT
// ============================================

// src/app.ts (after formatting)
import fs from 'node:fs';

import { useState } from 'react';

import type { User } from './types';

import styles from './styles.css';
import { Button } from './Button';

// The built-in, third-party, type, and relative groups are separated.
// The side-effect import stays where it was.

// ============================================
// PART 4: THE TRIVAGO PLUGIN
// ============================================

// .prettierrc
{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^[.]"],
  "importOrderSeparation": true,
  "importOrderSideEffects": false
}

// The importOrderSideEffects: false preserves the side-effect imports.
// The importOrderSeparation: true adds the blank lines.

// ============================================
// PART 5: THE ORGANIZE-IMPORTS PLUGIN
// ============================================

// .prettierrc
{
  "plugins": ["prettier-plugin-organize-imports"]
}

// The plugin removes the unused imports and sorts the rest.
// It does not use an importOrder array.
// It is incompatible with TypeScript 7.

// ============================================
// PART 6: THE COMPARISON
// ============================================

// @ianvs:    custom order, preserves side-effects, merges duplicates.
// trivago:   custom order, moves side-effects by default.
// organize:  alphabetical, removes unused, incompatible with TS 7.

// ============================================
// PART 7: THE SAFE-SIDE-EFFECTS OPTION
// ============================================

// .prettierrc — the @ianvs plugin
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrderSafeSideEffects": ["^server-only$"]
}

// The server-only import can be sorted with the rest.
// The other side-effect imports are preserved.

// ============================================
// PART 8: THE TYPE GROUPING
// ============================================

// .prettierrc — the @ianvs plugin with type grouping
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<TYPES>^(node:)",
    "<TYPES>",
    "<TYPES>^[.]",
    "^[.]"
  ]
}

// The built-in types, third-party types, and local types
// are grouped separately.

// ============================================
// PART 9: THE OVERRIDES
// ============================================

// .prettierrc — the @ianvs plugin with overrides
{
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": ["<THIRD_PARTY_MODULES>", "^[.]"],
  "overrides": [
    {
      "files": "**/*.test.ts",
      "options": {
        "importOrder": ["^vitest", "<THIRD_PARTY_MODULES>", "^[.]"]
      }
    }
  ]
}

// The test files have a different order.

// ============================================
// PART 10: THE CHECKLIST
// ============================================

// [ ] The plugin is installed as a dev dependency.
// [ ] The plugin is in the Prettier plugins array.
// [ ] The importOrder array is configured.
// [ ] The side-effect behavior is verified.
// [ ] The type grouping is configured if needed.
// [ ] The TypeScript version is checked if organize-imports is used.

The ten parts covered the @ianvs plugin, the input, the output, the trivago plugin, the organize-imports plugin, the comparison, the safe-side-effects option, the type grouping, the overrides, and the checklist. The through-line is that the three plugins are different trade-offs, and the @ianvs plugin is the safer default.

Quick Reference

The three plugins

Plugin	Custom order	Side-effects	Unused imports	TypeScript 7
`@ianvs`	Yes	Preserved	No	Yes
`@trivago`	Yes	Moved (default)	No	Yes
`organize-imports`	No (alphabetical)	Moved	Yes	No

The `@ianvs` special words

Word	Purpose
`<BUILTIN_MODULES>`	Node.js built-ins
`<THIRD_PARTY_MODULES>`	Third-party packages
`<TYPES>`	Type imports
`""`	Blank line between groups

The options

Option	Plugin	Purpose
`importOrder`	Both	The sort order
`importOrderSeparation`	trivago	Blank lines
`importOrderSortSpecifiers`	trivago	Named-import sorting
`importOrderSafeSideEffects`	@ianvs	Side-effect escape hatch

Best Practices

✅ Do This:

// Use @ianvs for a new project
"plugins": ["@ianvs/prettier-plugin-sort-imports"]                 // ✅

// Preserve the side-effect imports
// The @ianvs plugin preserves them by default.                    // ✅

// Group the type imports separately
"importOrder": ["<TYPES>", "<THIRD_PARTY_MODULES>", "^[.]"]      // ✅

❌ Don’t Do This:

// Use organize-imports with TypeScript 7
"plugins": ["prettier-plugin-organize-imports"] // silently does nothing // ❌

// Move the CSS imports with the trivago plugin
// The default moves them; set importOrderSideEffects: false.      // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
The side-effect imports move	The trivago default moves them	Set `importOrderSideEffects: false`
The plugin does nothing	organize-imports with TS 7	Use `@ianvs` instead
The type imports are not grouped	`<TYPES>` is not active by default	Add `<TYPES>` to `importOrder`
The CSS imports are in the wrong order	The CSS cascade depends on the order	Preserve the side-effect imports

Real-World Examples

1. The `@ianvs` plugin

{ "plugins": ["@ianvs/prettier-plugin-sort-imports"] }

2. The trivago plugin

{ "plugins": ["@trivago/prettier-plugin-sort-imports"] }

3. The organize-imports plugin

{ "plugins": ["prettier-plugin-organize-imports"] }

4. The default order

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

5. The type grouping

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

6. The safe side-effects

"importOrderSafeSideEffects": ["^server-only$"]

7. The trivago side-effect fix

"importOrderSideEffects": false

8. The overrides

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

9. The React-first order

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

10. The CSS-bottom order

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

Visual

The Three Plugins

┌──────────────────────────────────────────────────────────────┐
│  SORTING, SIDE-EFFECTS, AND UNUSED IMPORTS                    │
│                                                              │
│  @ianvs                     trivago              organize   │
│  ┌─────────────────────┐   ┌─────────────┐      ┌─────────┐ │
│  │ Custom order        │   │ Custom order│      │ Alpha   │ │
│  │ Side-effects kept   │   │ Side-effects│      │ Unused  │ │
│  │ Duplicates merged   │   │ moved       │      │ removed │ │
│  │                     │   │             │      │         │ │
│  │ TS 7 compatible     │   │ TS 7        │      │ TS 7    │ │
│  │                     │   │ compatible  │      │ broken  │ │
│  └─────────────────────┘   └─────────────┘      └─────────┘ │
└──────────────────────────────────────────────────────────────┘

The Type Grouping

┌──────────────────────────────────────────────────────────────┐
│  <TYPES> GROUPS THE TYPE IMPORTS                              │
│                                                              │
│  import type { User } from './types';                        │
│  import { useState } from 'react';                           │
│                                                              │
│  With <TYPES>:                                               │
│  ┌─────────────────────┐                                    │
│  │ import type { User }│  ← type group                      │
│  │                     │                                    │
│  │ import { useState } │  ← value group                     │
│  └─────────────────────┘                                    │
└──────────────────────────────────────────────────────────────┘

The Side-Effect Preservation

┌──────────────────────────────────────────────────────────────┐
│  SIDE-EFFECT IMPORTS ARE NOT SAFE TO MOVE                     │
│                                                              │
│  import './styles.css';                                      │
│  import './polyfills';                                       │
│                                                              │
│  The @ianvs plugin preserves the order by default.           │
│  The trivago plugin moves them unless configured.            │
│  The CSS cascade depends on the order.                       │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
`@ianvs`	Safer fork, preserves side-effects, merges duplicates
`@trivago`	Original, moves side-effects by default
`organize-imports`	Removes unused imports, incompatible with TS 7
Special words	`<BUILTIN_MODULES>`, `<THIRD_PARTY_MODULES>`, `<TYPES>`
Blank lines	`""` in `importOrder`
Side-effect escape hatch	`importOrderSafeSideEffects`

Key takeaways:

Prettier does not sort imports; the plugins do. The @ianvs plugin is the safer default for a new project because it preserves side-effect imports and merges duplicate imports. The trivago plugin is the original and is still maintained, but it moves side-effect imports by default .
The @ianvs plugin is a fork of the trivago plugin with safer defaults. It adds the <BUILTIN_MODULES> and <TYPES> special words, the duplicate-import merging, and the side-effect preservation. The trivago plugin has the larger download count and the longer history .
prettier-plugin-organize-imports is the only one that removes unused imports. It runs the TypeScript language service’s “Organize Imports” action, but it silently does nothing with TypeScript 7. A project on TypeScript 6 or older can use it; a project on TypeScript 7 cannot .
The side-effect imports are the safety boundary. A CSS import, a polyfill, or a server-only import has an order-dependent effect. The @ianvs plugin preserves the side-effect imports by default, and the importOrderSafeSideEffects option is the escape hatch for the ones that are known to be safe .
The <TYPES> special word groups the type imports. The option is not active by default, and it must be added to the importOrder array. The importOrderTypeScriptVersion option controls the syntax that the plugin emits for the type imports .

Remember: The import-sorting plugins are a choice about safety, not about features. The @ianvs plugin is the safer default because it preserves the side-effect imports and merges the duplicates. The trivago plugin is the original, and it is still maintained, but its default moves the side-effect imports. The organize-imports plugin is the only one that removes the unused imports, but the TypeScript 7 incompatibility makes it unsuitable for a modern project. The importOrder array is the configuration, and the special words are the groups. The side-effect imports are the boundary, and the @ianvs plugin respects it.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!