How to Run Two Tasks in Parallel in VS Code using tasks.json

In VS Code, it's possible to make two build tasks (or test tasks) run simultaneously, in parallel. For this, we need the dependsOrder and dependsOn keys on tasks.json. An example:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build-typescript-and-sass",
            "detail": "Runs Typescript and Sass compilers.",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "dependsOn": [
                "build-typescript",
                "build-sass"
            ],
            "dependsOrder": "parallel"
        },
        {
            "label": "build-typescript",
            "type": "shell",
            "command": "npx tsc"
        },
        {
            "label": "build-sass",
            "type": "npm",
            "script": "build-sass-using-grunt"
        }
    ]
}

Understanding The Code

Most of the code has been explained in previous tutorials—[How to Run a Terminal Command using tasks.json] and [How to Run an NPM Script from package.json using tasks.json]—so we will focus only on the unique parts.

The dependsOn key tells VS Code that one task depends on one or more other tasks being run before it, so if we try to run this task, VS Code will first try to run the tasks it depends on first, and if those tasks succeed, then it runs the task.

We don't need to make the task that depends on other tasks do anything by itself. It just needs to exist as a place to store our list of other tasks that VS Code should run. So this task, build-typescript-and-sass, exists just to tell VS Code it should run build-typescript and build-sass.

Tasks are identified by their labels. While you can write anything in the label, it's a good idea to use only lower case characters and avoid spaces so you don't run into issues because you misspelled the identifier. Use the detail key to describe the task properly if you need.

The dependsOrder key tells VS Code whether it should run the dependencies in "sequence" or in "parallel". If we choose "sequence", VS Code will wait until a task finishes before running the next task. If we choose "parallel", VS Code can run both tasks simultaneously, which can be faster if one tasks doesn't depend on the other.

For example, for the Typescript and Sass compilers, these tasks would need to read files from the filesystem, process them in the CPU, and save the output to the filesystem again. While the files are being processed by the CPU, the filesystem isn't being used, but Sass would still need to wait for Typescript to finish its job if we ran the tasks in "sequence". With "parallel", Sass could hypothetically start reading the files while Typescript is processing, and Typescript could start saving the files while Sass is processing, cutting down time to perform both tasks in total. Not to mention they could both process in parallel if you have a CPU with multiple processors (also called "cores"), which is very likely.

Showing Tasks Side by Side

See [How to Run Two Tasks in Two Terminals Side by Side in VS Code using tasks.json].

Partial Parallelism

A task with parallel dependencies is just another task in VS Code, which means that we can combined it with sequential dependencies to parallelize only a part of a task.

For example, let's say that we want to run Typescript and Sass compilers, and then ESBuild to bundle the Javascript and CSS files outputted by previous tasks. Naturally, ESBuild depends on both tasks being run. So we could achieve this by making "build-typescript-and-sass" a task with parallel dependencies, and then adding it and ESBuild to a sequential dependency list of an encompassing task.

This is probably not the best example since we could just set the dependencies on the ESBuild task itself, but it does show how we could combine them.

Documentation

You can also compose tasks out of simpler tasks with the dependsOn property. For example, if you have a workspace with a client and server folder and both contain a build script, you can create a task that starts both build scripts in separate terminals. If you list more than one task in the dependsOn property, they are executed in parallel by default.

[...]

If you specify "dependsOrder": "sequence", then your task dependencies are executed in the order they are listed in dependsOn.

https://code.visualstudio.com/docs/editor/tasks#_compound-tasks (accessed 2024-011-22)