How to Automate Tasks in Visual Studio Code

By Thoriq Firdaus. in Toolkit. Updated on June 14, 2016.

Using a build tool like Grunt or Gulp can save you a lot of time of the development stage by automating a few repetitive “Tasks”. If you opt for Visual Studio Code as your go-to code editor, your workflow could be even more streamlined and, eventually, be more productive.

Built with Node.js at its core, Visual Studio Code allows you to run the tasks without having to leave the editor window. And we will show you how to do so in this post.

Let’s begin.

Pre-requisites

To begin with, you’ll need to have Node, NPM (Node Package Manager), and the CLI (Command Line Interface) of the respective build tool all installed in your system. If you are unsure whether you have all these installed, verifying it is as easy as typing the command lines.

OS X Terminal Interface showing version number of Node, NPM, and Gulp

I will also assume that files and directories in your project are in their proper place, including the config file, such as the gulpfile.js or Gruntfile.js if you use Grunt instead. And project dependencies registered in package.json should also be installed at this point.

The following is our project directories and files, created for the purpose of a demonstration in this article. Your project would certainly be much different; you may have more or fewer files.

.
├── css
│   ├── sass
├── gulpfile.js
├── index.html
├── js
│   ├── src
├── node_modules
└── package.json

We utilize Gulp as our build tool in our project. We have a number of Tasks registered in the gulpfile.js as follows:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var jsSrc = './js/src/**/*.js';
var sassSrc = './css/sass/**/*.scss';

gulp.task( 'scripts', function() {
	return	gulp.src( jsSrc )
                .pipe( uglify() )
                .pipe( gulp.dest( './js' ) )
});

gulp.task( 'styles', function() {
	return	gulp.src( sassSrc )
                .pipe( sass( { outputStyle: 'compressed' } ) )
                .pipe( gulp.dest( './css' ) );
});

gulp.task( 'automate', function() {
	gulp.watch( [ sassSrc, jsSrc ], [ 'scripts', 'styles' ] );
});

gulp.task( 'default', ['scripts', 'styles', 'automate'] );

There are specifically four tasks we have specified:

scripts: the task that will compile our JavaScript files as well as minifiy the output through Gulp UglifyJS plugin.
styles: the task that will compile our SCSS files into CSS as well as compress the output.
automate: the task that will automate the styles and scripts task though the gulp built-in watch utility.
default: the task that will run the three aformentioned tasks all together at once.

As the build tool in our project is all prepared, we can now also go on to automate these tasks we have defined within the gulpfile.js.

However, in case you are not familiar working with any of the tools mentioned, I highly recommend you to look into a few of our previous posts to get you into the subject before proceeding further.

Run and Automate Tasks

Running and automating “Tasks” in Visual Studio Code is quite straightforward. First, launch the Command Palette by pressing the Shift + Cmd + P key combination or through the menu bar, View > Command Palette if that is more convenient for you. Then, type Tasks, and select “Tasks: Run Task” from the few number of options shown in the result.

Lists of 'Tasks' in Visual Studio Code Command Palette. — Command Palette

Visual Studio Code is smart; it knows that we are using Gulp, pick up gulpfile.js, and reveal the list of Tasks that we have defined within the file.

Herein, let’s select the default Task. The SCSS stylesheets and JavaScripts file will be compiled upon selecting this Task, and it will also trigger the automate Task that will allow the styles and scripts Task to run autonomously going forward.

When changing a file — a stylesheet or a JavaScript file — it will be automatically compiled. Visual Studio Code also generates timely reports for every success and errors that occur in the build operation.

Deep Intergration

Furthermore, we can integrate our project into Visual Studio Code to streamline our workflow. And integrating our Tasks in Visual Studio Code is easy and quick.

Launch the Command Palette and select “Configure Task Runner”. Visual Studio Code will give a list of build tool it supports. In this case, we select “Gulp”, since that is the one we are using in our project in this article.

Gulp menu in Visual Studio Code configuration.

Visual Studio Code should now have created a new file named tasks.json under .vscode in your project directory. tasks.json, at this point, contains bare configuration.

And as you can see below, the tasks property in is currently just an empty array.

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

Extend the tasks value as follows.

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

The taskName specifies the task name in our gulpfile.js that we would like to run. The isBuildCommand property defines the default command as the “Build” command. Now, rather than going around the Command Palette, you can simply press the key combination Shift + Cmd + B.

'Run Build Task' menu in the Command Palette

Alternately you may selecting the “Run Build Task” of the Tasks search result in the Command Palette.

Wrapping Up

I think Visual Studio Code is a code editor with a great future. It is fast and built with some handy features out of the box, including one which we have shown in this article.

We have seen how to run a Task from Gulp; you can also use Grunt instead. We have seen how to integrate the task into Visual Studio Code and run with a key combination, which make our workflow more streamlined.

Hopefully, you find this article helpful as a reference to run build tasks, and don’t forget to check out our previous articles on for more tips to make the most of Visual Studio Code.