配置 VSCode 执行不同的任务
Configure VSCode to execute different task
我在 Visual Studio 代码中有一个 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"到run/debug时，它通过命令行运行一个命令？
谢谢。
任务运行器与调试加实时预览
任务运行器
目前，对于 VSCode 版本 0.5.0，您可以使用一个任务 运行ner，在您的 task.json 中识别，运行 多个任务使用相同的运行纳尔。目前，无法配置不同的任务 运行ners。例如，如果您使用 Gulp 作为任务 运行ner，您可能会遇到类似以下内容的情况：
{
"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，因为它们与 [=18] 相关=] 分别。所以这两个任务可以作为键盘快捷键使用。此外，如果您添加额外的任务，它们将被枚举和访问 CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". 您的每个任务都将被枚举、列出并且 select 可用。
下面的代码只是演示了 eash VSCode 任务如何与任务 运行ner 任务相关：
//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 按钮或菜单来 start/stop/restart 您的应用程序。从那里你只需使用你最喜欢的浏览器并访问你的应用程序的服务器。您还可以使用外部调试器 'attach' 到您的应用程序。以下是示例 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' 按钮结合调试菜单来 select 适当的配置。
实时预览
VSCode 当前未实现实时预览。到目前为止，我最喜欢的两个是 BrowserSync and Live.JS。
GULP 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 任务实际上只是 运行 这个函数 运行s nodemon 通过 Gulp 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 属性 来显示 运行ning 任务在 VSCode 中的输出。这将打开 VSCode 的 OUTPUT window 就像使用 SHFT+CTRL+H 或 selecting 菜单 VIEW 然后 selecting SHOW OUTPUT。此时输出window不显示颜色。
只需将 "showOutput" 设置为 always。也许这可以代替您启动 terminal/command 行 window 那就是 运行 节点应用程序的需要。您也可以根据需要将此 属性 设置为 never 或 silent。您可以在 VSCode documentation 中找到有关这些属性的更多信息。
您还可以通过 CTRL-SHFT-B 或 CTRL-SHFT-T STOP 执行 运行 任务，或者在开始任务后使用菜单。
最后，如果您必须在终端中编译您的代码和 运行 应用程序，我认为您需要在 task.json 配置中使用 script/batch 文件 运行是你的任务运行然后启动你的节点服务器。
如果您不想使用 gulp 而只是进行打字稿编译，那么一个简单的方法是转到终端并 运行 tsc -w <filename.ts>，不需要tasks.json。
它监视文件更改并将它们转换为 js 文件。
然后每当你点击 'F5' 它应该 运行 更新的 js 文件指向 launch.json.
如果你想要 tsc 转换多个 ts 文件，你也可以在你的应用程序根目录中添加 tsconfig.json "rootdir"，然后只需 运行 tsc -w 和 F5 执行应用程序。
样本tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"outDir": "<js dir>",
"rootDir": "<point to all ts dir>"
}
}
我相信这是通过后来的功能解决的，即预启动任务。您可以在使用 F5 node/Chrome 启动 运行 之前让它成为一个任务。
http://tstringer.github.io/javascript/vscode/nodejs/gulpjs/2015/10/14/vscode-prelaunchtask.html
我在 Visual Studio 代码中有一个 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"到run/debug时，它通过命令行运行一个命令？
谢谢。
任务运行器与调试加实时预览
任务运行器
目前，对于 VSCode 版本 0.5.0，您可以使用一个任务 运行ner，在您的 task.json 中识别，运行 多个任务使用相同的运行纳尔。目前，无法配置不同的任务 运行ners。例如，如果您使用 Gulp 作为任务 运行ner，您可能会遇到类似以下内容的情况：
{
"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，因为它们与 [=18] 相关=] 分别。所以这两个任务可以作为键盘快捷键使用。此外，如果您添加额外的任务，它们将被枚举和访问 CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". 您的每个任务都将被枚举、列出并且 select 可用。
下面的代码只是演示了 eash VSCode 任务如何与任务 运行ner 任务相关：
//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 按钮或菜单来 start/stop/restart 您的应用程序。从那里你只需使用你最喜欢的浏览器并访问你的应用程序的服务器。您还可以使用外部调试器 'attach' 到您的应用程序。以下是示例 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' 按钮结合调试菜单来 select 适当的配置。
实时预览
VSCode 当前未实现实时预览。到目前为止，我最喜欢的两个是 BrowserSync and Live.JS。
GULP 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 任务实际上只是 运行 这个函数 运行s nodemon 通过 Gulp 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 属性 来显示 运行ning 任务在 VSCode 中的输出。这将打开 VSCode 的 OUTPUT window 就像使用 SHFT+CTRL+H 或 selecting 菜单 VIEW 然后 selecting SHOW OUTPUT。此时输出window不显示颜色。
只需将 "showOutput" 设置为 always。也许这可以代替您启动 terminal/command 行 window 那就是 运行 节点应用程序的需要。您也可以根据需要将此 属性 设置为 never 或 silent。您可以在 VSCode documentation 中找到有关这些属性的更多信息。
您还可以通过 CTRL-SHFT-B 或 CTRL-SHFT-T STOP 执行 运行 任务，或者在开始任务后使用菜单。
最后，如果您必须在终端中编译您的代码和 运行 应用程序，我认为您需要在 task.json 配置中使用 script/batch 文件 运行是你的任务运行然后启动你的节点服务器。
如果您不想使用 gulp 而只是进行打字稿编译，那么一个简单的方法是转到终端并 运行 tsc -w <filename.ts>，不需要tasks.json。
它监视文件更改并将它们转换为 js 文件。
然后每当你点击 'F5' 它应该 运行 更新的 js 文件指向 launch.json.
如果你想要 tsc 转换多个 ts 文件，你也可以在你的应用程序根目录中添加 tsconfig.json "rootdir"，然后只需 运行 tsc -w 和 F5 执行应用程序。
样本tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"outDir": "<js dir>",
"rootDir": "<point to all ts dir>"
}
}
我相信这是通过后来的功能解决的，即预启动任务。您可以在使用 F5 node/Chrome 启动 运行 之前让它成为一个任务。
http://tstringer.github.io/javascript/vscode/nodejs/gulpjs/2015/10/14/vscode-prelaunchtask.html