Visual Studio Code 在保存时编译答案

【问题标题】：Visual Studio Code compile on saveVisual Studio Code 在保存时编译
【发布时间】：2015-07-11 19:59:07
【问题描述】：

如何配置 Visual Studio Code 以在保存时编译 typescript 文件？

我发现可以使用${file} 作为参数来配置任务以构建焦点文件。但我希望在保存文件时完成此操作。

【问题讨论】：

以上链接适用于 VS，不适用于 VS 代码。保存时编译与编译和任务不同。保存时仅发出单个 JS 文件。我也想要这个 VS 代码。
这是个好建议。我打开了一个内部工作项来实现该功能。
这里是工作项：visualstudio.uservoice.com/forums/293070-visual-studio-code/…
能否请您标记答案
在终端输入tsc <filename> --watch

标签： typescript visual-studio-code

【解决方案1】：

2018 年 5 月更新：

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

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

您可以在您的工作区中拥有多个 tsconfig.json 文件，并根据需要一次运行多个编译（例如，前端和后端分开）。

原答案：

您可以使用构建命令来做到这一点：

用"watch": true 创建一个简单的tsconfig.json（这将指示编译器监视所有编译的文件）：

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

注意files数组被省略，默认所有子目录下的所有*.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

【讨论】：

这个问题是它保持任务运行，VS Code 知道我什么时候保存一个 less 文件或 ts 文件，因为我们不能挂钩到“On”，所以有另一个观察者感觉是多余的轻松保存”命令。我想知道是否有人已经做了扩展以在保存特定文件类型时运行某些东西，会好得多。
@Ciantic 这个答案是在 VS Code 支持扩展之前编写的。你说的只是一个extension，但让 TypeScript 编译器监视文件并只重新编译更改的文件实际上更快。
@Kokodoko bc compileOnSave 仅适用于 VS 2015，不适用于代码
@scape 它也适用于 VS Code，如果你在 tasks.json 的命令行参数中添加“-w”！
实际上 VSCode 会为您完成配置工作： 在 configure task 上：VSCode 将自动检测到有 tsconfig.json 并提示一个对话框，您可以在其中选择tsc: build - tsconfig.json 或 tsc: watch - tsconfig.json。选择后者，VSCode 会生成tasks.json 文件（如果之前没有的话）并为您添加正确的配置。

【解决方案2】：

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

[
    {
        "key": "ctrl+s",          
        "command": "workbench.action.tasks.build" 
    }
]

这在您的 keybindings.json 中 - （使用 File -> Preferences -> Keyboard Shortcuts 前往此）。

【讨论】：

这应该只是上述答案的附加内容（已编辑）。这让我很开心！
好答案...？如何过滤将要启动的内容...例如：如果文件具有html扩展名，我只想执行命令???
@ZEE 是的，这是可能的，请参阅keybindings 和httpete's answer 的文档以获取简要示例。具体来说，使用editorLangId 的when 条件很重要。
这不会覆盖原来的命令吗？

【解决方案3】：

如果按 Ctrl+Shift+B 看起来很费力，您可以打开“自动保存”（文件 > 自动保存）并使用 NodeJS 监视项目中的所有文件，并自动运行 TSC。

打开 Node.JS 命令提示符，将目录更改为您的项目根文件夹并键入以下内容；

tsc -w

嘿 presto，每次 VS Code 自动保存文件时，TSC 都会重新编译它。

在一篇博文中提到了这种技术；

http://www.typescriptguy.com/getting-started/angularjs-typescript/

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

【讨论】：

【解决方案4】：

编写扩展程序

现在 vscode 是可扩展的，可以通过扩展来挂钩 on save 事件。可以在这里找到为 VSCode 编写扩展的一个很好的概述： https://code.visualstudio.com/docs/extensions/overview

这是一个简单的例子，它只调用echo $filepath 并在消息对话中输出标准输出：

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

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

【讨论】：

现有的扩展正是我所期望的，我没有夸大其词。额外的支持。

【解决方案5】：

为了得到我想要的行为，我一直在努力奋斗。这是让 TypeScript 文件在保存时编译到我想要的配置的最简单和最好的方法，只有这个文件（保存的文件）。它是一个tasks.json 和一个keybindings.json。

【讨论】：

对于懒惰的开发者：{ "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } keybingings：{ "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" }
我可以说使用最新版本的 TypeScript 1.8.X 和 Visual Studio 代码 1.0，我展示的技术已经过时了。只需在项目的根级别使用 tsconfig.json 即可自动进行语法检查。然后在命令行上使用 tsc -w 自动观看/重新编译。 {“compilerOptions”：{“module”：“amd”，“target”：“ES5”，“noImplicitAny”：false，“removeComments”：true，“preserveConstEnums”：true，“inlineSourceMap”：true }，“exclude” : [ "node_modules" ] }

【解决方案6】：

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

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

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

【讨论】：

其中一些道具已被弃用。

【解决方案7】：

步骤 1

在你的tsconfig.json

"compileOnSave": true, // change it to true and save the application

如果问题仍然存在，请申请 step-2

第二步

重启编辑器

如果问题仍未解决，请申请 step-3

第三步

更改任何路线，将其还原并保存应用程序。它将开始编译。即

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

【讨论】：

现在 VS 代码是否支持该功能？上次检查时，无法保存，需要使用扩展来保存。
现在支持

【解决方案8】：

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

tsc main --watch // autosave `main.ts`
tsc -w // autosave all typescript files in your project

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

【讨论】：

tsc -w 也适用于项目中的所有打字稿文件

【解决方案9】：

我使用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/'));

}

【讨论】：

【解决方案10】：

选择 Preferences -> Workspace Settings 并添加以下代码，如果您启用了热重载，则更改会立即反映在浏览器中

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

【讨论】：

【解决方案11】：

这个问题的现状：

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

【讨论】：

【解决方案12】：

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

// tsconfig.json

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

【讨论】：

【解决方案13】：

你需要增加watches限制来修复保存时重新编译的问题，打开终端并输入这两个命令：

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

【讨论】：

【解决方案14】：

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

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

如果显示的文件数量较少，包括 node_modules，则打开文件 /etc/sysctl.conf 具有 root 权限并附加

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

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

【讨论】：

【解决方案15】：

我使用在 .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 和任务：管理文件夹中的自动任务，然后在主项目文件夹或正在运行的文件夹中选择“允许文件夹中的自动任务”。

【讨论】：