Visual Studio Code在保存时编译

如何配置Visual Studio Code在保存时编译打字稿文件？

我看到可以配置任务以使用${file}作为参数集中构建文件。但是我希望在保存文件时完成此操作。

2018年5月更新：

从2018年5月开始，您不再需要tsconfig.json手动创建或配置任务运行器。

1. tsc --init在您的项目文件夹中运行以创建tsconfig.json文件（如果还没有文件的话）。
2. 按Ctrl+Shift+B打开VS Code中的任务列表，然后选择tsc: watch - tsconfig.json。
3. 做完了！您保存的每个文件都会重新编译您的项目。

您可以tsconfig.json在工作空间中包含多个文件，并根据需要一次运行多个编译（例如，前端和后端分别运行）。

原始答案：

您可以使用Build命令执行此操作：

创建一个简单的tsconfig.jsonwith "watch": true（这将指示编译器观看所有编译的文件）：

{
    "compilerOptions": {
        "target": "es5",
        "out": "js/script.js",
        "watch": true
    }
}

请注意，files省略了array，默认情况下*.ts将编译所有子目录中的所有文件。您可以提供任何其他参数或更改target/ out，只需确保将watch其设置为即可true。

配置任务（Ctrl+Shift+P-> Configure Task Runner）：

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

现在按Ctrl+Shift+B构建项目。您将在输出窗口（Ctrl+Shift+U）中看到编译器输出。

保存后，编译器将自动编译文件。要停止编译，请按Ctrl+P->> Tasks: Terminate Running Task

我已经专门为此答案创建了一个项目模板： typescript-node-basic

如果要避免使用CTRL+ SHIFT+ B而是希望在保存文件的任何时间发生这种情况，可以将命令绑定到与save操作相同的快捷方式：

[
    {
        "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/

向下滚动到“保存时编译”

写一个扩展

现在，vscode是可扩展的，可以通过扩展来挂接on save事件。可以在此处找到有关VSCode的扩展的良好概述：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

源代码可在此处获取：https : //github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

我为获得想要的行为而竭尽全力。这是将TypeScript文件保存为仅此文件（保存的文件）到我想要的配置时进行编译的最简单，最好的方法。这是一个task.json和一个keybindings.json。

我建议不要使用以下task.json文件以监视方式启动tsc，而不是构建单个文件并绑定Ctrl + S来触发该构建。

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

这将一次构建整个项目，然后重建与保存方式无关的保存文件（Ctrl + S，自动保存...）

更新

在你的 tsconfig.json

"compileOnSave": true, // change to true

如果问题仍然存在，请执行以下任一操作：

重新启动编辑器或更改任何路线，将其还原并保存应用程序。它将开始编译。即

const routes: Routes = [
  {
    path: '', // i.e. remove , (comma) and then insert it and save, it'll start compile
    component: VersionsComponent
  }
]

我使用gulp-typescript和增量构建在gulp任务的保存上实现了编译。这允许您随意控制编译。请注意我的变量tsServerProject，在我的真实项目中我也有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/'));

}

选择“首选项”->“工作区设置”并添加以下代码，如果启用了“热重新加载”，则更改将立即反映在浏览器中

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    },
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

该问题的当前状态：

https://github.com/Microsoft/vscode/issues/7015

我可以说使用最新版本的TypeScript 1.8.X和Visual Studio代码1.0，我展示的技术已经过时了。只需在项目的根级别使用tsconfig.json，它们就会自动进行语法检查。然后在命令行上使用tsc -w自动监视/重新编译。它将读取相同的tsconfig.json文件以获取ts compile的选项和配置。

// tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true
    },
    "exclude": [ "node_modules" ]
} 

保存时自动编译的一种非常简单的方法是在终端中键入以下内容：

tsc main --watch

main.ts您的文件名在哪里。

请注意，只有在打开此终端后，此命令才能运行，但这是一个非常简单的解决方案，可以在编辑程序时运行。

您需要增加监视限制来解决保存时的重新编译问题，打开终端并输入以下两个命令：

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

要使更改即使在重新启动后仍持久存在，也请运行以下命令：

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

尝试了上述方法，但是由于要观看的最大文件数已超过限制，我的感觉就停止了自动编译。

运行cat /proc/sys/fs/inotify/max_user_watches命令。

如果显示的文件数量较少（包括node_modules），则以/etc/sysctl.confroot特权打开文件 并追加

fs.inotify.max_user_watches=524288 进入文件并保存

再次运行cat命令以查看结果。会工作的！希望！

我使用在.vscode / tasks.json中的文件夹上运行的自动任务（应运行VSCode> = 1.30）

{
 "version": "2.0.0",
 "tasks": [
    {
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "presentation": {
            "echo": true,
            "reveal": "silent",
            "focus": false,
            "panel": "shared"
        },
        "isBackground": true,
        "runOptions": {"runOn": "folderOpen"},
        "problemMatcher": [
            "$tsc-watch"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
 ]
}

如果仍然无法打开项目文件夹，请尝试按Ctrl + Shift + P和“任务：管理文件夹中的自动任务”，然后在主项目文件夹或运行文件夹中选择“允许文件夹中的自动任务”。