eslint-plugin-perfectionist 中 sort-exports 规则的进阶用法：类型导出排序优化

在 TypeScript 和 React 开发中，模块导出的组织方式对代码可读性和维护性有着重要影响。eslint-plugin-perfectionist 项目的 sort-exports 规则提供了强大的导出排序功能，但在处理类型导出时存在一些值得优化的地方。

当前规则的局限性

默认情况下，sort-exports 规则会将所有导出语句（包括常规导出和类型导出）统一排序。这意味着当开发者希望将类型导出放在文件底部时，规则可能会强制要求将它们移动到其他位置。例如：

// 开发者期望的写法
export { MapMarker };
export { BOUNDS_PADDING } from "./utils";
export type { MapMarkerProps } from "./prop.types";

// 但规则可能要求改为
export type { MapMarkerProps } from "./prop.types";
export { MapMarker };
export { BOUNDS_PADDING } from "./utils";

这种排序方式虽然符合字母顺序，但不符合许多团队对类型导出的组织偏好。

类型导出的最佳实践

在 TypeScript 社区中，将类型导出与非类型导出分离是一种常见的最佳实践，这样做有几个优点：

1. 可读性：将实现代码与类型定义分离，使文件结构更清晰
2. 维护性：类型变更时更容易定位相关代码
3. 构建优化：有助于 tree-shaking，因为类型在编译后会被移除

解决方案：独立排序类型导出

eslint-plugin-perfectionist 的最新版本已经支持通过配置选项来实现类型导出的独立排序。开发者可以配置规则，使类型导出始终保持在其他导出之后，同时各自组内保持有序。

配置示例：

{
  "rules": {
    "perfectionist/sort-exports": [
      "error",
      {
        "groups": ["type", "non-type"],
        "order": "asc"
      }
    ]
  }
}

这种配置下，规则会：

1. 首先处理所有非类型导出（export {...}）
2. 然后处理所有类型导出（export type {...}）
3. 每个组内按照字母顺序排序

实际应用场景

这种排序方式特别适合以下场景：

1. React 组件库：组件实现和props类型分开导出
2. 工具函数集合：功能函数和它们的类型定义分开管理
3. API 客户端：请求函数和响应类型分开组织

进阶配置选项

除了基本的分组排序，还可以结合其他选项实现更精细的控制：

• 自定义分组顺序：可以调整类型导出和非类型导出的前后顺序
• 混合排序：某些情况下可能需要混合排序，可以通过更复杂的配置实现
• 忽略特定导出：通过注释可以临时禁用某些导出的排序检查

总结

eslint-plugin-perfectionist 的 sort-exports 规则通过支持类型导出的独立排序，为 TypeScript 项目提供了更符合实际开发需求的代码组织方式。这种配置不仅保持了代码的一致性，还尊重了类型与非类型分离的最佳实践，使得代码库更加整洁和易于维护。

对于使用 TypeScript 的团队来说，合理配置导出排序规则可以显著提升代码质量，同时减少团队成员在代码风格上的分歧。