CODEWITHSUNDEEP
visual-studio-code
ify.io
ify.io

Reputation: 631

Is there auto-import functionality for typescript in Visual Studio Code?

Is there any shortcut that will allow me to auto generate my typescript imports? Like hitting ctrl+space next to the type name and having the import declaration placed at the top of the file. If not, what about intellisense for filling out the module reference path so that I wont have to do it manually? I would really love to use vscode but having to do manual imports for typescript is killing me.

Upvotes: 14

Views: 12407

Answers (5)

flipchart
flipchart

Reputation: 6578

This has just been released in version 1.18.

From the release notes:

Auto Import for JavaScript and TypeScript

Speed up your coding with auto imports for JavaScript and TypeScript. The suggestion list now includes all exported symbols in the current project. Just start typing:

Global symbols are now shown in the suggestion list

If you choose one of the suggestion from another file or module, VS Code will automatically add an import for it. In this example, VS Code adds an import for Hercules to the top of the file:

After selecting a symbol form a different file, an import is added for it automatically

Auto imports requires TypeScript 2.6+. You can disable auto imports by setting "typescript.autoImportSuggestions.enabled": false.

Upvotes: 2

kcpr
kcpr

Reputation: 1105

I believe the plugin called "TypeScript Importer" does exactly what You mean: https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter .

Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion item to allow code completion.

enter image description here

With it You can truly use Ctrl+Space to choose what exactly You would like to be imported.

You can find and install it from Ctrl+Shift+X menu or just by pasting ext install tsimporter in Quick Open menu opened with Ctrl+P.

Upvotes: 2

John Weisz
John Weisz

Reputation: 32012

I know a solution for Visual Studio (not Visual Studio Code, I'm using the 2015 Community edition, which is free), but it needs some setup and coding -- however, I find the results to be adequate.

Basically, in Visual Studio, when using the Web-Essentials extension, .ts files can be dragged into the active document to automatically generate a relative reference path comment:

/// <reference path="lib/foo.ts" />

With which of course we might as well wipe it, because it's an import statement we need, not a reference comment.

For this reason, I recently wrote the following command snippet for Visual Commander, but it should be easily adaptable to other use casese as well. With Visual Commander, your drag the needed imports into the open document, then run the following macro:

using EnvDTE;
using EnvDTE80;
using System.Text.RegularExpressions;

public class C : VisualCommanderExt.ICommand
{
    // Called by Visual Commander extension.
    public void Run(EnvDTE80.DTE2 DTE, Microsoft.VisualStudio.Shell.Package package) 
    {
        TextDocument doc = (TextDocument)(DTE.ActiveDocument.Object("TextDocument"));
        var p = doc.StartPoint.CreateEditPoint();
        string s = p.GetText(doc.EndPoint);

        p.ReplaceText(doc.EndPoint, this.ReplaceReferences(s), (int)vsEPReplaceTextOptions.vsEPReplaceTextKeepMarkers);
    }

    // Converts "reference" syntax to "ES6 import" syntax.
    private string ReplaceReferences(string text)
    {
        string pattern = "\\/\\/\\/ *<reference *path *= *\"([^\"]*)(?:\\.ts)\" *\\/>";

        var regex = new Regex(pattern);
        var matches = Regex.Matches(text, pattern);

        return Regex.Replace(text, pattern, "import {} from \"./$1\";");
    }
}

When running this snippet, all reference comments in the active document will be replaced with import statements. The above example is converted to:

import {} from "./lib/foo";

Upvotes: 1

fredericlb
fredericlb

Reputation: 301

The files attributes in the tsconfig.json file allows you to set your reference imports in your whole project. It is supported with Visual Studio Code, but please note that if you're using a specific build chain (such as tsify/browserify) it might not work when compiling your project.

Upvotes: 0

John Papa
John Papa

Reputation: 22338

There are rumors of making it support tsconfig.json (well, better than rumors). This will allow us to be able to use all files for our references.

Your feature would be to create an auto import of all commonly used 3rd party libs into the typings. Perhaps auto scan the files and create a list of ones to go gather. Wouldn't it be fine to just have a quick way to add several of these using tsd directly from Code (interactively)?

Upvotes: 2

Related Questions