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

In VS Code, it's possible to create a build task (or test task) to run two tasks in two terminals side by side using 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",
            "presentation": {
                "group": "my-build-group"
            }
        },
        {
            "label": "build-sass",
            "type": "npm",
            "script": "build-sass-using-grunt",
            "presentation": {
                "group": "my-build-group"
            }
        }
    ]
}

Understanding The Code

Most of this code was explained in a previous tutorial—[How to Run Two Tasks in Parallel in VS Code using tasks.json]—so we'll focus on the unique parts.

When a task has a presentation key containing group key, this "presentation group" is used by VS Code to group terminals together in its GUI. We can write anything we want as its value. In my case, I wrote my-build-group, so all tasks with this value for presentation group will be grouped together and appear side by side.

Note that the group in presentation of a task isn't the same thing as the root group key of a task. The root group key is used to tell VS Code what kind of task it is (e.g. a build task), and whether it's the default build task or not. We need to use group inside presentation for it to have the effect we want.

Documentation

group: Controls whether the task is executed in a specific terminal group using split panes. Tasks in the same group (specified by a string value) will use split terminals to present instead of a new terminal panel.

https://code.visualstudio.com/docs/editor/tasks#_output-behavior (accessed 2024-11-22)