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

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;
}

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