feat: add enforceEsmExtensions option to import/extensions rule

README.md

@@ -75,7 +75,7 @@ This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, a
 | [consistent-type-specifier-style](docs/rules/consistent-type-specifier-style.md) | Enforce or ban the use of inline type-only markers for named imports.      |    |       |    | 🔧 |    |    |
 | [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md)               | Enforce a leading comment with the webpackChunkName for dynamic imports.   |    |       |    |    |    |    |
 | [exports-last](docs/rules/exports-last.md)                                       | Ensure all exports appear after other statements.                          |    |       |    |    |    |    |
-| [extensions](docs/rules/extensions.md)                                           | Ensure consistent use of file extension within the import path.            |    |       |    |    |    |    |
+| [extensions](docs/rules/extensions.md)                                           | Ensure consistent use of file extension within the import path.            |    |       |    | 🔧 | 💡 |    |
 | [first](docs/rules/first.md)                                                     | Ensure all imports appear before other statements.                         |    |       |    | 🔧 |    |    |
 | [group-exports](docs/rules/group-exports.md)                                     | Prefer named exports to be grouped together in a single export declaration |    |       |    |    |    |    |
 | [imports-first](docs/rules/imports-first.md)                                     | Replaced by `import/first`.                                                |    |       |    | 🔧 |    | ❌  |

docs/rules/extensions.md

@@ -1,5 +1,7 @@
 # import/extensions
 
+🔧💡 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) and manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
 <!-- end auto-generated rule header -->
 
 Some file resolve algorithms allow you to omit the file extension within the import source path. For example the `node` resolver can resolve `./foo/bar` to the absolute path `/User/someone/foo/bar.js` because the `.js` extension is resolved automatically by default. Depending on the resolver you can configure more extensions to get resolved automatically.
@@ -38,14 +40,22 @@ By providing both a string and an object, the string will set the default settin
 
 For example, `["error", "never", { "svg": "always" }]` would require that all extensions are omitted, except for "svg".
 
-`ignorePackages` can be set as a separate boolean option like this:
+## Additional Options
+
+This rule provides additional options for configuration:
+
+- `ignorePackages` follows the same logic as setting the string value of the rule config to `ignorePackages`. Useful when using `always` as the string config.
+- `enforceEsmExtensions` will flag any relative import paths that do not resolve to a file. (supports --fix)
+
+`ignorePackages` and `enforceEsmExtensions` can be set as a separate boolean option like this:
 
 ```
 "import/extensions": [
   <severity>,
   "never" | "always" | "ignorePackages",
   {
     ignorePackages: true | false,
+    enforceEsmExtensions: true | false,
     pattern: {
       <extension>: "never" | "always" | "ignorePackages"
     }
@@ -167,6 +177,24 @@ import express from 'express';
 import foo from '@/foo';
 ```
 
+The following patterns are considered problems when configuration set to `['error', 'always', {ignorePackages: true, enforceEsmExtensions: true} ]`:
+
+```js
+import foo from './foo'
+import bar from './bar'
+import Component from './Component'
+import express from 'express'
+```
+
+The following patterns are not considered problems when configuration set to `['error', 'always', {ignorePackages: true, enforceEsmExtensions: true} ]`:
+
+```js
+import foo from './foo.js'
+import bar from './bar/index.js'
+import Component from './Component.js'
+import express from 'express'
+```
+
 ## When Not To Use It
 
 If you are not concerned about a consistent usage of file extension.

src/rules/extensions.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import fs from 'fs';
 
 import resolve from 'eslint-module-utils/resolve';
 import { isBuiltIn, isExternalModule, isScoped } from '../core/importType';
@@ -15,6 +16,7 @@ const properties = {
   properties: {
     'pattern': patternProperties,
     'ignorePackages': { type: 'boolean' },
+    'enforceEsmExtensions': { type: 'boolean' },
   },
 };
 
