Context

In JS/TS file, when using an identifier which is not found in the file, but is found somewhere else in the repo (e.g. another open file, or somewhere else), VSCode will show a Quick Fix (cmd-.) suggestion to import the file.

When followed, this will add a top-level static import

import { FOO_BAR } from 'web-ui/foobar';

Feature request

It would be useful for Quick Fix menu to also have a variant of a suggestion which would add a local, dynamic import(), which would be inserted just above the line where the identifier is first used:

So the menu would be like:

• Quick Fix
  • Add import from "web-ui/foobar"
  • Add dynamic import from "web-ui/foobar"

And the code would look like:

        if (doSomething) {
            const { FOO_BAR } = await import('web-ui/foobar'); 
            // or, depending on how the export is defined:
            // const { FOO_BAR } = (await import('web-ui/foobar')).default;
            const value = FOO_BAR;

Potential drawbacks

• If for every static import suggested, there's an equivalent dynamic import, the Quick Fix list may grow substantially, especially if FOO_BAR identifier is present in many files.

Open questions

• To be decided if the dynamic import suggestion would show up:

  • everywhere
  • or only in functions?
  • or only in functions and if blocks? etc.

• If a dynamic import is added in a function, should the function be converted to async function automatically?

• Perhaps the dynamic import variant could be behind a flag (enabled by default for discoverability; easy to disable if someone doesn't like it, and prefers to only have static imports in the quick fix)

Extra considerations

There might be already existing dynamic imports that could be amended. For example, say the code is:

        if (doSomething) {
            const { QUUX } = await import('web-ui/foobar'); 
            const value = FOO_BAR;

In that case, all dynamic imports in scope should be analyzed, and the editor should suggest to update the existing

const { QUUX } = await import('web-ui/foobar');

with const { FOO_BAR, QUUX } = ....