配置VSCode以执行不同的任务 [英] Configure VSCode to execute different task

问题描述

我在Visual Studio Code中有一个TypeScript项目，其中包含以下任务：

  {
version 0.1.0，
 
 //命令是tsc。 
command：tsc，
 
 //仅当发生无法识别的错误时才显示输出窗口。 
showOutput：silent，
 
 //在windows下使用tsc.exe。这确保我们不需要一个shell。 
windows：{
command：tsc
}，
 
isShellCommand：true，
 
 args是编译的程序。 
args：[]，
 
 //使用标准的tsc问题匹配器在输出中找到编译问题。 
problemMatcher：$ tsc
} 
  

我们按Ctrl + Shift + B进行编译。

是否可能有另一个任务，当我们按F5运行/命令行？

谢谢。

解决方案

TASK RUNNERS VS调试PLUS LIVE预览

任务运行器

目前，对于VSCode版本0.5.0，可以使用任务runner，在你的task.json中标识，使用同一个runner运行多个任务。此时，配置不同的任务运行器是不可能的。例如，如果你使用Gulp作为任务运行器，你可能有以下类似的东西：

  {
 version：0.1.0，
command：gulp，
isShellCommand：true，
args：[
--no-color 
]，
tasks：[
 {
taskName：serve-dev，
isBuildCommand：false，
 isTestCommand：true，
showOutput：always，
args：[] 
}，
 {
taskName： ，
isBuildCommand：false，
isTestCommand：true，
showOutput：always，
args：[] 
} b $ b 

现在Gulp任务将用Gulp定义和编码，但重要的是要注意的是 isBuildCommand 和 isTestCommand ，因为这些与 CTRL + SHFT + B和CTRL + SHFT + T 。所以这两个任务将作为键盘快捷键。此外，如果你添加额外的任务，他们将被枚举并且可以通过 CTRL + SHFT + P访问，然后键入RUN，然后选择TASK：Run Task。

以下代码仅演示如何将VSCode任务与任务运行器任务相关联：

  //自动化构建节点服务器在更改时启动和重新启动
 gulp.task（'serve-build'，['optimize']，function {
 
 serve（false / * is Build * /）; 
 
}）; 
 
 //自动化dev节点服务器启动并重启更改
 gulp.task（'serve-dev'，['inject']，function（）{
 
 serve（true / * is Dev * /）; 
 
}）; 
  

调试

.js或Mono你有类似的选项。您将需要配置 launch.json 或按'齿轮图标'。您可以将调试器设置为 debug 或运行您的应用程序，并使用VSCode 'F5' 或 PLAY 按钮或菜单来启动/停止/重新启动应用程序。从那里，你只需使用你最喜欢的浏览器，并访问你的应用程序的服务器。您还可以使用外部调试器附加到您的应用程序。以下是一个示例launch.json：

  {
version：0.1.0，
 //配置列表。添加新配置或编辑现有配置。 
 //只支持node和mono，改变type切换。 
configurations：[
 {
 //配置名称;将出现在启动配置下拉菜单中。 
name：Debug src / server / app.js，
 //配置类型。可能的值：node，mono。 
type：node，
 //工作空间相对或程序的绝对路径。 
program：src / server / app.js，
 //启动后自动停止程序。 
stopOnEntry：true，
 //传递给程序的命令行参数。 
args：[]，
 //工作空间相对或正在调试的程序的工作目录的绝对路径。默认是当前工作区。 
cwd：。，
 //要使用的运行时可执行文件的工作空间相对路径或绝对路径。默认是PATH上的运行时可执行文件。 
runtimeExecutable：null，
 //传递给可执行文件的可选参数。 
runtimeArgs：[]，
 //环境变量传递给程序。 
env：{}，
 //使用JavaScript源映射（如果存在）。 
sourceMaps：false，
 //如果启用了JavaScript源映射，则应在此目录中生成生成的代码。 
outDir：null 
}，
 {
 //配置名称;出现在启动配置下拉菜单中。 
name：运行src / server / app.js，
 //配置类型。可能的值：node，mono。 
type：node，
 //工作空间相对或程序的绝对路径。 
program：src / server / app.js，
 //启动后自动停止程序。 
stopOnEntry：false，
 //传递给程序的命令行参数。 
args：[]，
 //工作空间相对或正在调试的程序的工作目录的绝对路径。默认是当前工作区。 
cwd：。，
 //要使用的运行时可执行文件的工作空间相对路径或绝对路径。默认是PATH上的运行时可执行文件。 
runtimeExecutable：null，
 //传递给可执行文件的可选参数。 
runtimeArgs：[]，
 //环境变量传递给程序。 
env：{}，
 //使用JavaScript源映射（如果存在）。 
sourceMaps：false，
 //如果启用了JavaScript源映射，则应在此目录中生成生成的代码。 
outDir：null 
}，
 {
name：Attach，
type：node，
 TCP / IP地址。默认为localhost。 
address：localhost，
 //要附加到的端口。 
port：5858，
sourceMaps：false 
} 
] 
} 
   RUN和DEBUG 的'stopOnEntry'设置。这是如何使用调试器运行或调试应用程序。从那里你只需使用调试'PLAY'按钮结合调试菜单选择适当的配置。
 
 
 
实时预览
 
 
 
当前VSCode中没有实现实时预览。迄今为止，我最喜欢的两个是 BrowserSync 和 Live.JS  a>。 
 
 
 
使用NODEMON的GULP TASK 
 
 
 
以下是一些代码，可能有助于指导配置Gulp运行node.js服务器。记住，Gulp任务可能需要首先运行其他任务。在上面的代码中，Gulp任务serve-build需要先运行另一个任务optimize。 optimize可能需要运行其他任务等等。您可以链接这些任务，使您的顶级任务运行所有的子级任务。以下是从gulpfile.js设置中的Gulp任务执行的函数：
 函数serve（isDev）{
 log（'启动预处理和节点服务器...'）; 
 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（'restart on restart：\\\
'+ 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任务实际上只运行此函数运行nodemon通过Gulp nodemon插件使生成/构建或 test /dev ：
  //自动化构建节点服务器在更改时启动和重新启动
 gulp.task（'serve-build' ['optimize']，function（）{
 
 serve（false / * is Build * /）; 
 
} 
 
 //自动化dev节点服务器启动并重启更改
 gulp.task（'serve-dev'，['inject']，function（）{
 
 serve（true / * is Dev * /）; 
 
}）; 
  
 
 
 
映射到VSCODE TASK RUNNER的GULP任务
 
 
 
最后，您可以映射您的顶级Gulp任务，如serve-dev 
和serve-build code>添加条目到您的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设置为始终。也许这可以取代您的需要启动一个终端/命令行窗口运行您的节点应用程序。您还可以根据需要将此属性设置为从不或 silent 。您可以在VSCode 文档中找到有关这些属性的详细信息。  
 
 
您也可以使用 CTRL-SHFT-B 来执行 STOP  code>或 CTRL-SHFT-T 或在启动任务后使用菜单。
 
 
 
如果必须编译代码并在终端中运行应用程序，我认为您将需要在运行任务运行程序的task.json配置中使用脚本/批处理文件，然后启动节点服务器。
 
I have a TypeScript project in Visual Studio Code with the following task:
{
  "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"
}
This works well when we hit "Ctrl + Shift + B" to build.

Is it possible to have another task that when we press "F5" to run/debug it runs a command through the command line?

Thank you.
解决方案
TASK RUNNERS VS DEBUGGING PLUS LIVE PREVIEW

Task Runner

Currently, for VSCode version 0.5.0, you can use a task runner, identified in your task.json, to run multiple tasks using the same runner.  At this time, configuring different tasks runners is not possible.  For example, if you were using Gulp as a task runner you might have something like the following: 
{
"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": []
    }
Now the Gulp tasks would be defined and coded with Gulp but the important thing to note is the  isBuildCommand and isTestCommand as these correlate to CTRL+SHFT+B and CTRL+SHFT+T respectively.  So these two tasks would be available as keyboard shortcuts.  In addition, if you add additional tasks they will each be enumerated and accessible with CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". Each of your tasks with be enumerated, listed and selectable.

The following code just demonstrates how eash VSCode task is related to a task runner task:
//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 */);

});


Debugging

Now for debugging with Node.js or Mono you have similar options. You will want to configure your launch.json or press the 'gear icon'. You can set the debugger to debug or run your app and use the VSCode 'F5' or PLAY button or menu's to start/stop/restart your app. From there you just use your favorite browser and access the server of your app. You can also use an external debugger to 'attach' to your app.  Following is a sample 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
    }
  ]
}
Notice the 'stopOnEntry' property for the RUN and DEBUG setups.  This is how you can use the debugger to run or debug the app.  From there you would just use the debug 'PLAY' button combined with the debug menu to select the appropriate configuration.

Live Preview

Live Preview is not currently implemented in VSCode.  Two of my favorites so far are BrowserSync and Live.JS.  

GULP TASK WITH NODEMON

Following is some code that may help point the way to configuring Gulp to run a node.js server.  Remember that Gulp tasks can require other tasks to run first. In the code above, the Gulp task "serve-build" requires another task "optimize" to run first.  "optimize" can require other tasks to run and so forth.You can chain these tasks so that your top level tasks run all of your sub-level tasks.  Following is a function that's executed from a Gulp task in the gulpfile.js setup:
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');
    });

}
So the following Gulp tasks actually just run this function which runs nodemon via the Gulp nodemon plugin to make production / "build" or test / "dev" builds using a parameter variable:
//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 */);

});


MAPPING GULP TASKS TO THE VSCODE TASK RUNNER

Finally, you can map your top-level Gulp tasks like "serve-dev"
and "serve-build" by adding entries to your VSCode tasks.json and using isBuildCommand and isTestCommand to map to CTRL+SHFT+B and CTRL+SHFT-T respectively.
{
"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 Output

VSCode also has a task.json property to show output of your running tasks in VSCode. This will open the OUTPUT window of VSCode just like using SHFT+CTRL+H or selecting the menu VIEW then selecting SHOW OUTPUT. At this time the output window does not display color. 

Just set "showOutput" to always. Perhaps this could replace your need to start a terminal/command line window thats running your node app.  You can also set this property to never or silent depending on your needs.  You can find more info about these properties in the VSCode documentation. 

You can also STOP a running task by with CTRL-SHFT-B or CTRL-SHFT-T or use the menus after starting a task.

Finally, if you must compile your code and run the app in a terminal I think you will need to use a script/batch file in your task.json configuration that runs your task runner and then starts your node server.

                        
这篇关于配置VSCode以执行不同的任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！