extensions: use the extensionAlias option of import-resolver-typescript

src/rules/extensions.js

@@ -4,6 +4,7 @@ import resolve from 'eslint-module-utils/resolve';
 import { isBuiltIn, isExternalModule, isScoped } from '../core/importType';
 import moduleVisitor from 'eslint-module-utils/moduleVisitor';
 import docsUrl from '../docsUrl';
+import has from 'has';
 
 const enumValues = { enum: [ 'always', 'ignorePackages', 'never' ] };
 const patternProperties = {
@@ -156,7 +157,7 @@ module.exports = {
 
       // get extension from resolved path, if possible.
       // for unresolved, use source value.
-      const extension = path.extname(resolvedPath || importPath).substring(1);
+      const extension = path.extname(resolvedPath || importPath).slice(1);
 
       // determine if this is a module
       const isPackage = isExternalModule(
@@ -165,7 +166,8 @@ module.exports = {
         context,
       ) || isScoped(importPath);
 
-      if (!extension || !importPath.endsWith(`.${extension}`)) {
+      const validExtensions = getValidExtensionFor(context, importPath, extension);
+      if (!extension || !validExtensions.some((extension) => importPath.endsWith(`.${extension}`))) {
         // ignore type-only imports and exports
         if (node.importKind === 'type' || node.exportKind === 'type') { return; }
         const extensionRequired = isUseOfExtensionRequired(extension, isPackage);
@@ -190,3 +192,39 @@ module.exports = {
     return moduleVisitor(checkFileExtension, { commonjs: true });
   },
 };
+
+/**
+ * Taken from `eslint-import-resolver-typescript`.
+ * This could be imported from current versions of that plugin,
+ * but this project still depends on an older version.
+ * Also, importing it would add a dependency, or at least an
+ * optional peer dependency - copying the code seems like the
+ * more sane option.
+ * [LICENSE](https://github.com/import-js/eslint-import-resolver-typescript/blob/71b23a206514842fef70a99220e5ffb1d6da2a0e/LICENSE)
+ */
+const defaultExtensionAlias = {
+  '.js': [
+    '.ts',
+    // `.tsx` can also be compiled as `.js`
+    '.tsx',
+    '.d.ts',
+    '.js',
+  ],
+  '.jsx': ['.tsx', '.d.ts', '.jsx'],
+  '.cjs': ['.cts', '.d.cts', '.cjs'],
+  '.mjs': ['.mts', '.d.mts', '.mjs'],
+};
+
+function getValidExtensionFor(context, importPath, resolvedExtension) {
+  let extensionAlias = {};
+  if (context.settings['import/resolver']  && context.settings['import/resolver'].typescript) {
+    extensionAlias = context.settings['import/resolver'].typescript.extensionAlias || defaultExtensionAlias;
+  }
+
+  const importedExtension = path.extname(importPath);
+  if (has(extensionAlias, importedExtension)) {
+    return extensionAlias[importedExtension].map((ext) => ext.slice(1));
+  }
+  return [resolvedExtension];
+}
+

tests/files/typescript-tsx.tsx

@@ -0,0 +1 @@
+export const foo = <div>Foo</div>;

tests/files/typescript-with-index/index.ts

@@ -0,0 +1 @@
+export const foo = "foo";

tests/src/rules/extensions.js

@@ -3,6 +3,15 @@ import rule from 'rules/extensions';
 import { getTSParsers, test, testFilePath, parsers } from '../utils';
 
 const ruleTester = new RuleTester();
+const ruleTesterWithTypeScriptImports = new RuleTester({
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
+});
 
 ruleTester.run('extensions', rule, {
   valid: [
@@ -642,5 +651,64 @@ describe('TypeScript', () => {
           }),
         ],
       });
+
+      ruleTesterWithTypeScriptImports.run(`${parser}: allow importing JS extension when a TS file is resolved`, rule, {
+        valid: [
+          test({
+            code: 'import { foo } from "./typescript.js";',
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript-tsx.jsx";',
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript-tsx.js";',
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript-with-index/index.js";',
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript.js";',
+            options: [
+              'always',
+              { ts: 'never', tsx: 'never', js: 'always', jsx: 'always' },
+            ],
+          }),
+        ],
+        invalid: [
+          test({
+            code: 'import { foo } from "./typescript";',
+            errors: ['Missing file extension "ts" for "./typescript"'],
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript-tsx";',
+            errors: ['Missing file extension "tsx" for "./typescript-tsx"'],
+            options: [
+              'always',
+            ],
+          }),
+          test({
+            code: 'import { foo } from "./typescript-with-index";',
+            errors: ['Missing file extension "ts" for "./typescript-with-index"'],
+            options: [
+              'always',
+            ],
+          }),
+        ],
+      });
     });
 });