Option to add .js extension to auto-imports in TypeScript

[cyrilletuzi]

Proposal:

An opt-in VS Code option so auto-imports in TypeScript generate this:

import { Test } from './test.js';

instead of:

import { Test } from './test';

Why?

We are close to be able to develop in JavaScript/TypeScript without any loader tools. <script type="module"> is already here since Chrome 61, Firefox 60, Safari 10.1 and Edge 16. For now, it was not really used in development mode because it didn't support bare identifiers yet (import { fromEvent } from 'rxjs').

But it's coming: import maps are in development in Chromium. Unfortunately, it will work for JavaScript but not for TypeScript.

Why? Due to the early days of TypeScript, the de-facto standard for imports in TypeScript is to omit the extension:

import { Test } from './test';

The issue is: it's also exactly what is compiled. Even if it means compiled code is non-standard and broken, TypeScript team explained in #13422, for reasons beyond my understanding, that TypeScript won't touch to import paths.

Hopefully, there is already a solution since TypeScript 2.0 (see "Module identifiers allow for .js extension"), as TypeScript understands this:

import { Test } from './test.js';

by looking for ./test.ts or ./test.js.

So an option in VS Code to add the .js extension on auto-imports would be great for development.

Details

The option should be taken into account on:

• auto-imports on suggestion selection
• auto-imports on quick fixes (everywhere)

Special case: given this structure:

/components
  /index.ts

Auto-imports with the new option should generate this:

import { Test } from './components/index.js';

instead of:

import { Test } from './components';

even if moduleResolution is set to node.

To summarize: with the option enabled, it should do the same imports as if it was a JavaScript project.

[mjbvz]

Duplicate of #28288?