【问题标题】：Visual Studio Code configuration to run MEANJS workflow运行 MEANJS 工作流的 Visual Studio Code 配置
【发布时间】：2015-07-24 22:13:11
【问题描述】：

我刚刚安装了 Visual Studio 代码，并尝试在 IDE 中运行我的 MEANJS 应用程序，VisualStudio 创建了一个 ./settings 文件夹，其中包含一个包含以下配置的 launch.json 文件运行项目。

我通常使用 MEANJS 工作流所做的只是在应用程序的根文件夹中键入 grunt 并调用包含所有启动我的应用程序的作业。

我想尝试通过按下按钮在 Visual Studio Code 中实现相同的效果，并运行 grunt 任务，但我不知道从哪里开始。

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

有什么建议吗？

【问题讨论】：

标签： javascript visual-studio-code

【解决方案1】：

VSCode 示例

您可以使用 Visual Studio Code 设置任何工作流工具，然后使用 CTRL+SHFT+P 然后使用 RUN 并选择 TASKS。您还可以分别使用CTRL+SHFT+B 和CTRL+SHFT-T 设置默认的BUILD 和TEST 任务。只要任务运行器 Gulp、Grunt、Cake 或其他设置正确 VSCode 即可配置。

您可以在 VSCode 中按名称设置所有 Gulp 或其他任务运行器任务，或者只设置几个同时运行其他子任务的任务。

从 VSCode 0.5.0 开始，任务参数存在问题，需要在 tasks.json 文件中反转它们。更多信息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"
        ]
    },

请注意，前两个任务将isBuildCommand 和isTestCommand 设置为“true”，允许使用上述键盘快捷键。从 VSCode 0.5.0 开始，最后一个任务需要具有 argument 和 command 名称 reversed 才能工作。请参阅此link。

使用 VSCode 调试

您可以将 VSCode 调试器添加到 Run Node.js 应用和 Start Play 按钮并使用 Circular Arrow 重新启动。为此，您需要配置您的 launch.json。如果您只想启动/重新启动应用程序而不进行调试，请将 stoponentry 设置为 false。我通常有两个，一个用于调试，一个用于运行。

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

使用 GULP 运行节点应用程序

您还可以使用 Gulp 或其他任务运行程序来启动和自动重启您的 node.js 应用程序以及许多其他功能。我更喜欢 Gulp，因为它的代码优于配置设置，而且它固有地使用流。

gulp.js 引用了另一个名为 gulp.config.js 的文件，其中包含各种未显示的静态变量和函数，因此在整个 gulpfile.js 中对 config 的引用。这是require语句：

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

以下是我在接受 John Papa 教授的Plurasight Course 时使用的 gulpfile.js。在配置中定义了许多任务，包括 Gulp Task SERVE-DEV，它运行节点服务器应用程序，在 js、css 或 html 更改上自动重启服务器并同步多个浏览器视图、注入 CSS 和 JS、编译 LESS 以及其他任务。

GULP 文件的 GIST 链接

Gulp 文件太复杂，无法被 Stack Overflow 标记解释，所以我添加了这个GistBox Link。

【讨论】：

感谢您的回复，我只是有一个问题，如何在不显式运行命令的情况下自动调试应用程序之前运行 2 或 3 个任务？

【解决方案2】：

在 task.json 文件中替换这些设置

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

如果你的 grunt 文件没有“serve”参数，你可以忽略它。

但是，这不会按绿色开始按钮运行。要启动此任务，您需要按

Ctrl + Shift + P

您可以从那里使用任务命令。

可以使用键盘快捷键设置和运行任务。

更新：我没有找到如何在 Visual Studio Code 中执行此操作，但在 WebStorn 中它是一个简单的设置，只需点击几下鼠标。

【讨论】：