@trivago/prettier-plugin-sort-imports

To prevent the plugin from reordering any import statements in a specific file, add the following comment at the very top of that file:

// sort-imports-ignore

// sort-imports-ignore
import a from 'a';
import b from 'b';

To use the plugin, add the importOrder configuration to your Prettier config file.

Important: If you are using pnpm or Prettier v3.x, you may need to explicitly include the plugin in your configuration to ensure it is loaded correctly.

module.exports = {
  "printWidth": 80,
  "tabWidth": 4,
  "trailingComma": "all",
  "singleQuote": true,
  "semi": true,
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

Install the plugin as a development dependency using your preferred package manager.

Note for Vue users: If you are formatting .vue SFC files, ensure @vue/compiler-sfc is installed in your dependency tree.

# npm
npm install --save-dev @trivago/prettier-plugin-sort-imports

# yarn
yarn add --dev @trivago/prettier-plugin-sort-imports

# pnpm
pnpm add -D @trivago/prettier-plugin-sort-imports

To use the @trivago/prettier-plugin-sort-imports plugin in any project, first install the package, then run the Prettier CLI targeting your source files (e.g., TypeScript, TSX, or JavaScript files) with the --write flag.

./node_modules/.bin/prettier --write '**/*.{ts,tsx,js}'

To run the provided example script within the repository using the local configuration, use the following command:

yarn run example examples/example.ts --config .prettierrc

When upgrading from version 2 to version 3, apply the following changes to your Prettier configuration:

1. Rename Parser Plugins: Replace the deprecated experimentalBabelParserPluginsList with importOrderParserPlugins.
2. Sort Import Specifiers: Use the importOrderSortSpecifiers boolean flag to enable sorting of specifiers within an import declaration (e.g., { b, a } becomes { a, b }).
3. Control Third-Party Placement: Use the special <THIRD_PARTY_MODULES> token within your importOrder array to define exactly where third-party imports should be positioned relative to your local/internal modules.
4. Case Sensitivity: Use importOrderCaseInsensitive to disable case-sensitive sorting if desired.
5. Group Separation: Use importOrderSeparation to add separation between different import groups.

To prevent the plugin from reordering imports in a specific file (e.g., to ensure a polyfill is loaded first), add the // sort-imports-ignore comment at the top of the file.

// sort-imports-ignore
import './polyfills';

import foo from 'foo';

To debug the plugin's execution, you can insert debugger statements in the source code and run Prettier with the --inspect-brk flag. This command points to the compiled plugin entry point and uses the local configuration to format the example file.

yarn run compile && node --inspect-brk ./node_modules/.bin/prettier --config .prettierrc --plugin lib/src/index.js examples/example.ts

To debug the project's unit tests, insert debugger statements in the test files and run Jest with the --inspect-brk flag.

To run all tests:

node --inspect-brk ./node_modules/.bin/jest -i

To debug a specific unit test file, provide the name or relative path:

node --inspect-brk ./node_modules/.bin/jest -i <name-or-relative-path-of-the-file-file>

A collection of plugins for the Babel parser to support specific syntaxes. This is useful for frameworks like Angular or when using experimental decorators.

Type: Array<string>
Default: ["typescript", "jsx"]

To pass options to a plugin, pass it as a JSON string within the array: "[\"decorators\", { \"decoratorsBeforeExport\": true }]".