configuration - 配置 VSCode 执行不同的任务

Question

我在 Visual Studio Code 中有一个 TypeScript 项目，任务如下:

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

当我们点击“Ctrl + Shift + B”进行构建时，这很有效。

是否可以执行另一个任务，当我们按“F5”运行/调试时，它会通过命令行运行命令？

谢谢你。

Answer 1

任务运行器 VS 调试加上实时预览

任务运行器

目前，对于 VSCode 0.5.0 版，您可以使用 task.json 中标识的任务运行器来使用同一个运行器运行多个任务。目前，无法配置不同的任务运行器。例如，如果您使用 Gulp 作为任务运行器，您可能会遇到以下内容:

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

现在 Gulp 任务将使用 Gulp 定义和编码，但需要注意的重要事项是 isBuildCommand和 isTestCommand因为这些与 CTRL+SHFT+B and CTRL+SHFT+T 相关分别。所以这两个任务可以作为键盘快捷键使用。此外，如果您添加其他任务，它们将被枚举并通过 CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". 访问。您的每个任务都可以枚举、列出和选择。

以下代码仅演示了 eash VSCode 任务如何与任务运行器任务相关联:

//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 */);

});

调试

现在使用 Node.js 或 Mono 进行调试，您有类似的选择。您需要配置您的 launch.json或按 'gear icon' .您可以将调试器设置为 debug或 run您的应用程序并使用 VSCode 'F5'或 PLAY按钮或菜单的启动/停止/重新启动您的应用程序。从那里您只需使用您喜欢的浏览器并访问您的应用程序的服务器。您还可以使用外部调试器“附加”到您的应用程序。以下是一个示例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
    }
  ]
}

请注意 'stopOnEntry' RUN and DEBUG 的属性(property)设置。这是您可以使用调试器运行或调试应用程序的方式。从那里你只需使用调试 'PLAY'按钮结合调试菜单选择合适的配置。

实时预览

VSCode 当前未实现实时预览。到目前为止，我最喜欢的两个是 BrowserSync和 Live.JS .

使用 NodeMON 吞咽任务

以下是一些可能有助于指出配置 Gulp 以运行 node.js 服务器的方法的代码。请记住，Gulp 任务可能需要其他任务先运行。在上面的代码中，Gulp 任务 "serve-build"需要另一个任务 "optimize"先运行。 "optimize" can require other tasks to run and so forth.您可以链接这些任务，以便您的顶级任务运行您的所有子级任务。以下是从 gulpfile.js 设置中的 Gulp 任务执行的函数:

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');
    });

}

所以下面的 Gulp 任务实际上只是运行这个函数，它通过 Gulp nodemon 插件运行 nodemon 来制作 production / "build"或 test / "dev"使用参数变量构建:

//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 */);

});

将 GULP 任务映射到 VSCODE 任务运行器

最后，您可以映射顶级 Gulp 任务，例如 "serve-dev"和 "serve-build"通过将条目添加到您的 VSCode tasks.json 并使用 isBuildCommand和 isTestCommand映射到 CTRL+SHFT+B和 CTRL+SHFT-T分别。

{
"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 输出

VSCode 还有一个 task.json 属性来显示你在 VSCode 中运行的任务的输出。这将打开 OUTPUT VSCode 的窗口就像使用 SHFT+CTRL+H或选择菜单 VIEW然后选择 SHOW OUTPUT .此时输出窗口不显示颜色。

刚设置 "showOutput"至 always .也许这可以取代您启动运行节点应用程序的终端/命令行窗口的需要。您也可以将此属性设置为 never或 silent取决于您的需求。您可以在 VSCode documentation 中找到有关这些属性的更多信息。 .

您也可以 STOP一个正在运行的任务由 CTRL-SHFT-B或 CTRL-SHFT-T或在开始任务后使用菜单。

最后，如果您必须编译代码并在终端中运行应用程序，我认为您需要在 task.json 配置中使用脚本/批处理文件来运行您的任务运行程序，然后启动您的节点服务器。