配置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

TASK RUNNERS 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.这是您可以使用调试器来运行或调试应用程序的方法.从那里您只需使用调试'PLAY'按钮和调试菜单来选择适当的配置.

实时预览

实时预览目前尚未在VSCode中实现.我最喜欢的两个至今都BrowserSync和Live.JS.

与NODEMON的GULP任务

以下是一些代码,可以帮助指出配置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任务流程

最后,你可以像映射顶层咕嘟咕嘟的任务"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中正在运行的任务的输出.这将打开OUTPUTVSCode 的窗口,就像使用SHFT+CTRL+H或选择菜单VIEW然后选择一样SHOW OUTPUT.此时输出窗口不显示颜色.

只是设置"showOutput"为always.也许这可以取代您启动运行节点应用程序的终端/命令行窗口的需要.你也可以设置此属性never或silent根据您的需要.您可以在VSCode 文档中找到有关这些属性的更多信息.

您也可以STOP一个与正在运行的任务CTRL-SHFT-B或CTRL-SHFT-T或启动任务后使用的菜单.

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