使用打字稿别名时，eslint 导入/顺序会崩溃

Question

我在大型反应项目中使用打字稿路径别名。例如，在我的 tsconfig.json 中，我指定了一些路径别名：

{
  "baseUrl": "./src",
    "paths": {
      "@common/*": ["common/*"],
      "@settings/*": ["settings/*"],
      // other paths
    }
}

好的，现在当我想导入一些模块时，我可以使用这些别名。我们也在使用 eslint，我们使用的规则之一是import/order. 它强制任何来自 node_modules 的东西都应该在任何本地模块之前导入。我喜欢这个规则。不使用我的别名：

import React, { useEffect } from "react";
import SomeDistantComponent from '../../common/components/SomeDistantComponent'
import { Formik } from 'formik'

这会抛出 linting 错误，但是根据 eslint 格式化文件会自动将 formik 导入移动到导入上方SomeComponent，这正是我想要的。

然而，在使用我的别名时，这并不会引发错误：

import React, { useEffect } from "react";
import SomeComponent from '@common/components/SomeComponent'
import { Formik } from 'formik'

就好像打字稿路径别名欺骗了import/order规则，现在该规则失效了。

问题：我的 linter 怎么还能识别这些别名路径？我可以配置这个插件的groups或pathGroups 选项来正确地分组和排序我的别名本地模块在我的节点模块之后吗？

奖金问题：

我不一定需要按顺序区分别名模块和非别名模块。例如

import React, { useEffect } from "react";
import SomeCloseComponent from './SomeCloseComponent'
import SomeComponent from '@common/components/SomeComponent'
import AnotherCloseComponent from './AnotherCloseComponent'
import { Formik } from 'formik'

我会被罚款离开的进口秩序SomeCloseComponent，SomeComponent和AnotherCloseComponent，只要formik进口所有的人都去之前。是否可以将别名导入与非别名导入放在相同的“优先级”分组级别，这意味着它们不会在它们之间重新排序，但都会在 node_module 导入之后出现？

编辑 - 再次尝试：

根据 Aviv Hadar 的回答，我在我的 eslint 文件中尝试了这个：

"import/order": [
      "warn",
      {
        pathGroups: [
          {
            pattern: "@material-ui/**",
            group: "external",
            position: "after"
          },
          {
            pattern: "@/**",
            group: "internal",
            position: "after"
          }
        ],
        pathGroupsExcludedImportTypes: ["internal", "external", "builtins"],
        groups: [
          "builtin",
          "external",
          "unknown",
          ["internal", "sibling", "parent"],
          "index",
          "object",
          "type"
        ]
      }
    ],

这是因为它将所有@以内部导入开头的导入处理，并将它们保持在与其他内部导入相同的级别。所以这不会引起警告：

import { Something } from "@some/aliased/path";
import LocalComponent from "../../local";
import { SomethingElse } from "@another/aliased/path";

这就是我想要的 - 所有内部模块都处于同一分组级别，无论是别名还是非别名，或者父/兄弟姐妹。但是，这应该会显示警告，但不会：

import { Something } from "@some/aliased/path";
import LocalComponent from "../../local";
import { SomethingElse } from "@another/aliased/path";
import { makestyles } from '@material-ui/styles'

最后一个导入确实以 开头@，但它是一个 node_module，应该在列表的顶部。回想起来，我希望我们会选择一个不同的别名前缀，但我们没有。有没有办法调整我的配置以正确解释 node_modules as external，并将它们保留在该组中以进行排序？

Answer 1

您需要使用该pathGroups属性来指示以eslint开头的路径的正确位置@/是在其他组之一之前/之后。

我选择使用~符号，而不是在@从 src 文件夹导入和从以 开头的外部库导入之间创建差异@，例如：

import {makeStyles} from '@material-ui/core/styles';
import Bar from '~/components/Bar'

所以现在我的文件看起来像这样：

import React from 'react'; // external
import Bar from '~/components/Bar'; // SPECIAL
import {ReactComponent as Logo} from '../logo.svg'; // parent
import './App.css'; // sibling

这是我import/order在.eslintrc文件中对规则的定义：

    "import/order": [
      "error",
      {
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "external",
            "position": "after"
          }
        ],
        "groups": [
          "builtin",
          "external",
          "internal",
          "unknown",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ]
      }
    ]
  }

正如您所看到的，我使用 来告诉 eslint 任何以组pathGroups开头的导入的正确位置。~/afterexternal

因为这里的每个导入都属于不同的组，所以我对此顺序所做的任何更改都将导致 ESLint 错误。

PS 我在某些时候遇到了导入本身的问题，这些问题在我更新到eslint-plugin-import版本后得到了解决2.23.4