@@ -24,6 +26,7 @@ function buildProperties(context) {
     defaultConfig: 'never',
     pattern: {},
     ignorePackages: false,
+    enforceEsmExtensions: false,
   };
 
   context.options.forEach(obj => {
@@ -35,7 +38,7 @@ function buildProperties(context) {
     }
 
     // If this is not the new structure, transfer all props to result.pattern
-    if (obj.pattern === undefined && obj.ignorePackages === undefined) {
+    if (obj.pattern === undefined && obj.ignorePackages === undefined && obj.enforceEsmExtensions === undefined) {
       Object.assign(result.pattern, obj);
       return;
     }
@@ -49,6 +52,10 @@ function buildProperties(context) {
     if (obj.ignorePackages !== undefined) {
       result.ignorePackages = obj.ignorePackages;
     }
+    // If enforceEsmExtensions is provided, transfer it to result
+    if (obj.enforceEsmExtensions !== undefined) {
+      result.enforceEsmExtensions = obj.enforceEsmExtensions;
+    }
   });
 
   if (result.defaultConfig === 'ignorePackages') {
@@ -59,6 +66,46 @@ function buildProperties(context) {
   return result;
 }
 
+// util functions
+const fileExists = function (filePath) {
+  try {
+    fs.accessSync(filePath, fs.constants.F_OK);
+    return true;
+  } catch (err) {
+    if (err && err.code) === 'ENOENT') {
+      // known and somewhat expected failure case.
+      return false;
+    }
+    return false;
+  }
+};
+
+const excludeParenthesisFromTokenLocation = function (token) {
+  if (token.range == null || token.loc == null) {
+    return token;
+  }
+  const rangeStart = token.range[0] + 1;
+  const rangeEnd = token.range[1] - 1;
+  const locColStart = token.loc.start.column + 1;
+  const locColEnd = token.loc.end.column - 1;
+  const newToken = {
+    ...token,
+    range: [rangeStart, rangeEnd],
+    loc: {
+      start: { ...token.loc.start, column: locColStart },
+      end: { ...token.loc.end, column: locColEnd },
+    },
+  };
+
+  return newToken;
+};
+
+const getEsmImportFixer = function (tokenLiteral, updated) {
+  return function (fixer) {
+    return fixer.replaceText(excludeParenthesisFromTokenLocation(tokenLiteral), updated);
+  };
+};
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -67,7 +114,7 @@ module.exports = {
       description: 'Ensure consistent use of file extension within the import path.',
       url: docsUrl('extensions'),
     },
-
+    fixable: 'code',
     schema: {
       anyOf: [
         {
@@ -103,6 +150,8 @@ module.exports = {
         },
       ],
     },
+
+    hasSuggestions: true,
   },
 
   create(context) {
@@ -114,13 +163,17 @@ module.exports = {
     }
 
     function isUseOfExtensionRequired(extension, isPackage) {
-      return getModifier(extension) === 'always' && (!props.ignorePackages || !isPackage);
+      return getModifier(extension) === 'always' && ((!props.ignorePackages || !isPackage) || props.enforceEsmExtensions) ;
     }
 
     function isUseOfExtensionForbidden(extension) {
       return getModifier(extension) === 'never';
     }
 
+    function isUseOfEsmImportsEnforced() {
+      return props.enforceEsmExtensions === true;
+    }
+
     function isResolvableWithoutExtension(file) {
       const extension = path.extname(file);
       const fileWithoutExtension = file.slice(0, -extension.length);
@@ -137,6 +190,56 @@ module.exports = {
       return false;
     }
 
+    function getEsmExtensionReport(node) {
+
+      const esmExtensions = ['.js', '.ts', '.mjs', '.cjs'];
+      esmExtensions.push(...esmExtensions.map((ext) => `/index${ext}`));
+
+      const importSource = node.source;
+      const importedPath = importSource.value;
+      const cwd = context.getCwd();
+      const filename = context.getFilename();
+      const relativeFilePath = path.relative(cwd, filename);
+      const relativeSourceFileDir = path.dirname(relativeFilePath);
+      const absoluteSourceFileDir = path.resolve(cwd, relativeSourceFileDir);
+      const importedFileAbsolutePath = path.resolve(absoluteSourceFileDir, importedPath);
+      const importOrExportLabel = node.type.match(/import/i) != null ? 'import of' : 'export from';
+      let correctImportPath = null;
+      try {
+        for (let i = 0; i < esmExtensions.length; i++) {
+          const ext = esmExtensions[i];
+          const potentialImportPath = `${importedFileAbsolutePath}${ext}`;
+          if (fileExists(potentialImportPath, context)) {
+            correctImportPath = importedPath + ext;
+            break;
+          }
+        }
+      } catch (err) {
+        return null;
+      }
+      if (correctImportPath == null) {
+        return null;
+      }
+
+      if (correctImportPath.match(/^\./) == null) {
+        correctImportPath = `./${correctImportPath}`;
+      }
+      const suggestionDesc = `Use "${correctImportPath}" instead.`;
+      const fix = getEsmImportFixer(node.source, correctImportPath);
+
+      return {
+        message: `Invalid ESM ${importOrExportLabel} "${importedPath}". ${suggestionDesc}`,
+        node,
+        suggest: [
+          {
+            desc: suggestionDesc,
+            fix,
+          },
+        ],
+        fix,
+      };
+    }
+
     function checkFileExtension(source, node) {
       // bail if the declaration doesn't have a source, e.g. "export { foo };", or if it's only partially typed like in an editor
       if (!source || !source.value) return;
@@ -171,11 +274,16 @@ module.exports = {
         const extensionRequired = isUseOfExtensionRequired(extension, isPackage);
         const extensionForbidden = isUseOfExtensionForbidden(extension);
         if (extensionRequired && !extensionForbidden) {
-          context.report({
-            node: source,
-            message:
-              `Missing file extension ${extension ? `"${extension}" ` : ''}for "${importPathWithQueryString}"`,
-          });
+          const esmExtensionsReport = isUseOfEsmImportsEnforced() ? getEsmExtensionReport(node) : null;
+          if (esmExtensionsReport != null) {
+            context.report(esmExtensionsReport);
+          } else {
+            context.report({
+              node: source,
+              message:
+                `Missing file extension ${extension ? `"${extension}" ` : ''}for "${importPathWithQueryString}"`,
+            });
+          }
         }
       } else if (extension) {
         if (isUseOfExtensionForbidden(extension) && isResolvableWithoutExtension(importPath)) {

tests/src/rules/extensions.js

@@ -90,6 +90,16 @@ ruleTester.run('extensions', rule, {
       options: [ 'never', { ignorePackages: true } ],
     }),
 
+    test({
+      code: `
+        import foo from './foo.js'
+        import bar from './bar/index.js'
+        import Component from './Component.js'
+        import express from 'express'
+      `,
+      options: [ 'always', { enforceEsmExtensions: true, ignorePackages: true } ],
+    }),
+
     test({
       code: 'import exceljs from "exceljs"',
       options: [ 'always', { js: 'never', jsx: 'never' } ],
@@ -357,6 +367,39 @@ ruleTester.run('extensions', rule, {
       ],
     }),
 
+    test({
+      code: `
+        import testModule from './test-module'
+        import bar from './bar'
+        import Component from './Component'
+        import express from 'express'
+      `,
+      options: [ 'always', { enforceEsmExtensions: true, ignorePackages: true } ],
+      errors: [
+        {
+          message: 'Invalid ESM import of "./test-module". Use "./test-module/index.js" instead.',
+          line: 2,
+          column: 9,
+        },
+        {
+          message: 'Invalid ESM import of "./bar". Use "./bar.js" instead.',
+          line: 3,
+          column: 9,
+        },
+        {
+          message: 'Missing file extension for "./Component"',
+          line: 4,
+          column: 31,
+        },
+      ],
+      output: `
+        import testModule from './test-module/index.js'
+        import bar from './bar.js'
+        import Component from './Component'
+        import express from 'express'
+      `,
+    }),
+
     test({
       code: `
         import foo from './foo.js'