高级技巧：@trivago/prettier-plugin-sort-imports自定义排序规则完全指南

@trivago/prettier-plugin-sort-imports是一款强大的Prettier插件，能够帮助开发者按照自定义规则对TypeScript和JavaScript文件中的导入语句进行自动排序。本文将详细介绍如何通过配置importOrder等核心选项，打造符合个人或团队需求的导入排序方案，提升代码整洁度和开发效率。

一、核心配置项解析：掌握importOrder基础

1.1 importOrder：定义导入分组顺序

importOrder是插件最核心的配置项，通过数组形式指定不同类型导入的排序优先级。例如：

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

上述配置表示：

• 优先排序@core/开头的内部模块
• 接着是@server/相关模块
• 然后是@ui/组件模块
• 最后是相对路径导入（./或../开头）

1.2 特殊占位符：<THIRD_PARTY_MODULES>与

插件提供两个特殊占位符实现高级排序逻辑：

• <THIRD_PARTY_MODULES>：用于固定第三方库的位置。未显式配置时，第三方库默认排在最前面。例如：

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

  会将第三方库统一放在@core内部模块之后、相对路径导入之前。

• ：在importOrderSeparation: true时，可强制在特定分组间添加空行分隔。

二、进阶配置：打造个性化排序规则

2.1 importOrderSeparation：分组间添加空行

启用该选项后，不同分组的导入语句之间会自动添加空行，提升可读性：

{
  "importOrderSeparation": true
}

2.2 importOrderSortSpecifiers：对导入成员排序

当设置为true时，同一行的导入成员会按字母顺序排序：

{
  "importOrderSortSpecifiers": true
}

效果示例：

// 排序前
import { z, a, c } from 'library';

// 排序后
import { a, c, z } from 'library';

2.3 importOrderCaseInsensitive：忽略大小写排序

默认排序区分大小写，启用该选项后按字母顺序忽略大小写：

{
  "importOrderCaseInsensitive": true
}

2.4 importOrderExclude：排除特定文件

通过glob模式指定不需要排序的文件：

{
  "importOrderExclude": ["*.test.ts", "src/generated/**"]
}

三、实战案例：构建企业级导入排序方案

3.1 大型项目标准配置

以下配置适用于包含多模块的企业级项目：

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react$", // React核心库优先
    "^@company/(.*)$", // 公司内部共享库
    "<THIRD_PARTY_MODULES>", // 第三方库
    "^@components/(.*)$", // 组件模块
    "^@hooks/(.*)$", // 自定义Hooks
    "^@utils/(.*)$", // 工具函数
    "^[./]" // 相对路径导入
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderCaseInsensitive": true
}

3.2 处理特殊场景

3.2.1 内置模块排序

使用<BUILTIN_MODULES>占位符将Node.js内置模块（如fs、path）排在指定位置：

{
  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^[./]"]
}

3.2.2 处理副作用导入

设置importOrderSideEffects: true可确保副作用导入（如样式文件）保持在导入列表顶部：

{
  "importOrderSideEffects": true
}

四、常见问题与解决方案

4.1 如何忽略特定文件的排序？

在文件顶部添加/* sort-imports-ignore */注释，插件会跳过该文件：

/* sort-imports-ignore */
import { unorderedImport } from 'module';

4.2 与其他Prettier插件冲突怎么办？

确保@trivago/prettier-plugin-sort-imports在插件列表中最后加载，避免被其他插件覆盖排序结果。

五、配置文件路径与扩展阅读

• 类型定义：types/index.d.ts
• 官方文档：docs/
• 测试案例：tests/

通过灵活配置@trivago/prettier-plugin-sort-imports，开发者可以构建统一的代码风格规范，减少团队协作中的格式争议，让导入语句始终保持清晰有序。无论是小型项目还是大型应用，合理的导入排序规则都能显著提升代码可维护性。