终极指南：如何使用@trivago/prettier-plugin-sort-imports优化代码结构

@trivago/prettier-plugin-sort-imports是一款强大的Prettier插件，能够按照自定义的正则表达式规则对TypeScript和JavaScript文件中的导入声明进行排序，帮助开发者保持一致的代码结构和提高代码可读性。

为什么需要优化导入排序？

在大型项目开发中，随着代码库的增长，导入语句往往会变得杂乱无章。不同开发者可能有不同的导入习惯，导致代码风格不统一，降低了代码的可维护性。@trivago/prettier-plugin-sort-imports通过自动化的方式解决了这个问题，让导入语句始终保持有序和一致。

排序前后对比

排序前的导入：

import React, {
    FC,
    useEffect,
    useRef,
    ChangeEvent,
    KeyboardEvent,
} from 'react';
import { logger } from '@core/logger';
import { reduce, debounce } from 'lodash-es';
import { Message } from '../Message';
import { createServer } from '@server/node';
import { Alert } from '@ui/Alert';
import { repeat, filter, add } from '../utils';
import { initializeApp } from '@core/app';
import { Popup } from '@ui/Popup';
import { createConnection } from '@server/database';

排序后的导入：

import { debounce, reduce } from 'lodash-es';
import React, {
    ChangeEvent,
    FC,
    KeyboardEvent,
    useEffect,
    useRef,
} from 'react';

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

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

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

import { Message } from '../Message';
import { add, filter, repeat } from '../utils';

快速安装步骤

使用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

注意：如果您正在从v2.x.x迁移到v3.x.x，请阅读迁移指南。对于Vue单文件组件，需要安装@vue/compiler-sfc依赖。

基础配置方法

在Prettier配置文件中添加导入排序规则，以下是一个典型的配置示例：

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"]
}

核心配置选项详解

importOrder

类型: Array<string>
作用: 定义导入排序的正则表达式规则。

示例:

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

特殊标识符:

• <THIRD_PARTY_MODULES>: 第三方模块位置标记
• <BUILTIN_MODULES>: Node.js内置模块位置标记

importOrderSeparation

类型: boolean
默认值: false
作用: 启用或禁用导入组之间的空行分隔。

importOrderSortSpecifiers

类型: boolean
默认值: false
作用: 启用或禁用导入声明中specifiers的排序。

示例:

// 排序前
import { a, d, c, b } from 'some-package'

// 排序后
import { a, b, c, d } from 'some-package'

importOrderCaseInsensitive

类型: boolean
默认值: false
作用: 启用或禁用排序算法的大小写敏感性。

importOrderParserPlugins

类型: Array<string>
默认值: ["typescript", "jsx"]
作用: 传递给Babel解析器的插件列表，用于支持特殊语法。

示例:

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

高级使用技巧

自定义第三方模块位置

通过在importOrder中使用<THIRD_PARTY_MODULES>特殊标记，可以将第三方模块放置在任何位置：

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

忽略特定文件的排序

在文件顶部添加// sort-imports-ignore注释，可以排除该文件的导入排序：

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

import foo from 'foo'

按字符串长度排序

使用importOrderSortByLength选项可以按导入路径的长度排序：

"importOrderSortByLength": "asc" // 升序排列
// 或
"importOrderSortByLength": "desc" // 降序排列

框架兼容性

框架	支持情况	注意事项
JS with ES Modules	✅ 完全支持	-
NodeJS with ES Modules	✅ 完全支持	-
Angular	✅ 完全支持	需要通过importOrderParserPlugins配置
Ember	✅ 完全支持	需要prettier-plugin-ember-template-tag
React	✅ 完全支持	-
Solid	✅ 完全支持	-
Svelte	✅ 完全支持	需要prettier-plugin-svelte
Vue	✅ 完全支持	需要@vue/compiler-sfc

常见问题解决

如果遇到任何问题，可以查阅故障排除文档。以下是一些常见问题的解决方法：

问题：使用pnpm或Prettier v3.x时插件不工作

解决方法：在Prettier配置中显式指定插件：

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

问题：需要支持特殊语法（如装饰器）

解决方法：通过importOrderParserPlugins配置相应的Babel插件：

"importOrderParserPlugins": ["classProperties", "decorators-legacy"]

总结

@trivago/prettier-plugin-sort-imports是一个强大的工具，可以帮助团队保持一致的导入风格，提高代码可读性和可维护性。通过简单的配置，就能实现导入语句的自动排序，让开发者专注于业务逻辑而非代码格式。

无论是小型项目还是大型企业应用，这款插件都能显著提升开发效率和代码质量。立即尝试，体验整洁有序的导入管理方式！