Rule proposal: Require extension for relative imports and re-exports

It would enforce using a .js extension for relative imports if it doesn’t already have an extension.

We cannot auto-fix as we cannot know whether import foo from './foo'; refers to a file or directory.

This even applies to TypeScript, where you still need the .js extension even if you import other .ts files.

There’s already the import/extensions rule, but that project is not very actively maintained, very buggy, and also it doesn’t let us use .js extension for TypeScript files. I think it’s worth adding this simple rule here.

This rule will not do anything about require() statements.

Fail

import foo from './foo';

export foo from './foo';

await import('./foo');

Pass

import foo from './foo.js';

export foo from './foo.js';

await import('./foo.js');

import foo from './foo.vue';

[silverwind]

An autofix for this rule would also be awesome. import/extensions doesn’t provide one, making it very tedious to manually refactor big projects from ./file to ./file.js imports. I guess such a autofix would require file system access to determine the correct extension, thought.

[fisker]

Fail

import foo from './foo?query=foo.js';

Pass

import foo from './foo.mjs';

import foo from './foo.json' assert { type: "json" };

(This can’t test yet, as @babel/eslint-parser missing assertions)