Provide Intellisense for module import

[dbaeumer]

From @SetTrend on January 21, 2016 14:56

TypeScript module exports can be fairly opaque in regard to their exports. Particularly when modules grow bigger.

With bigger modules (particularly with modules exporting other modules' exports) it becomes very hard to see which entities a module actually is exporting.

So I suggest to provide an Intellisense feature for module imports, which

1. provides a file browser dropdown box displaying valid module files
2. provides a module browser dropdown box displaying an imported module's exported entities

#### The first part of the suggestion I propose to work like `LINQ`:

After entering the keyword from and hitting the [TAB] key, a file browser dropdown should be displayed, listing all valid module files. After confirming a file from the dropdown box, VS Code should automatically create a full import {} from "[...]" statement, move the cursor position between the curly braces and display a dropdown box listing all the exports of that module.

Here's a visualization:

#### The second part of the suggestion I propose to work like common Intellisense:

Everytime when hitting [CTRL]+[SPACE] from within the curly braces of an import statement, dropdown box (2) should be displayed, listing the module's exported entities. Selecting an entry should then add the selected export entity to the list of already imported entities within the curly braces.

Copied from original issue: microsoft/vscode#2153

[dbaeumer]

From @atifsyedali on March 2, 2016 20:39

We have around 25k lines of Typescript with hundreds of Typescript modules, and we use CommonJS style module imports.

Not having Intellisense for module import as described here is the main reason why we don't use VS Code. Would be really nice if you can add this (or push the Typescript team to provide it on a language service level :) )

[dbaeumer]

From @Haemoglobin on July 16, 2016 8:58

👍

[dbaeumer]

This is actually a feature that has to come from the tsserver.

[kitsonk]

Dupe of #2371? Which was declined at too complex.

(BTW, Search is a useful feature)

[SetTrend]

Not quite a dupe, as #2371 is about changing the syntax, whereas this issue is about providing a list of exported symbols recursively.

Shouldn't be too complex. First implementation iteration:

1. Load the .ts file mentioned in the from,
2. enumerate and return all the exports,
3. recursively enumerate all re-exports and execute (1.) on them.

[mhegazy]

#188 provides completions for module names and /// <reference path. We already have completions for module exports, i.e. import { | } from "someModule". Would these cover this request?

I am not too crazy about typing from first, since it is really a different syntax. and i do agree that this would have been a better module import syntax, but this is really a question to TC39 members.

[SetTrend]

Thanks, Mohamed,

yes, the typescript-hero VS Code extension seems to be right the thing I've been looking for.

Thanks for sharing this link with me! 😀 👍

Cheers,
Axel

/cc: @dbaeumer

[waderyan]

It seems like #188 covers this request. @dbaeumer can you check it out? If it does then we can close this issue.

[dbaeumer]

@waderyan no not exactly the same. He has a nice suggestion of using snippets to create import statements. The major problem is that if write a new import statement then you do import {} from 'fs' and then you have to move the cursor back into {} to complete symbols. This is not very user friendly and I like his suggestion. But that might need a combination of work on our end (extend the snippet UI) and may be API on the tsserver.

[mhegazy]

this should be covered by #7849

[waderyan]

@mhegazy this actually looks like a duplicate of #12243

See my comment in that issue. I propose we reopen one of these.