[ES6] Auto imports with completion

[angelozerr]

It should really fantastic if tsserver completion command could support auto import with completion like WebStorm provides:

See http://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/#ng2-imports for more information.

[angelozerr]

@DanielRosenwasser @mhegazy is there any chance that tsserver could provide this feature? If yes in which RoadMap? Thanks!

[RyanCavanaugh]

This would be really complex and is unlikely to be a priority relative to other work for quite a while

[angelozerr]

Thank's @RyanCavanaughfor your answer. I understand that it's not your priority but a lot of users from VSCode, typescript.java complains about this missing features compared to Jetbrains.

I know that there are VSCode extension to do that, but it's not clean because there are double TypeScript parsing (one by tsserver and one by the extension). It should be very cool if tsserver provides this feature.

[mhegazy]

#11768 would handle part of that, though not through completion but through quick fixes.

[angelozerr]

Thanks @mhegazy for your answer. #11768 is a great feature. I'm implementing quickfix support inside Eclipse. I'm very enthousiasm to test it once my implementation will be finished.

Do you think you could use #11768 logic to support auto import with completion?

[mhegazy]

Do you think you could use #11768 logic to support auto import with completion?

What i meant is the user would get some of the functionality with the quick fix. possibly we can leverage some of the logic later on to support the feature in the OP.

the main issue is that we need to have our completion include some sort of edit ranges, so that accepting the completion would generate multiple changes in the file. which is not that hard to do to be frank, bit it is work.

[angelozerr]

Thanks again @mhegazy to have taking time to answer me.

What i meant is the user would get some of the functionality with the quick fix.

Yes it's already a great improvement.

possibly we can leverage some of the logic later on to support the feature in the OP.

It was the answer that I wished:) Hope one day auto import will be implemented.

the main issue is that we need to have our completion include some sort of edit ranges, so that accepting the completion would generate multiple changes in the file. which is not that hard to do to be frank, bit it is work.

Ok I understand. I though the hard task was about the scan files (to have the best performance), because in this case you must scan about the whole ts files in the project and not only declared files as module (with import, require).

[waderyan]

Feedback from VS Code users - microsoft/vscode#818

[angelozerr]

@mhegazy I'm sorry to insist with this feature, but is there an chance that auto import could be added inside RoadMap https://github.com/Microsoft/TypeScript/wiki/Roadmap ?

[mhegazy]

We are planning the next release now. should have more information about what we can take on soon.

[angelozerr]

Thank's @mhegazy!

[thekalinga]

This more than anything else is the biggest hurdle for users to move away from Webstorm.
Note sure why it is not yet listed in the Roadmap as of yet :(

[donaldpipowitch]

@thekalinga If you want to switch from WebStorm to VS Code you can use a plugin to solve this for now. In my experience it works good enough and similar to WebStorm.

[thekalinga]

@donaldpipowitch

Thanks for sharing this. I just tried using this. It was unable to show suggestion for Optional class in angular 2

It seems to be searching my source files instead of the dependencies under the source tree (usually in node_modules)

This seems like a decent attempt to show the suggestions atleast based on the code you already wrote, but its no where near webstorm

Please let me know if could import a class from a library that's already downloaded by npm but not yet imported into any classes in your project. I could not get this working.

I tried Optional as a test case as I know this is something thats part of @angular/core

May be I'm missing something

[thekalinga]

Just looked at their TODO

Follow up ///<reference path="..." /> declarations
Process node_modules/**/*.d.ts
Process typings/**/*.d.ts

They have this in the list of todos. Hopefully once it is implemented, there will some working version similar to Webstorm.

Thanks in anycase

[thekalinga]

I just came across this other plugin called Typescript Hero

This auto detects all classes from the dependencies aswell & allows you to organise imports (incase if you delete a class reference)

Try this. Some relief for TS developers.

Disclosure: I'm in no way associated with the developer

[angelozerr]

@donaldpipowitch @thekalinga the big problems with thoses kinds of VSCode extensions is that there is a double parsing of TypeScript files (from tsserver and from the extension). I think it should be better than tsserver provides this feature for performance and for the other IDE, Editors.

[donaldpipowitch]

@angelozerr Sure, it would be better to solve this inside the language service. But most people just asked for feature parity between VS Code and WebStorm and at the end WebStorm probably parses twice as well.

[waderyan]

Thank you for your feedback here! Although not tracked on TypeScript's repo, this is an issue we have high on our priority list on the VS Code side. As we nail down the planning more we will make it public.

[AndyMoreland]

I use (and maintain) the tsunami-code vscode extension to do this.

[thekalinga]

@waderyan Whenever you have an update, is it possible to post update here/link to the vscode issue where we can expect updates (so that I can subscribe to that issue instead)

Thanks

[angelozerr]

There is a PR for this issue #13921 but I don't know when it will be available?

@mhegazy do you know when #13921 will be merged at master.

[mhegazy]

Fixed by #19069