visual studio的代码编译保存
如何configurationvisual studio代码来保存打字稿文件？ 我发现可以使用${file}作为参数来configuration一个任务来构build焦点${file} 。 但是我希望在保存文件的时候这样做。
你可以用Build命令来做到这一点：
使用"watch": true创build一个简单的tsconfig.json "watch": true （这将指示编译器观察所有已编译的文件）：
{ "compilerOptions": { "target": "es5", "out": "js/script.js", "watch": true } }
请注意， files数组被省略，默认情况下，所有子目录中的所有*.ts文件将被编译。 您可以提供任何其他参数或更改target / out ，只要确保watch设置为true 。
configuration你的任务（ Ctrl + Shift + P – > Configure Task Runner ）：
{ "version": "0.1.0", "command": "tsc", "showOutput": "silent", "isShellCommand": true, "problemMatcher": "$tsc" }
现在按Ctrl + Shift + B来build立项目。 您将在输出窗口中看到编译器输出（ Ctrl + Shift + U ）。
编译器将在保存时自动编译文件。 要停止编译，请按Ctrl + P – > Tasks: Terminate Running Task
我已经专门为这个答案创build了一个项目模板： typescript-node-basic
如果您希望避免使用CTRL + SHIFT + B并且希望在您保存文件时发生这种情况，可以将该命令绑定到与保存操作相同的快捷方式：
[ { "key": "ctrl+s", "command": "workbench.action.tasks.build" } ]
这是在你的keybindings.json – （使用文件 – >首选项 – >键盘快捷键头）。
如果按Ctrl + Shift + B看起来很费力，可以打开“自动保存”（“文件”>“自动保存”）并使用NodeJS来观察项目中的所有文件，并自动运行TSC。
打开Node.JS命令提示符，将目录更改为项目根文件夹，然后键入以下内容;
tsc -w
嘿，每次VS Code自动保存文件，TSC都会重新编译它。
这个技术在博客文章中被提及。
http://www.typescriptguy.com/getting-started/angularjs-typescript/
向下滚动到“保存时编译”
为了得到我想要的行为，我奋力拼命挣扎。 这是获得TypeScript文件保存，到我想要的configuration，只有这个文件（保存的文件）编译的最简单和最好的方法。 这是一个tasks.json和一个keybindings.json。 
写一个扩展
现在vscode是可扩展的，可以通过扩展挂接到保存事件。 编写VSCode扩展的一个很好的概述可以在这里find： https ://code.visualstudio.com/docs/extensions/overview
下面是一个简单的例子，它只是调用echo $filepath并在消息对话框中输出stdout：
import * as vscode from 'vscode'; import {exec} from 'child_process'; export function activate(context: vscode.ExtensionContext) { vscode.window.showInformationMessage('Run command on save enabled.'); var cmd = vscode.commands.registerCommand('extension.executeOnSave', () => { var onSave = vscode.workspace.onDidSaveTextDocument((e: vscode.TextDocument) => { // execute some child process on save var child = exec('echo ' + e.fileName); child.stdout.on('data', (data) => { vscode.window.showInformationMessage(data); }); }); context.subscriptions.push(onSave); }); context.subscriptions.push(cmd); }
（也参考这个SO问题： https : //stackoverflow.com/a/33843805/20489 ）
现有的VSCode扩展
如果你只想安装现有的扩展，下面是我写在VSCode库中的一个： https ：//marketplace.visualstudio.com/items/emeraldwalk.RunOnSave
源代码可以在这里find： https ： //github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts
而不是build立一个单一的文件，并绑定Ctrl + S触发构build，我build议使用以下tasks.json文件启动tsc手表模式：
{ "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-w", "-p", "."], "showOutput": "silent", "isWatching": true, "problemMatcher": "$tsc-watch" }
这将一次构build整个项目，然后重build保存的文件，而不pipe它们如何保存（Ctrl + S，自动保存，…）
我使用gulp-typescript和增量构build来执行保存的gulp任务的编译。 这可以控制任何你想要的编译。 注意我的variablestsServerProject，在我的真实项目中，我也有tsClientProject，因为我想编译我的客户端代码没有指定模块。 据我所知你不能用vs代码来做。
var gulp = require('gulp'), ts = require('gulp-typescript'), sourcemaps = require('gulp-sourcemaps'); var tsServerProject = ts.createProject({ declarationFiles: false, noExternalResolve: false, module: 'commonjs', target: 'ES5' }); var srcServer = 'src/server/**/*.ts' gulp.task('watch-server', ['compile-server'], watchServer); gulp.task('compile-server', compileServer); function watchServer(params) { gulp.watch(srcServer, ['compile-server']); } function compileServer(params) { var tsResult = gulp.src(srcServer) .pipe(sourcemaps.init()) .pipe(ts(tsServerProject)); return tsResult.js .pipe(sourcemaps.write('./source-maps')) .pipe(gulp.dest('src/server/')); }
select首选项 – >工作区设置并添加以下代码。如果启用了热重新加载，则更改将立即反映在浏览器中
{ "files.exclude": { "**/.git": true, "**/.DS_Store": true, "**/*.js.map": true, "**/*.js": {"when": "$(basename).ts"} }, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000 }
我可以用TypeScript 1.8.X和1.0的Visual Studio代码的最新版本说，我显示的技术是过时的。 只需在项目的根目录下使用tsconfig.json，并全部自动进行语法检查。 然后在命令行上使用tsc -w自动查看/重新编译。 它将读取与ts编译的选项和configuration相同的tsconfig.json文件。
//tsconfig.json
{ "compilerOptions": { "module": "amd", "target": "ES5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "inlineSourceMap": true }, "exclude": [ "node_modules" ] }
答案是VisualStudio，而不是VisualStudio-Code：
- 安装VisualStudio的Type-Script-Extension：
- 通过VS：工具 – >扩展和更新 – >在线 – > Microsoft Visual Studio的TypeScript
- http://www.typescriptlang.org/#download-links
- 转到工具 – >选项 – >文本编辑器 – >（JavaScript / *）TypeScript->项目
- 激活“编译安全” – >自动编译不属于项目的TypeScript文件
* VS2017
