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

Question

Question:

Is there an ESLint rule to enforce usage of */index on imports.

Example:

File structure:

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

main.js

main.js

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

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

Why

I need this because my project is using tscpaths to replace absolute paths with relative paths after typescript compilation, but, for some reason, it doesn't replace when the */index is not present.

Alternative

If the rule doesn't exist, is there a vscode setting that would automatically add the index in auto imports?

Answer 1

Option 1, restructure your project so there are no index.js to import.

Option 2, If there aren't too many folders where this is an issue you can write a config for no-internal-imports rule such that importing a folder by name is considered an "internal reference". This is probably the worst solution since there is no auto-fix and adding new folders requires updating the eslint config but this might be helpful to mention as an option

Option 3, create a modified version of the no-useless-path-segments rule that does this, it currently has the opposite logic as you want so you would modify the code around lines 95-108 to check if the import isn't an index import but resolves to one suggest the fix:

// 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`);
    }
}

possibly approach the team of that eslint package and ask if they'd be willing to add support for that logic as it may come up for other people.