Visual Studio Code Configuration to Run the MEANJS Workflow

I just installed the Visual Studio code , and I'm trying to run the MEANJS application in the IDE, VisualStudio created a./settings with the launch.json file, which contains the configuration for starting the project.

Usually I use the MEANJS workflow - it is just to enter grunt in the root folder of the application and the command to call gruntfile.js , which contains all the tasks to run my application.

I want to try to achieve the same in Visual Studio code by clicking the play button and running the grunt tasks, but I don't know 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?

+5
source share
2 answers

VSCode Example


You can customize any workflow tool using Visual Studio code and use CTRL+SHFT+P , then RUN and select TASKS . You can also set default tasks to BUILD and TEST with CTRL+SHFT+B and CTRL+SHFT-T respectively. As long as the Gulp, Grunt, Cake, or other job is configured correctly, VSCode can be configured.

You can install all your Gulp tasks or other task tasks in VSCode by name or configure only some of them that also run other helper tasks.

Like VSCode 0.5.0, there is a problem with task arguments that require them to be canceled in the tasks.json file. More 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" ] }, 

Note that in the first two tasks, isBuildCommand and isTestCommand set to 'true', which allows you to use the keyboard shortcuts mentioned above. To work, the last task must have the name argument and command reversed , starting with VSCode 0.5.0. See Link.

USING VSCode Debugging


You can debug VSCode in RUN Node.js applications and Start using Play and restart it using Circular Arrow . To do this, you need to configure your launch.json. If you just want to start / restart the application without debugging, set the stoponentry parameter to false. Usually I have two, one for debugging and one for launching.

 { "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 to start and automatically restart your Node.js application among many other things. I prefer Gulp because of this code for configuring and the fact that it essentially uses threads.

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

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

Below is the gulpfile.js I used when taking the Plurasight course taught by John Papa. A lot of tasks are defined in the configuration, including Gulp Task SERVE-DEV , which starts the NODE server application, automatically restarts the server on js, css or html changes and synchronizes several browser views, implements CSS and JS, compiles LESS, among other tasks.

GIST LINK FOR Gulp FILE


The Gulp file was too complex to be interpreted using markup, so I am adding this GistBox Link .

+3
source

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 argument "serve" if your dose in the grunt file does not have it.

However, this will not work by pressing the green start button. To run this task, you need to click

Ctrl + Shift + P

From there, you can use Task commands.

You can configure and run tasks with short keyboard shortcuts.

Update: I did not find how to do this in Visual Studio Code, but in WebStorn it is a simple setup that requires just a few clicks.

+1
source

All Articles