添加多个路径到 eslint-plugin-import 模式

Question

我希望使用 eslint 强制我的导入遵循标准顺序。

我已经完成了这个工作，但是它会导致一个很长的 eslint 文件，因为我有许多不同的路径，我设置了 TypeScript 别名，我希望在对外部包进行排序时排除 eslint 规则。

我让它像这样工作：

"import/order": [
  "error",
  {
    "groups": ["builtin", "external", "internal"],
    "pathGroups": [
      {
        "pattern": "react*",
        "group": "external",
        "position": "before"
      },
      {
        "pattern": "Components/**",
        "group": "internal"
      },
      {
        "pattern": "Constants/**",
        "group": "internal"
      }
      ... more patterns here
    ],
    "pathGroupsExcludedImportTypes": ["react", "internal"],
    "alphabetize": {
      "order": "asc",
      "caseInsensitive": true
    }
  }
],

我想知道是否有一种方法可以对模式进行分组，这样我就可以做类似这样的事情：

"import/order": [
  "error",
  {
    "groups": ["builtin", "external", "internal"],
    "pathGroups": [
      {
        "pattern": "react*",
        "group": "external",
        "position": "before"
      },
      {
        "pattern": "Components/**|Constants/**|AnotherAlias/**|AnotherAlias/**",
        "group": "internal"
      }
    ],
    "pathGroupsExcludedImportTypes": ["react", "internal"],
    "alphabetize": {
      "order": "asc",
      "caseInsensitive": true
    }
  }
],

Answer 1

该模式是迷你匹配模式。正如您所看到的，使用这个（我认为）非官方测试器，为了使模式匹配集合中的字符串，您应该使用集合运算符：

{string1,string2,string3}

那么，对于你的情况，你可以这样写

{string1,string2,string3}

不过，我不确定这是否能解决您的问题。我通过正确设置 eslint 设置解决了这个问题import/internal-regex。此设置告诉 eslint，然后告诉插件（如您在此处看到的）如何判断导入是否是内部的。所以你可以设置它：

//...
"pathGroups": [
      {
        "pattern": "react*",
        "group": "external",
        "position": "before"
      },
      {
        "pattern": "{Components,ConstantsAnotherAlias,AnotherAlias}/**",
        "group": "internal"
      }
    ],
//...