0
# Prettier Plugin Sort Imports
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @trivago/prettier-plugin-sort-imports
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install --save-dev @trivago/prettier-plugin-sort-imports`
10
- **Node Engine**: Requires Node.js >18.12
11

12
### Peer Dependencies
13

14
**Required:**
15
- `prettier`: 2.x - 3.x
16

17
**Optional Framework Support:**
18
- `@vue/compiler-sfc`: 3.x (for Vue Single File Components)
19
- `prettier-plugin-svelte`: 3.x (for Svelte components)
20
- `svelte`: 4.x || 5.x (for Svelte components)
21

22
#### Installing Framework Support
23

24
For Vue support:
25
```bash
26
npm install --save-dev @vue/compiler-sfc
27
```
28

29
For Svelte support:
30
```bash
31
npm install --save-dev prettier-plugin-svelte svelte
32
```
33

34
## Core Imports
35

36
The plugin is imported as a Prettier plugin configuration object:
37

38
```javascript
39
// In prettier.config.js or .prettierrc.js
40
module.exports = {
41
  // ... your prettier config
42
  plugins: ["@trivago/prettier-plugin-sort-imports"],
43
  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
44
  importOrderSeparation: true,
45
  importOrderSortSpecifiers: true
46
};
47
```
48

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

51
```javascript
52
module.exports = {
53
  plugins: ["@trivago/prettier-plugin-sort-imports"],
54
  // ... configuration options
55
};
56
```
57

58
## Basic Usage
59

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

62
```javascript
63
// prettier.config.js
64
module.exports = {
65
  printWidth: 80,
66
  tabWidth: 4,
67
  trailingComma: "all",
68
  singleQuote: true,
69
  semi: true,
70
  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
71
  importOrderSeparation: true,
72
  importOrderSortSpecifiers: true
73
};
74
```
75

76
Input code:
77
```javascript
78
import React, { FC, useEffect, useRef } from 'react';
79
import { logger } from '@core/logger';
80
import { reduce, debounce } from 'lodash';
81
import { Message } from '../Message';
82
import { createServer } from '@server/node';
83
import { Alert } from '@ui/Alert';
84
```
85

86
Output after formatting:
87
```javascript
88
import { debounce, reduce } from 'lodash';
89
import React, { FC, useEffect, useRef } from 'react';
90

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

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

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

97
import { Message } from '../Message';
98
```
99

100
## Architecture
101

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

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

109
## Capabilities
110

111
### Plugin Configuration
112

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

115
```typescript { .api }
116
interface PluginExport {
117
  parsers: {
118
    babel: Parser;
119
    flow: Parser;
120
    typescript: Parser;
121
    vue: Parser;
122
    svelte?: Parser;
123
  };
124
  options: {
125
    importOrder: Option;
126
    importOrderCaseInsensitive: Option;
127
    importOrderParserPlugins: Option;
128
    importOrderSeparation: Option;
129
    importOrderGroupNamespaceSpecifiers: Option;
130
    importOrderSortSpecifiers: Option;
131
    importOrderSideEffects: Option;
132
    importOrderImportAttributesKeyword: Option;
133
  };
134
}
135
```
136

137
[Configuration Options](./configuration.md)
138

139
### Import Processing
140

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

143
```typescript { .api }
144
function preprocessor(code: string, options: PrettierOptions): string;
145

146
function defaultPreprocessor(code: string, options: PrettierOptions): string;
147
```
148

149
[Import Processing](./processing.md)
150

151
### Framework Support
152

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

155
```typescript { .api }
156
function vuePreprocessor(code: string, options: PrettierOptions): string;
157

158
function sveltePreprocessor(code: string, options: PrettierOptions): string;
159
```
160

161
[Framework Support](./frameworks.md)
162

163
## Types
164

165
### Configuration Types
166

167
```typescript { .api }
168
interface PluginConfig {
169
  importOrder: string[];
170
  importOrderSeparation?: boolean;
171
  importOrderSortSpecifiers?: boolean;
172
  importOrderGroupNamespaceSpecifiers?: boolean;
173
  importOrderCaseInsensitive?: boolean;
174
  importOrderParserPlugins?: ImportOrderParserPlugin[];
175
  importOrderImportAttributesKeyword?: 'assert' | 'with' | 'with-legacy';
176
}
177

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

182
type PrettierConfig = PluginConfig & Config;
183
```
184

185
### Internal Processing Types
186

187
```typescript { .api }
188
interface PrettierOptions extends Required<PluginConfig>, RequiredOptions {}
189

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

192
type ImportOrLine = ImportDeclaration | ExpressionStatement;
193

194
interface ImportChunk {
195
  nodes: ImportDeclaration[];
196
  type: string;
197
}
198
```