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,47 @@ 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 === null || err === void 0 ? void 0 : 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 +115,7 @@ module.exports = {
  description: 'Ensure consistent use of file extension within the import path.',
  url: docsUrl('extensions'),
  },
-
+ fixable: 'code',
  schema: {
  anyOf: [
  {
@@ -103,6 +151,8 @@ module.exports = {
  },
  ],
  },
+
+ hasSuggestions: true,
  },
 
  create(context) {
@@ -114,13 +164,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 +191,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 +275,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'