visual studio代码编译保存

Question

如何配置visual studio代码以在保存时编译打字稿文件？我看到可以使用${file}as参数配置一个任务来构建焦点文件.但我希望在保存文件时完成此操作.

Answer 1

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.json的"watch": true(这将指示编译器观察所有编译的文件):

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

Answer 2

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

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

这包含在你的keybindings.json中 - (使用文件 - >首选项 - >键盘快捷键转到此处).

Answer 3

如果按Ctrl+ Shift+ B似乎需要付出很多努力,您可以打开"自动保存"(文件>自动保存)并使用NodeJS观察项目中的所有文件,并自动运行TSC.

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

tsc -w

并且嘿presto,每次VS Code自动保存文件,TSC将重新编译它.

博客文章中提到了这种技术;

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

向下滚动到"保存时编译"

Answer 4

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

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

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

Answer 5

写一个扩展

现在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://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

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

Answer 6

为了得到我想要的行为,我一直在努力奋斗.这是在保存时将TypeScript文件编译为我想要的配置的最简单和最好的方法,只有THIS文件(保存的文件).这是一个tasks.json和一个keybindings.json.

Answer 7

我建议不要使用以下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，自动保存...）