ESLint

Question

我在 Angular 11 项目中工作。该项目中的很多导入都使用相对路径或绝对路径。

我为这个项目设置了 ESLint，我想阻止相对导入路径，只允许绝对路径。但是我没有找到执行此操作的规则。
我发现：no-relative-parent-imports，但它没有给我以下路径的问题：import { HttpService } from "../http/http.service"; 或 import { RouterService } from "../../services/router/router.service";（两者都不是绝对路径，绝对路径这些分别是 import { HttpService } from "app/services/http/http.service"; 和 import { RouterService } from "app/services/router/router.service";。

我读过这篇文章：https://medium.com/@aayush123/escaping-relative-import-hell-react-native-eslint-atom-57dc2cae5bcc
但如果可以避免的话，我想避免添加另一个东西，比如 Babel。

ESLint 是否有防止任何类型的相对路径的规则？只允许绝对路径？

Answer 1

您可以将 eslint-no-restricted-imports 添加到您的 .eslintrc 文件，如下所示：

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

如果有些文件需要相对导入，可以在eslint-config中添加overrides，如下：

"overrides": [
  {
    "files": ["*-test.js"],
    "rules": {
      "no-restricted-imports": "off"
    }
  }
]

Answer 2

最近有人专门为您的用例创建了 a new ESLint rule。

它支持为您解决问题，并支持允许父文件夹的选项。

Answer 3

你可以试试我的新插件eslint-plugin-absolute-imports-only

...
settings: {
  "absolute-imports-only": {
    project: path.resolve(__dirname, 'tsconfig.json'),
  },
},

ESLint - 只允许绝对导入路径而不是相对路径

ESLint - Only Allow Absolute Import Paths Not Relative

angular

eslintrc

angular11