VSCode示例

Question

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

我通常使用MEANJS工作流程只是在应用程序的根文件夹中键入 grunt ，并调用 gruntfile.js 的命令，其中包含所有工作以启动我的申请。

我想通过按下按钮播放来尝试在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
        }
    ]
}

有什么建议吗？

Answer 1

VSCode示例

您可以使用Visual Studio Code设置任何工作流工具，然后使用CTRL+SHFT+P然后RUN并选择TASKS。您还可以分别使用BUILD和TEST设置默认CTRL+SHFT+B和CTRL+SHFT-T任务。只要任务运行器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 Debugger到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运行NODE APP

您还可以使用Gulp或其他任务运行器来启动并自动重启node.js应用程序以及其他许多内容。我更喜欢Gulp，因为它的代码超过了配置设置，而且它本身就使用了流。

另一个名为gulp.config.js的文件由gulp.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。

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

您可以离开＆＃34;服务＆＃34;如果你的咕噜声文件没有它，那就争论不休。

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

Ctrl + Shift + P

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

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

更新：我没有在 Visual Studio代码中找到该怎么做，但在 WebStorn 中，这是一个简单的设置只需点击几下鼠标就可以了。

用于运行MEANJS工作流的Visual Studio代码配置

2 个答案:

VSCode示例

使用VSCode调试

使用GULP运行NODE APP

GULP文件的GIST链接