Automatically Building and Running TypeScript NodeJS Code in Visual Studio Code

Usually we have to run two commands to build and run a TypeScript built NodeJS app:

tsc
node ./build/app.js

However we can make this slightly more efficient in VIsual Studio Code with Gulp.

I'm going to assume at this point you have NodeJS, NPM and an existing application to work with.

Install Gulp

npm i gulp --save-dev

npm i child_process --save-dev

Create Gulp Task

var gulp = require('gulp');

var exec = require('child_process').exec;

gulp.task('tsc', function (cb) {
  exec('tsc', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    
    cb();
  });
});

Note: There is a significant downside to this, if you pass back errors using the callback, chances are this will never succeed, so you have to accept that errors won't be caught here. You will however see them in the output console.

Amend Launch Config

We need to add a preLaunchTask to our Launch configuration file, which Visual Studio Code should have already created on a previous launch. Under the "Launch Program" node add:

"preLaunchTask": "tsc"

Visual Studio Code will identify that it is a Gulp task and execute that before launching.

That's it. Click the green arrow and you're away.