Typescript import statements

[activebiz]

For import statement in typescript it would be nice if we can reference an object in a class (for e,g.) and the IDE can write (when you click on the object reference Foo in example below) an import statement for you.
For e.g.

import {Foo} from "../../../bar/somelongpath/foo"

export class Test {
private f: Foo;
}

Webstorm already provides this and it makes a lot of difference (productivitywise) as you dont have to manually type and figure out the path to the import statement.

[alexdima]

Should this be a quick fix proposal?

[activebiz]

apologies about this. I guess its not. Kindly move to the appropriate area as required. Or let me know if this is something I can do myself.
Thanks

[alexdima]

@activebiz No worries, you filed the issue in the right spot. I was suggesting a solution to @dbaeumer :)

[activebiz]

Nice 1 :)

[caseyhoward]

Since this isn't implemented, is there a better way than having to manually find out how to navigate to the file and typing in the import statement by hand?

[atifsyedali]

is there a better way than having to manually find out how to navigate to the file and typing in the import statement by hand?

We are really interested in that question as well. I have scoured the web and tried various IDEs but seems like Webstorm is the only one that supports this. Would be really nice if VSCode supported it.

How do folks at Microsoft writing lots of Typescript code manage their imports?

[pivalig]

+1. I use this feature in WebStorm but really want to work only in VSCode

[frederikschubert]

There is already an issue in the typescript repo for this and it is scheduled for the 2.0 release.

[egamma]

Closing as a dupe of microsoft/TypeScript#188

[dfaivre]

@egamma - just for clarity, if the linked issue gets implemented, VS Code will automatically get it as well? This is feature is one the main reasons I still use WebStorm over VS Code.

[egamma]

@egamma - just for clarity, if the linked issue gets implemented, VS Code will automatically get it as well?

this is correct, the completion list shown in VS Code are computed by the TypeScript server that also supports JavaScript.

[caseyhoward]

@egamma Are you referring to only auto-completing as you type import statements? That would be somewhat useful, but the most import thing for me is that if vscode autocompletes a reference to something that is not in scope where it autocompletes, then it adds an import statement to the top of the file for it. I don't feel like I should ever have to type an import statement by hand, with autocomplete help or not.

[atifsyedali]

Agree with @caseyhoward on automatically adding import statements to the top of the file. That's what I was referring to also in my previous comment. Webstorm currently does.

[lufzle]

Funny thing is even the Vim plugin seems to do this 😄

[tonymk]

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

[masaeedu]

@egamma I think you've misunderstood the feature request. From the issue description:

For import statement in typescript it would be nice if we can reference an object in a class (for e,g.) and the IDE can write an import statement for you.

I don't think this is implemented by the TypeScript language service, which supplies autocomplete hints but AFAIK doesn't do anything to modify the source file. Could this please be reopened?

[egamma]

@masaeedu apologies if I misunderstood you.

We have actually enriched the language API in 1.5 so that the language service cannot only provide a single completion but also a set of edits. See https://code.visualstudio.com/updates/v1_5#_extension-authoring the section 'powerful completion items'. We have added this so that this feature can be provided by the C# language service. The same will eventually happen in the TypeScript language service.

[masaeedu]

That is amazing news! The issue you linked to however (microsoft/TypeScript#188), is not quite what is being asked for. The feature being requested there is better autocomplete while you are writing an import statement. This feature is about not having to explicitly write the import statement at all.

The requested feature is the ability to reference any top level export from any resolvable module (without explicitly importing it), and have the appropriate import statement inserted at the top of the file. This feature can be found in WebStorm, as well as in the Roslyn compilers. See for example:

It would be a huge productivity boost to have something like this in VS Code (or even better, in the language service!). I can confirm that with Visual Studio Code 1.5.3 pointing to tssdk v 2.0.3, I don't see any suggestions for generating an import statement if I reference a top level export from a module I haven't imported yet. E.g. if I install rxjs, don't import it at the top of the file, and try to reference Observable, it would be great if the editor generated import { Observable } from 'rxjs/Observable'.

[masaeedu]

It is possible that you would need some work on the part of module authors to advertise which of their exports should be advertised for auto-import in this way.

[sophistyx]

isn't that what the concept of 'export' is all about - exporting something so that others can 'import' it?

[arlair]

I'm confused this is closed. As mentioned, the issue referenced for closing this as a duplicate does not seem to mention automatically creating an import statement in its description.

I installed some of the third party auto import VS Code plugins. None seemed to handle the case I was attempting, auto import statement for a decorator, but WebStorm could.

It seems this should either be re-opened or labelled as not an accepted feature.

[dbaeumer]

This is indeed not a dup of microsoft/TypeScript#188.

@waderyan we need to check with TS if they have a feature request for this. What people at the end of the day want is something like this:

• there is a type Orange in the system
• in a file A which doesn't import Orange yet the user types Org
• the system should propose Orange. Accepting it should insert Orange and should add a corresponding import statement.

[waderyan]

I think we're looking for something like this - microsoft/TypeScript#7849

@bowdenk7 - do you know of a better duplicate in TS's repo then the one I posted above?

[hadalin]

WebStorm also has an option to use single quotes for generated code

It'd be cool to have this option here too.

[dbaeumer]

@waderyan microsoft/TypeScript#7849 is what we are looking for.

[waderyan]

Great. Leaving this open on our end to track the completion of the work.

[NgxDev]

This and a more advanced git integration (like WebStorm also provides) are the only 2 reasons to why I still use WebStorm instead of VScode. Not sue which one would be more important than the other... I guess this automatic import issue, even if not by much.

[donaldpipowitch]

I installed some of the third party auto import VS Code plugins. None seemed to handle the case I was attempting, auto import statement for a decorator, but WebStorm could.

This plugin seems to solve this for me. This plugin currently has everything I need. I don't think it was mentioned here before.
But I also would like to see this feature as part of the language service as well.

[gulshan]

Probably this was done in the last release.

[thekalinga]

I dont think its fully supported. We need to type the whole class & then the quickfix can import.

@waderyan Is this a correct observation?

[pgrm]

Currently the import file names are always enclosed in double quotes " and I'm manually changing it to single quote ' is there any way to configure that?

[lekhnath]

VSCode auto imports, Linters warns, I do a manual fix. It would be really great to be able to provide quote option through settings.

[jbrownson]

There are similar problems w/ alphabetical ordering of things using tslint's "ordered-imports" feature.

[lekhnath]

Funny thing is it imports angular Component decorator from @angular/core/typings/core instead of @angular/core.

[mjbvz]

The type of quote used for imports is tracked by microsoft/TypeScript#13270

Sorting imports is being tracked by microsoft/TypeScript#10020

Closing this issue as the original feature has been implemented. If you run into any bugs with the import quick fix or have any feature suggestions around import, please open new issues.

Thanks

[daniborgs]

As @adyavanapalli very well mentioned, you can edit the typescript.json file to get around this issue on /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/typescript/snippets/ for MacOS and C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\snippets\ for Windows.

Thx buddy.