Creating a tasks.json file

VSCode uses a special tasks.json file in order to run commonly used tasks that you may need in your development life cycle. Obviously, one of the most common tasks you will need to run is the compilation step, otherwise known as the build step. The keyboard shortcut to build a project in VSCode is Ctrl+Shift+B.

In order to run a build step with Ctrl+Shift+B, we will need to create a tasks.json file, and configure it correctly to run the tsc command to build our project. If you do not already have a tsconfig.json file for your project, then go ahead and create one from the command line by typing the following:

tsc --init

Once we have a tsconfig.json file for our project, we can configure the default build task. In VSCode, hit Ctrl+Shift+B. This will bring up an option to select a build task to run. Select the tsc : build - tsconfig.json option. This will execute the tsc compilation step for your project, and show the results in the built-in terminal.

Unfortunately, if we hit Ctrl+Shift+B again, we will be prompted to select a build task once more. This means that, although we have configured a build task, we have not specified what task should be run by default when we hit the build shortcut. There are two ways that we can specify this default build task. The first is by selecting the menu option Tasks | Configure Default build task. This will bring up an option where we can select the tsc : build - tsconfig.json task as our default. Choosing this option will open the tasks.json file in the .vscode directory in the editor.

The second way to specify the default build task is through the command pallet. VSCode has many commands that can be configured through the command pallet, and each one can be tied to a specific shortcut key. Selecting the menu option View | Command Pallet, or the shortcut key Ctrl+Shift+P, will bring up a list of available commands. This list can be filtered by simply typing a keyword. If we start typing the word task, the list is automatically filtered to only show commands that contain the word "task". We can then select the Tasks : configure default build task to open the tasks.json file in the editor.

Note that there are many available commands that can be selected via the View | Command Pallet menu option, or by hitting the shortcut key, Ctrl+Shift+P. Take a few minutes to scroll through the list of commands to see how configurable VSCode actually is.

Whether we have navigated to the configure default build tasks via the menu option, or from the command pallet, VSCode will open our tasks.json file in the editor, as follows:

{ 
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format 
    "version": "2.0.0", 
    "tasks": [ 
        { 
            "type": "typescript", 
            "tsconfig": "tsconfig.json", 
            "problemMatcher": [ 
                "$tsc" 
            ], 
            "group": { 
                "kind": "build", 
                "isDefault": true 
            } 
        } 
    ] 
} 

This tasks.json file has a version property and a tasks property. The tasks property is an array of tasks that have a number of sub-properties. VSCode has automatically created a task for us that will compile our project, and specified via the group.isDefault property that this is the default build task.

Note that ,when editing this file, VSCode will automatically show us what properties are available depending on which part of the file we are modifying, as follows:

Here, we can see that VSCode is showing us that the available configuration properties for a task include identifier, isBackground, label, and others.

A handy property to keep in mind is the label property, which we can use to specify an easy-to-remember name for our task. Let's add this label property, and set its value to Run tsc build. Now, whenever we see this build task in a list of options, it will be displayed as Run tsc build, which helps us to remember which task is which.