or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdframeworks.mdindex.mdprocessing.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@trivago/prettier-plugin-sort-imports@5.2.x

To install, run

npx @tessl/cli install tessl/npm-trivago--prettier-plugin-sort-imports@5.2.0

index.mddocs/

Prettier Plugin Sort Imports

A Prettier plugin that automatically sorts import declarations in JavaScript and TypeScript files according to configurable Regular Expression patterns. It enables developers to maintain consistent import organization across their codebase by defining custom import groups with configurable separation and sorting rules.

Package Information

  • Package Name: @trivago/prettier-plugin-sort-imports
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @trivago/prettier-plugin-sort-imports
  • Node Engine: Requires Node.js >18.12

Peer Dependencies

Required:

  • prettier: 2.x - 3.x

Optional Framework Support:

  • @vue/compiler-sfc: 3.x (for Vue Single File Components)
  • prettier-plugin-svelte: 3.x (for Svelte components)
  • svelte: 4.x || 5.x (for Svelte components)

Installing Framework Support

For Vue support:

npm install --save-dev @vue/compiler-sfc

For Svelte support:

npm install --save-dev prettier-plugin-svelte svelte

Core Imports

The plugin is imported as a Prettier plugin configuration object:

// In prettier.config.js or .prettierrc.js
module.exports = {
  // ... your prettier config
  plugins: ["@trivago/prettier-plugin-sort-imports"],
  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true
};

For package manager compatibility (pnpm, prettier v3.x):

module.exports = {
  plugins: ["@trivago/prettier-plugin-sort-imports"],
  // ... configuration options
};

Basic Usage

The plugin automatically processes files when Prettier runs. Configure import ordering through Prettier configuration:

// prettier.config.js
module.exports = {
  printWidth: 80,
  tabWidth: 4,
  trailingComma: "all",
  singleQuote: true,
  semi: true,
  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true
};

Input code:

import React, { FC, useEffect, useRef } 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';

Output after formatting:

import { debounce, reduce } from 'lodash';
import React, { FC, useEffect, useRef } from 'react';

import { createServer } from '@server/node';

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

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

import { Message } from '../Message';

Architecture

The plugin integrates with Prettier's parser system to preprocess import statements before standard formatting:

  • Parser Integration: Extends existing Prettier parsers (babel, typescript, flow, vue, svelte)
  • AST Processing: Uses Babel for parsing and code generation to maintain syntactic accuracy
  • Preprocessing Pipeline: Processes imports before Prettier's formatting stage
  • Configuration System: Leverages Prettier's option system for seamless integration

Capabilities

Plugin Configuration

Core plugin export containing parser configurations and option definitions for Prettier integration.

interface PluginExport {
  parsers: {
    babel: Parser;
    flow: Parser;
    typescript: Parser;
    vue: Parser;
    svelte?: Parser;
  };
  options: {
    importOrder: Option;
    importOrderCaseInsensitive: Option;
    importOrderParserPlugins: Option;
    importOrderSeparation: Option;
    importOrderGroupNamespaceSpecifiers: Option;
    importOrderSortSpecifiers: Option;
    importOrderSideEffects: Option;
    importOrderImportAttributesKeyword: Option;
  };
}

Configuration Options

Import Processing

Core preprocessing functionality that analyzes and sorts import statements according to configured patterns.

function preprocessor(code: string, options: PrettierOptions): string;

function defaultPreprocessor(code: string, options: PrettierOptions): string;

Import Processing

Framework Support

Specialized preprocessors for Vue Single File Components and Svelte files with framework-aware import handling.

function vuePreprocessor(code: string, options: PrettierOptions): string;

function sveltePreprocessor(code: string, options: PrettierOptions): string;

Framework Support

Types

Configuration Types

interface PluginConfig {
  importOrder: string[];
  importOrderSeparation?: boolean;
  importOrderSortSpecifiers?: boolean;
  importOrderGroupNamespaceSpecifiers?: boolean;
  importOrderCaseInsensitive?: boolean;
  importOrderParserPlugins?: ImportOrderParserPlugin[];
  importOrderImportAttributesKeyword?: 'assert' | 'with' | 'with-legacy';
}

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

type PrettierConfig = PluginConfig & Config;

Internal Processing Types

interface PrettierOptions extends Required<PluginConfig>, RequiredOptions {}

type ImportGroups = Record<string, ImportDeclaration[]>;

type ImportOrLine = ImportDeclaration | ExpressionStatement;

interface ImportChunk {
  nodes: ImportDeclaration[];
  type: string;
}