Configure VSCode to execute different task

Question

I have a TypeScript project in Visual Studio Code with the following task:

{
  "version": "0.1.0",

  // The command is tsc.
  "command": "tsc",

  // Show the output window only if unrecognized errors occur. 
  "showOutput": "silent",

  // Under windows use tsc.exe. This ensures we don't need a shell.
  "windows": {
    "command": "tsc"
  },

  "isShellCommand": true,

  // args is the program to compile.
  "args": [],

  // use the standard tsc problem matcher to find compile problems in the output.
  "problemMatcher": "$tsc"
}

This works well when we hit "Ctrl + Shift + B" to build.

Is it possible to have another task that when we press "F5" to run/debug it runs a command through the command line?

Thank you.

Answer 1

TASK RUNNERS VS DEBUGGING PLUS LIVE PREVIEW

Task Runner

Currently, for VSCode version 0.5.0, you can use a task runner, identified in your task.json, to run multiple tasks using the same runner. At this time, configuring different tasks runners is not possible. For example, if you were using Gulp as a task runner you might have something like the following:

{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
    "--no-color"
],
"tasks": [
    {
        "taskName": "serve-dev",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    },
    {
        "taskName": "serve-build",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    }

Now the Gulp tasks would be defined and coded with Gulp but the important thing to note is the isBuildCommand and isTestCommand as these correlate to CTRL+SHFT+B and CTRL+SHFT+T respectively. So these two tasks would be available as keyboard shortcuts. In addition, if you add additional tasks they will each be enumerated and accessible with CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". Each of your tasks with be enumerated, listed and selectable.

The following code just demonstrates how eash VSCode task is related to a task runner task:

//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {

serve(false /* is Build */);

});

//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {

serve(true /* is Dev */);

});

Debugging

Now for debugging with Node.js or Mono you have similar options. You will want to configure your launch.json or press the 'gear icon'. You can set the debugger to debug or run your app and use the VSCode 'F5' or PLAY button or menu's to start/stop/restart your app. From there you just use your favorite browser and access the server of your app. You can also use an external debugger to 'attach' to your app. Following is a sample launch.json:

{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
    {
        // Name of configuration; appears in the launch configuration drop down menu.
        "name": "Debug src/server/app.js",
        // Type of configuration. Possible values: "node", "mono".
        "type": "node",
        // Workspace relative or absolute path to the program.
        "program": "src/server/app.js",
        // Automatically stop program after launch.
        "stopOnEntry": true,
        // Command line arguments passed to the program.
        "args": [],
        // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
        "cwd": ".",
        // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
        "runtimeExecutable": null,
        // Optional arguments passed to the runtime executable.
        "runtimeArgs": [],
        // Environment variables passed to the program.
        "env": { },
        // Use JavaScript source maps (if they exist).
        "sourceMaps": false,
        // If JavaScript source maps are enabled, the generated code is expected in this directory.
        "outDir": null
    },
    {
        // Name of configuration; appears in the launch configuration drop down menu.
        "name": "Run src/server/app.js",
        // Type of configuration. Possible values: "node", "mono".
        "type": "node",
        // Workspace relative or absolute path to the program.
        "program": "src/server/app.js",
        // Automatically stop program after launch.
        "stopOnEntry": false,
        // Command line arguments passed to the program.
        "args": [],
        // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
        "cwd": ".",
        // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
        "runtimeExecutable": null,
        // Optional arguments passed to the runtime executable.
        "runtimeArgs": [],
        // Environment variables passed to the program.
        "env": { },
        // Use JavaScript source maps (if they exist).
        "sourceMaps": false,
        // If JavaScript source maps are enabled, the generated code is expected in this directory.
        "outDir": null
    },
    {
        "name": "Attach",
        "type": "node",
        // TCP/IP address. Default is "localhost".
        "address": "localhost",
        // Port to attach to.
        "port": 5858,
        "sourceMaps": false
    }
  ]
}

Notice the 'stopOnEntry' property for the RUN and DEBUG setups. This is how you can use the debugger to run or debug the app. From there you would just use the debug 'PLAY' button combined with the debug menu to select the appropriate configuration.

Live Preview

Live Preview is not currently implemented in VSCode. Two of my favorites so far are BrowserSync and Live.JS.

GULP TASK WITH NODEMON

Following is some code that may help point the way to configuring Gulp to run a node.js server. Remember that Gulp tasks can require other tasks to run first. In the code above, the Gulp task "serve-build" requires another task "optimize" to run first. "optimize" can require other tasks to run and so forth.You can chain these tasks so that your top level tasks run all of your sub-level tasks. Following is a function that's executed from a Gulp task in the gulpfile.js setup:

function serve(isDev) {
log('Start pre processes and node server...');
var nodeOptions = {
    script: config.nodeServer,
    delayTime: 3,
    env: {
        'PORT': port,
        'NODE_ENV': isDev ? 'dev' : 'build'
    },
    watch: [config.server]
};

return $.nodemon(nodeOptions)
    .on('restart', ['vet'], function (ev) {
        log('*** nodemon restarted');
        log('files changes on restart:\n' + ev);
        setTimeout(function () {
            browserSync.notify('reloading now ...');
            browserSync.reload({ stream: false });
        }, config.browserReloadDelay);
    })
    .on('start', function () {
        log('*** nodemon started');
        startBrowserSync('isDev');
    })
    .on('crash', function () {
        log('*** nodemon crashed: script crashed for some reason');
    })
    .on('exit', function () {
        log('*** nodemon exited cleanly');
    });

}

So the following Gulp tasks actually just run this function which runs nodemon via the Gulp nodemon plugin to make production / "build" or test / "dev" builds using a parameter variable:

//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {

serve(false /* is Build */);

});

//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {

serve(true /* is Dev */);

});

MAPPING GULP TASKS TO THE VSCODE TASK RUNNER

Finally, you can map your top-level Gulp tasks like "serve-dev" and "serve-build" by adding entries to your VSCode tasks.json and using isBuildCommand and isTestCommand to map to CTRL+SHFT+B and CTRL+SHFT-T respectively.

{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
    "--no-color"
],
"tasks": [
    {
        "taskName": "serve-dev",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    },
    {
        "taskName": "serve-build",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    }

VSCode Output

VSCode also has a task.json property to show output of your running tasks in VSCode. This will open the OUTPUT window of VSCode just like using SHFT+CTRL+H or selecting the menu VIEW then selecting SHOW OUTPUT. At this time the output window does not display color.

Just set "showOutput" to always. Perhaps this could replace your need to start a terminal/command line window thats running your node app. You can also set this property to never or silent depending on your needs. You can find more info about these properties in the VSCode documentation.

You can also STOP a running task by with CTRL-SHFT-B or CTRL-SHFT-T or use the menus after starting a task.

Finally, if you must compile your code and run the app in a terminal I think you will need to use a script/batch file in your task.json configuration that runs your task runner and then starts your node server.