As I’ve shared in other posts, I like trying new things. One new thing I’ve been working with over the past couple of weeks is Visual Studio Code (VSC) – a lightweight editor from Microsoft that recognizes and offers IntelliSense for many different file formats. Unlike the commercial or even community editions of Visual Studio, VSC is not solution- or project-based. Instead, VSC is based on directory structures.
In order to accomplish this tutorial, there are two requirements. I’m sure they go without saying, but because I’m nice, I’ll provide the download links for you.
NOTE: Visual Studio Code is platform agnostic, but this tutorial is specifically for Windows. Based on the steps provided, I’m sure you can easily adapt this tutorial to the other platforms.
- Visual Studio Code (click “Download code for Windows”)
- Node.js (click “Install”)
Both of these installs with update your environment PATH variable to allow you to run either (or both) from any directory.
Create Working Folder
As stated above, VSC is directory structure-based. For my tutorial, I’m going to create the folder C:\Projects\HelloWorld.
From Windows Explorer, once you’ve created the folder, right-click on it and you will see the following context menu. Click on “Open with Code”.
From a DOS/Command Prompt, change directory (cd) to C:\Projects\HellowWorld and type: code .
(NOTE: That’s code “period” to tell VSC to open in the current directory.)
There are three that we are going to install:
- Express – the web server implementation that handles requests
- Body-Parser – provides helper libraries for parsing html files
- jQuery – duh. The jQuery libraries
To install these libraries, go to the administrator command prompt and, inside of the HelloWorld directory, type in the following:
This will install the Express server. Issue the command two more times, but replacing “express” each time with the remaining two definitions (i.e. body-parser & jquery). You will see that, each time, some files are downloaded and added to your project’s folder.
You will need to go to your command prompt, to install the TypeScript Definition Manager.
Option 1: Install TypeScript Definition Manager Globally
At any administrator command prompt type the following:
Option 2: Install TypeScript Definition Manager for HelloWorld Only
At the command prompt, inside of the HelloWorld directory, type in the following:
As you can see, unlike the global installation above, there’s no -g option flag.
For this tutorial, I will install the TypeScript Definition Manager for HelloWorld only so that you can see the files being added. However, note that the files being added to the project’s directory would have been added globally if you chose to install the TypeScript Definition Manager globally.
NOTE: When you run the command, you may get a warning message about versioning. Ignore it. It’s basically saying that your Node.js installation is newer than what it was expecting.
When I add/install the TypeScript Definition Manager for the project, a subdirectory named .bin is created inside of the node_modules subdirectory. This is where our TypeScript Definition Manager executable (tsd.exe) is located (the BASH shell script is also located here for those of you following along on the UNIX/Linux platform).
Once you’ve completed these steps, your HelloWorld VSC window should look like the following: