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按钮或菜单启动/停止/重新启动您的应用。从那里，您只需使用自己喜欢的浏览器并访问应用程序的服务器。您还可以使用外部调试器来附加＆＃39;到你的应用程序。以下是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 TASK RUNNER

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

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

您还可以使用STOP或CTRL-SHFT-B CTRL-SHFT-T正在运行的任务，或者在启动任务后使用菜单。

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

Answer 2

如果您不想使用gulp并且只是进行打字稿编译，那么一个简单的方法是转到终端并运行 tsc -w <filename.ts> ，不需要任务.json 。它会监视文件更改并将其转换为js文件。

然后每当你点击F5＆＃39;它应该运行launch.json中指向的更新的js文件。

如果您希望tsc转换多个ts文件，您还可以在应用程序根目录中使用＆＃34; rootdir＆＃34;添加 tsconfig.json ，然后运行 {{1} 和F5执行应用程序。

示例tsconfig.json

tsc -w

}

Answer 3

我相信这是通过后期功能解决的，即预启动任务。您可以让它在使用F5启动node / Chrome之前运行任务。

http://tstringer.github.io/javascript/vscode/nodejs/gulpjs/2015/10/14/vscode-prelaunchtask.html

配置VSCode以执行不同的任务

3 个答案: