如何在 typescript 反应项目中使用 eslint 导入插件启用绝对路径别名？

Question

我已经将eslint-plugin-import安装到我的项目中，我的目标是使用'import/no-relative-parent-imports': 'error'设置来禁止我的项目中的相对导入以增强可读性。

但是，此设置会在我的项目中产生错误，因为它不会将我的 tsconfig 别名提取到根文件夹。
我的tsconfig.json具有以下设置。

 "paths": {
      "src/": ["./src/*"]
    }

我尝试通过以下方式在我的项目中导入组件。
import { Component } from 'src/components/ComponentA'但是当实际上我在 tsconfig 路径别名的帮助下绝对导入我的组件时，eslint 抱怨使用相对导入。 我已经安装了eslint-import-resolver-typescript typescript 并在我的.eslintrc.js文件中启用了它。

settings: {
    'import/resolver': {
      typescript: {},
    },
  },

我的错误信息如下。

Relative imports from parent directories are not allowed. Please either pass what you're importing through at runtime (dependency injection), move `example.ts` to same directory as `src/components/ComponentA` or consider making `src/components/ComponentA` a package. (eslintimport/no-relative-parent-imports)

Answer 1

这种行为是正确的。 根据no-relative-parent-imports的代码库，此 lint 仅验证您是否正在使用来自另一个父目录的任何组件/类。 此规则不关心您的导入路径是相对路径还是绝对路径。

假设您有以下目录路径：

src
+---utils
|   +---time
|   |   +---- TimeWrapper.ts
|   +---Logger.ts
+---index.ts

现在，如果您尝试在Logger中使用TimeWrapper ，此规则将允许此导入，因为 TimeWrapper 存在于 Logger 的父文件夹 ( src/util ) 中。 然而，如果您尝试访问TimeWrapper中的Logger ，则此规则将抛出错误，因为Logger不存在于TimeWrapper的父文件夹 ( src/util/time ) 中。

因此，实际上，这条规则并不关心您是使用相对路径还是绝对路径导入类。 它只关心解析的路径依赖项是否存在于同一父文件夹中。

这条规则应该只用在你代码的某些地方。 比如，您不希望Database文件夹的类依赖于任何其他文件夹，如Services 。 所以你不应该在你的整个项目中使用它，因为那会使开发变得太困难。

如果您想避免相对导入，可以使用以下内容：

module.exports = {
  rules: {
    'no-restricted-imports': [
      'error',
      {
        patterns: [
          {
            group: ['../*'],
            message: 'Usage of relative parent imports is not allowed.',
          },
        ],
      },
    ],
  },
};

Answer 2

它按预期工作。 根据规则文档：

使用此规则可防止导入相对父路径中的文件夹。

与您的预期相反，这并不意味着阻止相对导入到父路径中的文件夹。 因此，如果完全解析后导入的模块路径位于相对于当前文件的父路径中，则此规则会给您一个错误。

该文档进一步解释：

此规则对于强制执行树状文件夹结构而不是复杂的图形文件夹结构很有用。

因此，模块被迫只依赖于相邻的和子依赖性，而根本不依赖于父依赖性。 这是防止循环依赖的有效方法，例如让孩子依赖父母，而父母又依赖于孩子（直接或传递）。

用项目的绝对路径覆盖相对路径不会改变文件之间的相对关系。 相反，它会混淆您的依赖关系并使查找导入问题变得困难。

考虑到这种理解和规则的意图，它通过抛出上述错误按预期工作。

保留此规则将导致一些努力相应地重组您的项目并将导入修复到父文件。 作为回报，您将获得更稳定且不易出错的依赖项管理，我强烈建议您使用它。 如果你只想阻止任何相对导入路径，你应该切换到另一个规则。

Answer 3

eslint-plugin-import似乎有问题。 您可以改用eslint-no-restricted-imports来防止相对导入。 此规则将限制所有以. （即相对进口）。

"rules": {
   ...
   "no-restricted-imports": ["error", {
      "patterns": [".*"]
   }]
}

Answer 4

请将此添加到您的tsconfig.json

"compilerOptions": {
    "baseUrl": "src",
    ...

我建议参考 github 中的大量 typescript/react 项目。

有关详细信息，您可以参考此文档。

https://www.typescriptlang.org/tsconfig

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html