##Introduction## Microsoft released VS Code, A light weight code editor for Asp.Net 5 and NodeJs development. This post is going to explore how to use VS Code for TypeScript development with Gulp watch task. First of all there is a great post covering the basic of setting up VSCode to compile TypeScript available here. I encourage you to go through that post first before continuing.
####Typescript Now let’s install TypeScript through NPM with the following command. This will install typescript globally.
npm install -g typescript
After installing, if you open up the command prompt and type “tsc”, you should see something similar to below.
Note that during the time of this post the latest TypeScript version was 1.5.0-beta. Make sure to install the specific or latest version.
npm install gulp
Execute the following command to install TypeScript compiler for gulp.
npm install gulp-tsc
###Setting up VSCode Now we have all the piece in places to actually start doing something fun. Open VSCode and open your project directory.
create a new file called
tsconfig.json and make it look like this.
Create a folder called
src and under that create a file called
The Gulp File
Create a file named
Following is the content of the
####Creating tasks.json If you press
Ctrl + Shift + B you will be prompted to configure the task runner if there is no tasks.json file exists. Please do so if VSCode prompts.
Once the tasks.json is created, replace the entire content with the following.
###Running the Gulp Watch Press
Ctrl + Shift + B to start the watch task. This should start the watch task and output should be disabled in VSCode as below.
Now modify the
main.ts file as following and save the file.
Now a folder named
dist should be created with a file named
main.js in it. Every time you make a change, the build step will run and
main.js will be updated accordingly.