Visual Studio Code configuration to run MEANJS workflow

Question

I just installed Visual Studio Code and I'm trying to run my MEANJS application within the IDE, VisualStudio created a ./settings folder with a launch.json file which contains the configuration to run the project.

What I usually do using the MEANJS workflow is just to type grunt in the root folder of the application and the command to call the gruntfile.js which contains all the jobs to launch my application.

I want to try to achieve the same in Visual Studio Code by pressing the button play, and run the grunt tasks, but I have no idea where to start.

{
    "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": "Launch Project",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "gruntfile.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": 3000,
            "sourceMaps": false
        }
    ]
}

Any recommendations?

Answer 1

VSCode EXAMPLE

---

You can setup any workflow tool with Visual Studio Code and use CTRL+SHFT+P then RUN and select TASKS. You can also set default BUILD and TEST tasks with CTRL+SHFT+B and CTRL+SHFT-T respectively. As long as the task runner Gulp, Grunt, Cake or other is setup properly VSCode can be configured.

You can set all of your Gulp or other task runner tasks in VSCode each by name or setup only a few that also run the other sub tasks.

As of VSCode 0.5.0 there is a problem with task arguments that requires them to be reversed in the tasks.json file. More info here

{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
    "--no-color"
],
"tasks": [
    {
        "taskName": "vet",
        "isBuildCommand": true,
        "isTestCommand": false,
        "showOutput": "always",
        "args": [],
        "problemMatcher": [
            "$jshint",
            "$jshint-stylish"
        ]
    },
    {
        "taskName": "vet-es",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": [],
        "problemMatcher": [
            "$eslint-compact",
            "$eslint-stylish"
        ]
    },
    {
        "taskName": "--verbose",
        "isBuildCommand": false,
        "isTestCommand": false,
        "showOutput": "always",
        "args": [
            "vet"
        ],
        "problemMatcher": [
            "$jshint",
            "$jshint-stylish"
        ]
    },

Notice the first two tasks have isBuildCommand and isTestCommand set to 'true' which permits keyboard shortcuts mentioned above. The last task needs to have the argument and command name reversed, as of VSCode 0.5.0, in order to work. See this link.

USING VSCode Debug

---

You can you VSCode Debugger to Run Node.js apps and Start with the Play button and restart with the Circular Arrow. For that you need to configure your launch.json. If you just want to start/restart the app without debugging then set stoponentry to false. I usually have two, one for debug and one for run.

{
"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
    },

RUNNING NODE APP WITH GULP

---

You can also use Gulp or another task runner to start and auto restart your node.js app among many other things. I prefer Gulp due to it's code over configuration setup and and the fact that it inherently uses streams.

There is another file called gulp.config.js that's referenced by gulp.js that contains various static variables and functions that not shown hence the references to config throughout the gulpfile.js. Here's the require statement:

//require containing config variables and run
 var config = require('./gulp.config.js')();

Following is a gulpfile.js that I used while taking a Plurasight Course taught by John Papa. In the configuration many tasks are defined including Gulp Task SERVE-DEV which runs the node server app, auto restarts the server on js, css or html changes and syncs multiple browser views, injects CSS and JS, Compiles LESS, among other tasks.

GIST LINK FOR GULP FILE

---

The Gulp file was too complex to be interpreted by the Stack Overflow markup so I add this GistBox Link.

Answer 2

In the task.json file replace these settings

{
"version": "0.1.0",

// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "grunt",

// The command is a shell script
"isShellCommand": true,

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

// args is the HelloWorld program to compile.
"args": ["serve"]
}

You can leave the "serve" argument out if your grunt file dose not have it.

However this will not run pressing the green start button. In order to launch this task you need to press

Ctrl + Shift + P

From there you can use the Task commands.

It is possible to set-up and run Tasks with keyboard short cuts.

Update: I did not find how to do it in Visual Studio Code, but in WebStorn it is an easy set-up that requires just a couple mouse clicks.