解决eslint-plugin-perfectionist中Vue组件与类型导入排序冲突问题

在使用eslint-plugin-perfectionist进行代码规范检查时，开发者可能会遇到一个常见的配置问题：当同时存在相对路径的Vue组件导入和类型导入时，会出现排序错误或无限循环的情况。本文将深入分析这个问题并提供完整的解决方案。

问题现象

在Vue单文件组件中，当同时导入以下两种类型的模块时会出现问题：

1. 相对路径的Vue组件（如./FilterLocationButton.vue）
2. 使用@/路径别名的类型导入（如import type { LocationType } from "@/locations"）

具体表现为：

• 自动修复功能无法正确排序导入语句
• 可能出现无限循环的ESLint错误
• 修复后产生多余的空行

原因分析

经过深入排查，发现这个问题通常由两个因素共同导致：

1. 规则冲突：当项目中同时启用了perfectionist/sort-imports和import/order规则时，两个规则会互相干扰，导致排序逻辑冲突。

2. 配置不完整：在internal-pattern配置中未明确排除Vue组件文件，导致类型导入和组件导入的分类边界模糊。

解决方案

1. 关闭冲突的import/order规则

如果项目继承了类似antfu的ESLint配置，很可能默认启用了import/order规则。在ESLint配置中添加：

rules: {
  "import/order": "off",
  // 其他规则...
}

2. 完善perfectionist配置

调整perfectionist/sort-imports的配置，特别是internal-pattern部分：

rules: {
  "perfectionist/sort-imports": [
    "error",
    {
      type: "natural",
      "newlines-between": "always",
      "internal-pattern": ["@/**", "~/**", "!**.vue"], // 关键修改：排除Vue文件
      "custom-groups": {
        value: { "vue-components": ["**/*.vue"] },
      },
      groups: [
        ["side-effect", "side-effect-style", "style"],
        ["builtin-type", "builtin"],
        ["external-type", "external"],
        ["internal-type", "internal"],
        ["parent-type", "sibling-type", "index-type", "parent", "sibling", "index"],
        "vue-components",
        "object",
        "unknown",
      ],
    },
  ]
}

3. 最佳实践建议

1. 明确分类：确保每种导入类型都有明确的归属组别
2. 避免重叠：各组别的匹配模式应当互不重叠
3. 测试验证：修改配置后，应在不同场景下测试导入排序效果
4. 团队统一：确保团队所有成员使用相同的ESLint配置

配置解析

让我们深入理解这个解决方案中的关键配置项：

1. internal-pattern：定义了哪些路径被视为"内部"导入

   • @/**：匹配所有以@/开头的路径
   • ~/**：匹配所有以~/开头的路径
   • !**.vue：明确排除所有Vue组件文件

2. custom-groups：创建自定义分组

   • vue-components组专门处理.vue文件的导入

3. groups：定义导入语句的排序顺序

   • 类型导入(*-type)优先于普通导入
   • Vue组件有自己独立的排序位置

总结

通过合理配置eslint-plugin-perfectionist，开发者可以优雅地解决Vue项目中组件导入和类型导入的排序问题。关键在于：

1. 消除与其他排序规则的冲突
2. 明确定义不同类型导入的归属
3. 使用排除模式精确控制分类

正确的配置不仅能解决排序问题，还能使代码更加整洁统一，提升团队协作效率。建议开发者在项目初期就建立完善的ESLint配置，避免后期出现类似问题。