javascript - Eslint 规则/Vscode 设置防止导入没有索引的文件夹

Question

问题:

是否有 ESLint 规则强制在导入时使用 */index。

示例:

文件结构:

utils/
   - index.js
   - a.js
   - b.js

main.js

main.js

// WRONG
import utils from "./utils";

// OK 
import utils from "./utils/index";

为什么

我需要这个，因为我的项目正在使用 tscpaths 在 typescript 编译后用相对路径替换绝对路径，但是，由于某种原因，当 */index 不存在。

替代方案

如果规则不存在，是否有 vscode 设置可以在自动导入中自动添加索引？

Answer 1

选项 1，重组您的项目，这样就没有要导入的 index.js。它被称为 index 的历史原因是包含该文件夹内容的索引，将通常导出的内容收集在一个整洁的包中，这样人们就不必查看文件夹中的详细信息。如果这不是您需要的，就不要将其命名为 index。您可以将它们全部重命名为 main.js，mass查找替换导入，并且将来可以从 IDE 自动导入。

选项 2，如果没有太多文件夹出现此问题，您可以为 no-internal-imports 编写配置规则使得按名称导入文件夹被视为“内部引用”。这可能是最糟糕的解决方案，因为没有自动修复并且添加新文件夹需要更新 eslint 配置，但这可能有助于作为一个选项提及

选项 3，创建 no-useless-path-segments rule 的修改版本这样做，它目前具有与您想要的相反的逻辑，因此您可以修改第 95-108 行周围的代码来检查导入是否不是索引导入，但解析为建议修复:

// assuming your rule has an option called enforceIndex
if (options && options.enforceIndex && !regexUnnecessaryIndex.test(importPath)) {
    // if the import path is not pointing to an index file check if it resolves to a path that looks like an index file
    const resolved_path = resolve(importPath, context);
    if(regexUnnecessaryIndex.test(resolved_path)){
        // if the resolved_path resolves to something that looks like an index then suggest adding /index
        return reportWithProposedPath(`${importPath}/index`);
    }
}

但事实是，有一个 eslint 规则强加了与您想要的完全相反的逻辑，这应该是一个很好的指标，表明您所要求的内容并不完全被认为是良好的形式。