如何在打字稿反应项目中使用 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

eslint-plugin-import似乎有问题。您可以使用eslint-no-restricted-imports来防止相对导入。该规则将限制所有以 a 开头的导入.（即相对导入）。

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