How to Import Intellisense files into vsCode (Visual Studio Code)

Question

I'm not sure I understand how the intellisense works for Microsoft's new vsCode text editor. In the docs under the "Great Code Editing Experience" heading, it shows a warning under the node global variable __dir and offers a lightbulb suggestion to add a reference to a d.ts file so you can get intellisense for node:

I have 2 questions:

1 - How do I import DefinitelyTyped files (d.ts) directly (without editor suggesting it) or do I have to copy them from the github source and put them in a typings directory?

2 - Can I get intellisense for any library that has a typescript definition? I tried the below, but when I type in express. or when. , I don't get any intellisense. However, I do get node intellisense.

/// <reference path="../typings/node/node.d.ts"/>
/// <reference path="../typings/express/express.d.ts" />

var when    = require('when')
  , express = require('express')
  , gulp    = require('gulp')

Solution 1

UPDATE: August 2016: TSD is now depreciated. instead use https://www.npmjs.com/package/typings

npm install typings --global

OR

If using VS2015 NodeJS v1.2 released 29th July 2016 then [email protected] is installed automatically for you during first use:

Executing command 'npm install "C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO 14.0\COMMON7\IDE\EXTENSIONS\MICROSOFT\NODE.JS TOOLS FOR VISUAL STUDIO\1.2\TypingsAcquisitionTool"
[email protected] ..\..\..\..\..\node_modules\ntvs-typings-acquisition-tool
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

-----Original Answer-----

There is a package manager for Typescript Definition Files. This is a community driven repository containing Typescript definitions for many popular libraries.

You can install tsd by following the instructions here.

Once you install tsd globally, you can install packages from your project root in the command line like this:

$ tsd install express --save

This will create a typings directory if one doesn't exist and adds an express directory with an express.d.ts file inside.

It also creates a tsd.d.ts file that contains the references to all of your tsd files. If I install a few more tsd's, here is what it looks like.

Now to access my tsd files, all I need to do is reference their path in at the top of my code with /// <reference path="typings/tsd.d.ts" />

Now I get intellisense.

Solution 2

In Jan'2016 "tsd" package was deprecated. Use "typings" package instead.

See https://github.com/DefinitelyTyped/tsd/issues/269

And you could find in VS Code (ext install) two extentions - Typings Installer and Typings which helps to install d.ts definition files easily from VS Code.

Solution 3

You can achieve this with the jsconfig.json file after the April 2017 release.

Sample content of the file:

{
 "typeAcquisition": {
     "include": [
         "jquery",
          "underscore"
     ]
   }
}

See the jsconfig.json reference for VSCode here.

Solution 4

Check if you are working in Explicit Project mode (REF: https://code.visualstudio.com/Docs/languages/javascript#_javascript-projects-jsconfigjson)

What is happening?

In the Explicit Project Mode, VS Code uses "main.d.ts" files under the typings folder for intellisense. This file will have reference to other definition files and hence the intellisence works perfect. In my case, the main.d.ts looks like the following

/// <reference path="main/ambient/express-serve-static-core/index.d.ts" />
/// <reference path="main/ambient/express/index.d.ts" />
/// <reference path="main/ambient/node/index.d.ts" />
/// <reference path="main/ambient/serve-static/index.d.ts" />

In the File Scope Mode, VS Code will not check for the typings definitions and hence no intellisence. In such case to add intellisence, the reference tag will come handy as you are referring the definition manually. If you are referring manually, refer the main.d.ts under the typings rather than going for definition for a specific library. This will make your code less reference dense.

Also note that the typescript equivalent for jsconfig.json is tsconfig.json which will also set the editor to Explicit Project mode.

Solution 5

If you'd like to automatically install the type definitions for your packages, you could download the Types auto installer extension. It will watch your package.json and bower.json and automatically install types for you.

I think the best part about this extension is that you don't have to include the /// reference lines in your code because it installs the types through npm.

View more solutions