ESLint - 只允许绝对导入路径不是相对的答案

【问题标题】：ESLint - Only Allow Absolute Import Paths Not RelativeESLint - 只允许绝对导入路径不是相对的
【发布时间】：2022-04-12 20:27:17
【问题描述】：

我正在从事 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 是否有防止任何类型的相对路径的规则？只允许绝对路径？

【问题讨论】：

标签： angular eslint eslintrc angular11

【解决方案1】：

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

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

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

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

【讨论】：

我想要这条规则，但我还需要运行我的应用程序。此规则有助于将其作为一个问题突出显示：import foo from './middleware/foo';，我可以通过删除 ./ 来修复它并满足 linting 和 VSCode 错误突出显示。甚至 CMD+右键单击以非相对路径在 IDE 中打开文件！但是，我运行该应用程序并得到：错误：找不到模块'middleware/foo' 我一直在尝试在其他任务之间实现非相对路径 3 周。有什么见解吗？我发了一个问题，没有回复。感觉我已经阅读了一半的互联网无济于事。
@NeilGuyLindberg 我可以按照以下说明在 TypeScript CLI 应用程序中执行此操作：bgxcode.com/posts/typescript/ts-absolute-import-paths。现在我有 import foo from '@app/middleware/foo'; 而不是 import foo from './middleware/foo';，其中 @app 是我的 src 基本目录的别名。
谢谢@adashrod。我可以使用这种方法。但是，我很困惑为什么我可以在没有 \@app/ 的 JS 项目中执行此操作，但我需要在此处添加它？就像在 JS 项目中一样，我可以：middleware/foo... 团队也想要这样。

【解决方案2】：

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

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

【讨论】：