Software Development: Setting up Visual Studio Code for TypeScript development

Install TypeScript compiler

To setup TypeScript on your computer, you need to setup node.js with npm. There is a good article, which will help you to do that, please find it using following link: Installing Node.js and updating npm.

We just installed node.js and updated npm. So we are ready to install TypeScript on your computer. If you want you can install the latest build of TypeScript. To do that you have to run following command:

npm install -g typescript@next #install nightly build

Although you have the possibility to install nightly builds, I would recommend installing the latest stable version of the language. To do that type following command in cmd.exe and hit enter:

npm install -g typescript #install the latest stable version

Install Visual Studio Code with extensions

Visual Studio Code

Let's install Visual Studio Code first. You can download and install it from https://code.visualstudio.com.

TSLint

An extensible linter for the TypeScript language. TSLint supports:

custom lint rules
custom formatters (failure reporters)
inline disabling / enabling of rules
configuration presets (tslint:latest, tslint-react, etc.) & composition

For more info please use http://palantir.github.io/tslint/

To install TSLint extension: Open Visual Studio Code → Navigate to Extensions tab on left sidebar → Type 'TsLint' in search text-box → Install extension.

To make extension work you need to install tslint globally. To do that run in cmd.exe tool the command:

npm install -g tslint #installing tslint globally

Gulp Snippets

We are going to use Gulp to compile our TypeScript code, so let's install Visual Studio Code extension to help us with Gulp syntax.
Open Visual Studio Code → Navigate to Extensions tab on left sidebar → Type 'Gulp Snippets' in search text-box → Install extension.

Creating the project

First of all, you need to create the project folder. I will create mine with the name "TypeScriptBlog". Create the folder and open it in cmd.exe tool. Now we need to create package.json file. To do that run in cmd.exe command:

cd path/to/project
npm init

Open created folder in Visual Studio Code and check created file. It should contain something like this:

{
  "name": "typescriptblog",
  "version": "1.0.0",
  "description": "Blog engine written on TypeScript",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

We are now ready to install the third party dependencies:

npm install  --save-dev typescript
npm install  --save-dev tslint 
npm install  --save-dev gulp
npm install  --save-dev gulp-tslint
npm install  --save-dev gulp-typescript

Compiling the project

Create gulpfile.js in the project's folder and copy following content to it:

var gulp = require("gulp"),
    tslint = require("gulp-tslint"),
    tsc = require("gulp-typescript");

var tsProject = tsc.createProject("tsconfig.json");

gulp.task("build-app", function () {
    return gulp.src([
        "app/**/**.ts"
    ])
        .pipe(tsc(tsProject))
        .js.pipe(gulp.dest("app/"));
});

// Rebuild project on any ts file changed
gulp.task('watch', function() {
  gulp.watch("app/**/**.ts", ['build-app']);
});

Create tsconfig.json file and copy following content to it:

{
    "compilerOptions": {
        "sourceMap":  true
    }
}

Now we can build our application. Press Ctrl + Shift + P in Visual Studio Code → Type "Run Task" → run "build-app" task. If you want to rebuild your code each time when any file changed, execute task with name "watch".

To test that the Gulp is working you can use following files. Create app folder in the root folder and add files to app folder.

greeter.ts

class Greeter {
    constructor(public greeting: string) { }
    greet() {
        return "<h1>" + this.greeting + "</h1>";
    }
};

var greeter = new Greeter("Hello, world!");
    
document.body.innerHTML = greeter.greet();

greeter.html

<!DOCTYPE html>
<html>
  <head><title> TypeScript Greeter </title></head>
  <body>
    <script src='greeter.js'></script>
  </body>
</html>

Project structure

Linting the project

Earlier we installed all necessary tools for linting. Now it is time to configure them. Open cmd.exe and execute command:

cd path/to/project
tslint --init

After that you can find that tslint.json file was added to the solution. This file contains default linting settings, if you would like to extend or change them, please use https://palantir.github.io/tslint/rules/ for more info.
One more thing what we can do. We want tslint be executed using Gulp, so open gulpfile.js file and add the following code to it:

// Linting the project
gulp.task("lint", function () {
    return gulp.src([
        "app/**/**.ts"
    ])
        .pipe(tslint({
            formatter: "verbose"
        }))
        .pipe(tslint.report())
});

If 'lint' task does not appear in the task list, restart Visual Studio Code and try again.

Сonclusion

Now we know how to setup Visual Studio Code with TypeScript. With this article, I open a cycle of articles about TypeScript, in which we are going to create blog engine written on TypeScript. All the code you can find under repository https://github.com/aliakseimaniuk/TypescriptBlog.

Wednesday, September 7, 2016

Setting up Visual Studio Code for TypeScript development