Vscode: feature request: Auto import dependencies

[wxqqh]

Can VSCode support automatically import dependencies just link eclipse(ctrl+shift+o)?

[jrieken]

@wxqqh Any specific languages you have in mind?

[wxqqh]

en, such as TypeScript~~~ I haven't tried any other languages.

Just like this, the workspace:

root(workspace root)
  │
  ├ route
  │  │
  │  ├ index.ts
  │  ...
  ├ util
  │  │
  │  ├ utilsubdir <-- this
  │  │  │
  │  │  ├ util1.ts
  │  │  ├ util2.ts
  │  ├ util3.ts
  │ ...
  │  
  ...

In index.ts, if need to use module util1, util2, i must

import * as util1 from "../util/utilsubdir/uitl1.ts";
import * as util2 from "../util/utilsubdir/uitl2.ts";

In this process, it's easy to get wrong.

It maybe to write the wrong path utilSubDir. It can run smoothly on window, but not in *nux.
Or I want to rename the directory to otherutil. All files that use these module must be modified.

So, if VSCode can support this feature, it will be very easy to resolve by just press the shortcut key.
Or show the import suggession/content assist message when i write code util1.xxx().
Of course, the same as dependencies modules which written in package.json.

[choeller]

This would be a really cool feature. I'm currently using Webstorm for Angular 2 development - there you can just type util1 in your code and then hit ALT+ENTER which would suggest adding an import... Something like this would be quite nice!

[Artazor]

It is a hot feature!
I suspect, it will speedup the adoption of the VSCode itself.

Desired behavior for TypeScript:

• Identify all project *.ts and *.d.ts files including referenced ones
• Collect all exported names from those files
• When identidier is not resolved suggest importing it from the list of possible files
• On import maintain import {member1,... memberN} from "../../relative/path" for project files and import {member1,... memberN} from "module/path" for node modules

This scenario is not suited well for CommonJS export = smth style exports, nevertheless, it would be great for the new ES6 module style exports that eventually replace the old style.

@dbaeumer you are our hope!

[dbaeumer]

@Artazor the actual implementation of that feature has to come from the TS team which maintain the tsserver which we use for TS language smartness. They have several bugs for this:

• provide quick fixes on unresolved imports
• provide code complete in import statements (e.g. the module / file part)

[dbaeumer]

The repository is: https://github.com/Microsoft/TypeScript

[rolandoldengarm]

@Artazor the actual implementation of that feature has to come from the TS team which maintain the tsserver which we use for TS language smartness. They have several bugs for this:

provide quick fixes on unresolved imports
provide code complete in import statements (e.g. the module / file part)

Why / how is Webstorm able to do it? That seems to work pretty fine.

[dbaeumer]

@Artazor didn't make myself clear enough: this is not a technical problem. The TypeScript team is working on addressing it. I The coding of that feature has to happen in this https://github.com/Microsoft/TypeScript and not in VS Code itself. We use the tsserver from that repository via npm inside VS Code.

[vytautas-pranskunas-]

Is there any progress on this?

[texastoland]

See Microsoft/TypeScript#188 CC @jbrownson.

[nfantone]

So now that https://github.com/Microsoft/TypeScript/issues/188 has been closed and a bunch of extensions already provide autoimport for TS, will this be baked into VSCode? Or will it remain something from userland?

[rolandoldengarm]

Yeah, I'm very interested to know that as well. Along with VSTS integration it's the most important missing feature I believe.

[dbaeumer]

Just for the record. Microsoft/TypeScript#188 will not solve this request. Microsoft/TypeScript#188 is about code complete in file name in import statements. It will not automatically add imports like Ctrl+Shift+O in Eclipse.

Microsoft/TypeScript#188 will very likely land in the next VS Code release

[OliverJAsh]

Potentially solved by this plugin https://github.com/soates/Auto-Import

[caseyhoward]

@OliverJAsh I use this and it's great. However, I don't think it supports removing unused imports and sorting them. I could be wrong though.

[nfantone]

@OliverJAsh and @caseyhoward Have you guys tried Typescript Hero?

[dbaeumer]

This is of dup of the Orange code assist example. The item it adds is the cleanup of unused imports.

[nfantone]

@dbaeumer Is there any place where "auto-importing" is being tracked as an issue, then?

[dbaeumer]

Yes, @waderyan knows which I forgot to ping in my last comment.

[rolandoldengarm]

Okay, but will THIS issue solve it? Or what issue will solve it? Why do we need extensions for such a basic feature? https://github.com/Microsoft/vscode/issues/2635#issuecomment-253156974

[nfantone]

@roblourens Clearly, you didn't read into the rest of the comments.

[waderyan]

I believe this is the correct issue - https://github.com/Microsoft/TypeScript/issues/7849

[fightingcat]

It is annoying writing code without this feature, I've tried typescript-hero, seems that it doesn't import symbols in module declaration in d.ts. (I want auto alias actually.)

[PhoneixS]

I think that now Typescript 2.2 and Visual Studio Code 1.10 allow adding missing imports as stated on the blog:
https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/
And the Code support:
https://code.visualstudio.com/updates/v1_10#_languages

So, should this issue be closed?

[fightingcat]

what we request is different with what they stated, I don't want to select or move cursor to every symbols to fix missing imports, fixing every missing import automatically with one single command is better.
(doing this one by one, again and again is particular rediculous while writing variable declarations, really disturb the mind.)

[ng-state]

Is there a way to say for auto-import to use single quotes?

[mjbvz]

@ng-state This is being tracked upstream: https://github.com/Microsoft/TypeScript/issues/13270

[mjbvz]

Yes, VScode 1.10 added a quick fix for imports but as @fightingcat notes, we do not automatically apply these fixes and I believe that is what this issue is tracking. This feature would likely behave like eslint'/tslint's autoFixOnSave option.

We will only be able to auto fix symbols that have a single potential import. Otherwise, you will still have to manually apply the quick fix and select the correct import to use. We also want to make sure this does not get in the way while you are working on a file

[ng-state]

@mjbvz it was opened in Jan 3 and still not fixed.. forcing devs to correct each import by hand :(

[vytautas-pranskunas-]

What is missing - intellisence. E.g. when using AutoImport plugin you begin to write class name and you can pick it from the list, once picked import is added automatically. With current implementation developer needs to know exact class name to get yellow bulb for import.

[fightingcat]

In my view, this feature is much more urgent than others, would save much time.

[shahata]

Are there any plans to have this also for javascript?

[theamazingfedex]

Having this feature for .net would be great..

[mjbvz]

Adding to the October iteration plan. This will depend on https://github.com/Microsoft/TypeScript/pull/19069 which should land in TypeScript 2.6

[cyrilletuzi]

@mjbvz As I'm not sure it's a TS or VS Code problem, please see Microsoft/TypeScript#19417 about an important problem with this new feature.