Running Tasks in VS Code

Time for another Coding Quick Tip – This time a look at running Tasks in Visual Studio Code. The content is available as a video at the end of the post if that’s what you prefer.

Setup

The test setup I got going is just a project with a few TypeScript files in them, and the task I’ll be rigging is just running the TypeScript compiler to transpile the code to JavaScript.

The prerequisites is that the Node and TypeScript compiler need to be installed. When Node is installed on the system, just type npm install -g typescript in a command window to install the TypeScript compiler as a global npm package. Verify that the compiler is properly installed by typing tsc -v

I also prefer to have config file for the TypeScript compiler, this can be created easily by entering tsc --init In the tsconfig.json file that will be created, I point out the location of the code and the directory where I wish the transpiled output to be placed.

Executing Commands

To run tasks from VS Code we need a configure the Task Runner. This is done by entering the Command Palette (F1 or ctrl-shift-p), typing task and selecting Tasks: Configure Task Runner.

This will create a tasks.json file under the .vscode directory in the current folder.
In the tasks.json file, edit the top-most example and remove the args parameter, as this is not needed when we got our tsconfig file setup.

Execute the task by opening the command palette, press backspace to remove the chevron and type task. This will show a drop down with all available tasks, right now just the one we recently created – named tsc.

Running the task will compile our TypeScript files. Task accomplished (pun intended) – let’s move on.

Using a Task Runner

What if we want to use a task runner?
We’re in luck here if we like Jake, Grunt or Gulp as VS Code supports these out of the box. For this example I’m using Gulp.

First off, remove tasks.json so that we can start fresh.
After that, create a gulpfile.js in the folder with the select tasks defined (the one I’m using is listed below).

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    merge = require('merge'),
    fs = require("fs");

var webroot = "wwwroot";

var paths = {
    npm: './node_modules/',
    lib: "./" + webroot + "/lib/",
    tsSource: './TypeScript/**/*.ts',
    tsOutput: "./" + webroot + '/scripts/',
    tsDef: "./typings/internal/"
};

var tsCompilerConfig = ts.createProject('tsconfig.json');

gulp.task('ts-compile', function () {
    var tsResult = gulp.src(paths.tsSource)
        .pipe(ts(tsCompilerConfig));

    return merge([
        tsResult.dts.pipe(gulp.dest(paths.tsDef)),
        tsResult.js.pipe(gulp.dest(paths.tsOutput))
    ]);
});

gulp.task('watch', ['ts-compile'], function () {
    gulp.watch(paths.tsSource, ['ts-compile']);
});

Note, if you by any chance actually want to use the above gulp file, you need to install gulp, gulp-typescript and merge.
npm install gulp
npm install gulp-typescript
npm install merge?


Now we’re off to actually running the task again.
Open the Command Palette and type task, then select Tasks: Configure Task Runner, as in the first example.

Given all the used packages are installed correctly, a new tasks.json file will be created and look like the following

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": []
}

You can now execute your Gulp tasks just like we executed our task in the example above.

Binding a task to VS Code’s “Run Build Task”

Visual Studio code has a command named Run Build Task, with the keybinding Ctrl+Shift+B. To improve the workflow in VS Code, this is the command to bind your build tasks too.
Binding the build task to the build command is done by setting the property isBuildTask to true for a specific task in the tasks.json file.

Let’s add our build task to tasks.json and try it out, modify tasks.josn like this:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "ts-compile",
            "isBuildCommand": true
        }
    ]
}

Now execute the the task by pressing Ctrl+Shift+B, watch your bound task being run and rejoice 🙂

That’s all for this Coding Quick Tip,
Happy Coding! 🙂