如何在eslint-plugin-simple-import-sort中正确配置自定义分组排序

eslint-plugin-simple-import-sort是一个强大的ESLint插件，用于对JavaScript/TypeScript中的import语句进行自动排序。在实际项目中，我们经常需要根据项目结构自定义import的分组规则。本文将详细介绍如何正确配置自定义分组，特别是处理带有特殊前缀(~)的模块路径。

常见分组配置问题

许多开发者在配置自定义分组时，特别是处理带有特殊前缀(如~)的模块路径时，会遇到分组规则不生效的问题。例如，以下配置看似合理但实际上可能无法达到预期效果：

"groups": [
  ["^~navigation/"],
  ["^~features/"],
  ["^~services/"]
]

正确的分组配置方法

经过实践验证，以下配置方式能够正确识别带有~前缀的模块路径：

"groups": [
  ["^~+.(navigation)"],
  ["^~+.(features)"],
  ["^~+.(services)"]
]

这种配置方式使用了更灵活的正则表达式模式，能够准确匹配以~开头的模块路径。

完整配置示例

一个完整的、经过验证的配置示例如下：

"simple-import-sort/imports": [
  "error",
  {
    "groups": [
      ["^react$", "^react-native$"],
      ["^@react-navigation/"],
      ["^@?\\w"],
      ["^\\./"],
      ["^~+.(navigation)"],
      ["^~+.(features)"],
      ["^~+.(services)"],
      ["^~+.(hooks)"],
      ["^~+.(components)"],
      ["^~+.(ui)"],
      ["^.+\\.(gif|png|svg|jpg)$"]
    ]
  }
]

配置解析

1. 基础库分组：首先匹配React和React Native核心库
2. 导航库分组：专门处理@react-navigation相关导入
3. 第三方库分组：匹配所有其他第三方库
4. 相对路径分组：处理./开头的本地模块
5. 自定义路径分组：使用改进后的正则表达式处理项目特定路径
6. 静态资源分组：最后处理图片等静态资源

实际效果对比

配置前可能出现的混乱排序：

import { useAppDispatch } from '~/hooks';
import { RootDrawerParamList } from '~/navigation/types';
import { selectUser } from '~/features/auth/store/user.slice';

配置后的理想排序：

import { RootDrawerParamList } from '~/navigation/types';
import { selectUser } from '~/features/auth/store/user.slice';
import { useAppDispatch } from '~/hooks';

最佳实践建议

1. 对于特殊前缀路径，建议使用^~+.(groupname)模式而非简单的^~groupname/
2. 将项目特有的分组放在第三方库分组之后，相对路径分组之前
3. 对于React生态相关库，可以单独分组以提高可读性
4. 静态资源建议单独分组并放在最后

通过合理配置分组规则，可以显著提高代码的可维护性和可读性，特别是在大型项目中，清晰的import排序能帮助开发者更快理解模块依赖关系。