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')

Answer 1

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.

Answer 2

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.

Answer 3

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 typings-core@1.3.1 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"
ntvs-typings-acquisition-tool@1.0.0 ..\..\..\..\..\node_modules\ntvs-typings-acquisition-tool
├── minimist@1.2.0
└── typings-core@1.3.1 (array-uniq@1.0.3, thenify@3.2.0, zip-object@0.1.0, popsicle-status@2.0.0, popsicle-retry@3.2.1, listify@1.0.0, promise-finally@2.2.1, xtend@4.0.1, graceful-fs@4.1.5, throat@3.0.0, lockfile@1.0.1, strip-bom@2.0.0, sort-keys@1.1.2, string-template@1.0.0, make-error-cause@1.2.1, any-promise@1.3.0, has@1.0.1, rc@1.1.6, object.pick@1.1.2, debug@2.2.0, mkdirp@0.5.1, invariant@2.2.1, configstore@2.0.0, parse-json@2.2.0, touch@1.0.0, detect-indent@4.0.0, is-absolute@0.2.5, popsicle-proxy-agent@3.0.0, rimraf@2.5.4, popsicle@8.0.4, typescript@1.8.7)

-----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.

Answer 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.

Answer 5

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.

Answer 6

What I did was touch the lightbulb and chose the option that said add reference to node/node.d.ts to the proyect.

After that I just wrote: /// at the top of the editor and it worked for me.

Answer 7

I got express intellisense to work with express by downloading the express.d.ts file from https://github.com/borisyankov/DefinitelyTyped, and referencing it with a path relative to my project dir:

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

I'm still trying to find what /typings refers to. It might also be nice to configure d.ts files as part of project settings.

Edit:

Found it.

~/Downloads/VSCode-osx
▶ find . -type d -name "typings"
./Visual Studio Code.app/Contents/Resources/app/node_modules/applicationinsights/Scripts/typings

So they have node, async, and applicationInsights bundled into the OSX .app by default. Anything else you want I guess you can simply include as I did above.

Edit Edit:

The tsd package manager mentioned by @kurtcorbett looks nice, use that.