CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-trivago--prettier-plugin-sort-imports

A Prettier plugin that automatically sorts import declarations in JavaScript and TypeScript files according to configurable Regular Expression patterns.

—

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration Options

Comprehensive configuration options for controlling import sorting behavior through Prettier configuration files.

Import Order Configuration

importOrder

Defines the order of import groups using Regular Expression patterns.

importOrder: string[]

Default: [] (empty array)

Array of Regular Expression patterns that define import group ordering. The plugin moves third-party imports to the top by default unless explicitly positioned using <THIRD_PARTY_MODULES>.

Basic Usage

{
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"]
}

Third Party Module Positioning

Use <THIRD_PARTY_MODULES> to explicitly position third-party imports:

{
  "importOrder": [
    "^@core/(.*)$", 
    "<THIRD_PARTY_MODULES>", 
    "^@server/(.*)$", 
    "^@ui/(.*)$", 
    "^[./]"
  ]
}

Type Import Positioning

Use special keywords for TypeScript type imports:

  • <THIRD_PARTY_TS_TYPES>: Third-party type imports
  • <TS_TYPES>: Local type imports
{
  "importOrder": [
    "<THIRD_PARTY_TS_TYPES>",
    "<THIRD_PARTY_MODULES>",
    "<TS_TYPES>",
    "^[./]"
  ]
}

importOrderSeparation

Controls whether import groups are separated by blank lines.

importOrderSeparation?: boolean

Default: false

When true, adds blank lines between import groups defined by importOrder patterns.

Example

// Configuration
{
  "importOrder": ["^@core/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true
}

// Result
import { logger } from '@core/logger';

import { Alert } from '@ui/Alert';

import { utils } from './utils';

importOrderCaseInsensitive

Enables case-insensitive sorting within import groups.

importOrderCaseInsensitive?: boolean

Default: false

When true, sorts imports within each group case-insensitively.

Example

// With importOrderCaseInsensitive: false
import ExampleView from './ExampleView';
import ExamplesList from './ExamplesList';

// With importOrderCaseInsensitive: true  
import ExamplesList from './ExamplesList';
import ExampleView from './ExampleView';

Specifier Configuration

importOrderSortSpecifiers

Controls sorting of named imports within individual import statements.

importOrderSortSpecifiers?: boolean

Default: false

When true, sorts named imports alphabetically within each import statement.

Example

// Input
import { useEffect, useState, useCallback } from 'react';

// With importOrderSortSpecifiers: true
import { useCallback, useEffect, useState } from 'react';

importOrderGroupNamespaceSpecifiers

Controls positioning of namespace imports within their group.

importOrderGroupNamespaceSpecifiers?: boolean

Default: false

When true, groups namespace specifiers (import * as name) at the top of their import group.

Example

// Input
import { Component } from 'react';
import * as React from 'react';
import { render } from 'react-dom';

// With importOrderGroupNamespaceSpecifiers: true
import * as React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';

Parser Configuration

importOrderParserPlugins

Specifies Babel parser plugins for handling special syntax.

importOrderParserPlugins?: ImportOrderParserPlugin[]

type ImportOrderParserPlugin = 
  | Extract<ParserPlugin, string>
  | `[${string},${string}]`

Default: ["typescript", "jsx"]

Array of Babel parser plugins to enable parsing of specific syntax features. Can include plugin options as JSON strings.

Basic Plugins

{
  "importOrderParserPlugins": ["typescript", "jsx", "classProperties"]
}

Plugins with Options

{
  "importOrderParserPlugins": [
    "typescript",
    "jsx", 
    "[\"decorators\", { \"decoratorsBeforeExport\": true }]"
  ]
}

Disable Default Plugins

{
  "importOrderParserPlugins": []
}

Advanced Configuration

importOrderSideEffects

Controls handling of side-effect imports (imports without specifiers).

importOrderSideEffects?: boolean

Default: true

When true, includes side-effect imports in sorting process. When false, leaves side-effect imports in their original positions.

Example

// Side-effect imports
import 'polyfills';
import './styles.css';
import { Component } from 'react';

importOrderImportAttributesKeyword

Specifies the import attributes/assertions syntax style.

importOrderImportAttributesKeyword?: 'assert' | 'with' | 'with-legacy'

Default: 'with'

Controls the syntax for import attributes:

  • 'with': import data from './data.json' with { type: 'json' }
  • 'assert': import data from './data.json' assert { type: 'json' }
  • 'with-legacy': import data from './data.json' with type: 'json'

When unspecified, Babel generator matches the input code style.

Complete Configuration Example

// prettier.config.js
module.exports = {
  // Standard Prettier options
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  
  // Plugin configuration
  plugins: ["@trivago/prettier-plugin-sort-imports"],
  
  // Import sorting configuration
  importOrder: [
    "^@core/(.*)$",
    "<THIRD_PARTY_MODULES>", 
    "^@server/(.*)$",
    "^@ui/(.*)$", 
    "^[./]"
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderCaseInsensitive: false,
  importOrderGroupNamespaceSpecifiers: true,
  importOrderSideEffects: true,
  importOrderParserPlugins: ["typescript", "jsx", "classProperties"],
  importOrderImportAttributesKeyword: "with"
};

Install with Tessl CLI

npx tessl i tessl/npm-trivago--prettier-plugin-sort-imports

docs

configuration.md

frameworks.md

index.md

processing.md

tile.json