7

我在一个大型反应项目中使用打字稿路径别名。例如，在我的 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 import 移到 import 上面SomeComponent，这正是我想要的。

但是，当使用我的别名时，这不会引发错误：

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

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

问题：我的 linter 如何仍能识别这些别名路径？我可以配置此插件的groupsorpathGroups 选项以正确分组和命令我的别名本地模块位于我的节点模块之后吗？

奖金问题：

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

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。是否可以将别名导入置于与非别名导入相同的“优先级”分组级别，这意味着它们不会相互重新排序，但都会在 node_module 导入之后出现？AnotherCloseComponentformik

编辑 - 再次尝试：

根据 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 解释为external，并将它们保留在该组中以进行排序？

4

1 回答 1

8

您需要使用该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"
        ]
      }
    ]
  }

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

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

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

于 2021-06-10T18:19:57.220 回答