This is the second blog post in our series around developing a node.js application using Monaco. In this part you will learn how to enable IntelliSense for the libraries you are using to make the development experience a lot more pleasant.
Configure the workspace for IntelliSense
We want to enable IntelliSense for node.js, Express and the testing framework Mocha that we will use later in Part 3. For node.js and Express we use the traditional way of installing definition files and for Mocha you will learn a more automated way to install them using the Monaco console.
You can find definition files for all popular libraries on the DefinitelyTyped project. Go ahead and download node.d.ts and express.d.ts to your desktop. Then just select the two files and drag them into the Explorer using your mouse. Uploading files to Monaco is as easy as that! Alternatively you can right-click into the Explorer and choose “Upload Files”.
Monaco will automatically open each file after upload. You can use Quick Navigate (Ctrl+Q) to quickly jump from one file to the other using a history of recently opened files. This even works for switching between the console and your recently opened files!
A more automated way of installing definition files is by using the “tsd” command. This command can be installed through npm and it will download definition files for libraries through the command line directly into your workspace. First we have to install tsd by opening the Monaco console (Ctrl+Shift+C) and typing:
npm install -g tsd
The option –g tells Monaco to install the command into the environment outside of your workspace. Once the installation is done, you can start using the tsd command:
The help text already contains an example how to install the Mocha definition file into the workspace by typing:
tsd query mocha --action install
This will create a new folder called “typings” with the mocha.d.ts file.
Monaco supports two ways of adding definition files to the language service so that they can be used for IntelliSense: One way is by adding a reference to the definition file from within the file you want to enable IntelliSense for. The other more typical approach is to define references globally so that they can be picked up by all files of your workspace.
For our example we will setup the definition files globally by adding a new top level file called _references.js and by pointing to the declaration files of the workspace using the triple-slash notation:
/// <reference path="node.d.ts" />
/// <reference path="express.d.ts" />
/// <reference path=" typings/mocha/mocha.d.ts" />
You can actually use IntelliSense to auto-complete on available d.ts files. Just type Ctrl+Space inside the path attribute of the reference to get a list of all definition files:
Open app.js and do some coding. You will notice the rich IntelliSense provided for Express and node.js. For example, type Ctrl+Space for the use of the response object’s send method:
Once you are inside the method you will notice parameter hints showing up:
We have now enabled IntelliSense for the libraries we use, but we would also like to have this enabled for our own modules. Stay tuned for the next part where I will explain how this can be achieved easily.