如何在类型记录react项目中使用eslint导入插件启用绝对路径别名？

Question

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

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

我的tsconfig.json有以下设置。

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

我尝试以以下方式导入项目中的组件。

import { Component } from 'src/components/ComponentA'但是，然后eslint抱怨使用相对导入，而实际上，我绝对是在tsconfig路径别名的帮助下导入我的组件的。我已经安装了eslint-import-resolver-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

这种行为是正确的。根据非相对亲本-进口的代码库，这个lint只验证您是否在使用来自另一个父目录的任何组件/类。这个规则并不关心您的导入路径是相对的还是绝对的。

假设您有以下目录路径：

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

现在，如果您试图在TimeWrapper中使用Logger，此规则将允许此导入，因为TimeWrapper位于Logger的父文件夹(src/util)中。然而，如果您试图在TimeWrapper中访问TimeWrapper，则此规则将抛出并出错，因为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似乎有问题。您可以使用埃斯林-无限制-进口来防止相对导入。此规则将限制以. (即相对导入)开始的所有导入。

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