Using “preLaunchTasks” and Naming a Task in Visual Studio Code

Question

According to the documentation, it is possible to launch a program before debugging:

To launch a task before the start of each debug session, set the

Answer 1

For version 2.0.0 configuration you now use label instead of taskName.

package.json:

...
"scripts": {
    "tsc": "tsc",
    ...
}
...

launch.json (My source is in the src directory and tsc compiles to the dist directory):

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "preLaunchTask": "Compile",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/index.ts",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "protocol": "inspector",
            "sourceMaps": true
        }
    ]
}

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Compile",
            "type": "npm",
            "script": "tsc",
            "problemMatcher": []
        }
    ]
}

Answer 2

FWIW, I'm using VS Code 1.20.1 and here's how I got my preLaunchTask to work:

In launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
        "type": "node",
        "request": "launch",
        ...
        "preLaunchTask": "npm: build",
    }
  ]
}

In my package.json:

{
  ...
  "scripts": {
     "build": "tsc"
     ...
  }
}

Answer 3

I've only really seen the taskName used in relation to Gulp; I'm sure there are others but nothing that I have much insight into. Perhaps this can get you off to a start with what you already have?

Run a pre-launch task in VSCODE

Answer 4

The question title is:

"Using “preLaunchTasks” and Naming a Task in Visual Studio Code

I needed to define preLaunchTask***s***.

You can config multiple tasks using the dependsOn property described here

For example, a compound task in your tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Client Build",
            "command": "gulp",
            "args": ["build"],
            "options": {
                "cwd": "${workspaceRoot}/client"
            }
        },
        {
            "label": "Server Build",
            "command": "gulp",
            "args": ["build"],
            "options": {
                "cwd": "${workspaceRoot}/server"
            }
        },
        {
            "label": "Build",
            "dependsOn": ["Client Build", "Server Build"]
        }
    ]
}

You can find more information about naming tasks here.

Answer 5

So, if it's still relevant, or if someone finds this thread with the same problem, I've just figured it out how it works:

In the tasks.json, you need to create a 'tasks' array - code hint will help you with that - which holds an array of objects. Inside an object, you can have the 'taskName' key-value pair.

Example:

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "args": ["run-script", "webpack"],
    "showOutput": "always",
    "tasks": [
        { 
            "taskName": "runwebpack",
            "suppressTaskName": true
        }
    ]
}

In my case, I had to run the npm run-script webpack command before running my project. In the launch.json file, the "preLaunchTask": "runwebpack" will work now.

Note: the suppressTaskName is true in my example. Omitting it, or setting it to false will result in VS Code appending the taskName after the command.

A more general approach would be something like this:

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "args": ["run-script"],
    "showOutput": "always",
    "tasks": [
        { "taskName": "webpack" }
    ]
}

With the latter example, you can extend the tasks array with other scripts to be run also.

Hint for my usage: npm run-script fetches what to do from the package.json file's scripts object.

Edit: this works with VS Code 1.3.1

Answer 6

For vscode 1.36.1 (1.36.1):

tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build:tsc",
      "type": "npm",
      "script": "build:tsc"
    },
    {
      "label": "clean",
      "type": "npm",
      "script": "clean"
    },
    {
      "label": "build",
      "dependsOrder": "sequence",
      "dependsOn": ["clean", "build:tsc"]
    }
  ]
}

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/dist/main.js",
      "preLaunchTask": "build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "console": "integratedTerminal"
    }
  ]
}

Before running node ${workspaceFolder}/dist/main.js, the preLaunchTask will run build task firstly which includes two subtasks: clean and build. It will run clean task firstly, then run build task.

You can specify the label of a task to preLaunchTask option.