wake-up-neo.com

visual Studio Code beim Speichern kompilieren

Wie kann ich Visual Studio-Code konfigurieren, um TypeScript-Dateien beim Speichern zu kompilieren? Ich sehe, dass es möglich ist, eine Task so zu konfigurieren, dass die Datei im Fokus erstellt wird, wobei ${file} als Argument verwendet wird. Ich möchte jedoch, dass dies beim Speichern einer Datei durchgeführt wird.

125
Powell Quiring

Update Mai 2018:

Ab Mai 2018 müssen Sie nicht mehr tsconfig.json manuell erstellen oder task runner konfigurieren.

  1. Führen Sie tsc --init in Ihrem Projektordner aus, um eine tsconfig.json-Datei zu erstellen (falls Sie noch keine haben).
  2. Drücken Sie Ctrl+Shift+B um eine Liste von Aufgaben in VS Code zu öffnen und tsc: watch - tsconfig.json auszuwählen.
  3. Erledigt! Ihr Projekt wird bei jedem Speichern einer Datei neu kompiliert.

Sie können mehrere tsconfig.json-Dateien in Ihrem Arbeitsbereich haben und bei Bedarf mehrere Kompilierungen gleichzeitig ausführen (z. B. Frontend und Backend getrennt).

Ursprüngliche Antwort:

Sie können dies mit Build-Befehlen tun:

Erstellen Sie ein einfaches tsconfig.json mit "watch": true (dies weist den Compiler an, alle kompilierten Dateien zu sehen):

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

Beachten Sie, dass das Array files weggelassen wird. Standardmäßig werden alle *.ts-Dateien in allen Unterverzeichnissen kompiliert. Sie können andere Parameter angeben oder target/out ändern. Stellen Sie jedoch sicher, dass watch auf true eingestellt ist.

Konfigurieren Sie Ihre Aufgabe (Ctrl+Shift+P -> Configure Task Runner):

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

Jetzt drücken Ctrl+Shift+B das Projekt zu bauen. Sie sehen die Compiler-Ausgabe im Ausgabefenster (Ctrl+Shift+U).

Der Compiler kompiliert die Dateien beim Speichern automatisch. Um die Zusammenstellung zu beenden, drücken Sie Ctrl+P -> > Tasks: Terminate Running Task

Ich habe speziell für diese Antwort eine Projektvorlage erstellt: TypeScript-node-basic

171
zlumer

Wenn Sie vermeiden möchten, CTRL + SHIFT + B verwenden zu müssen, und dies stattdessen jedes Mal, wenn Sie eine Datei speichern, ausführen soll, können Sie den Befehl an dieselbe Abkürzung wie die Sicherungsaktion binden:

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

Dies geschieht in Ihrer keybindings.json - (dazu mit Datei -> Voreinstellungen -> Tastenkombinationen).

32
Fenton

Wenn Sie drücken Ctrl+Shift+B Es scheint ein großer Aufwand zu sein, Sie können "Automatisch speichern" (Datei> Automatisch speichern) aktivieren und mit NodeJS alle Dateien in Ihrem Projekt anzeigen und TSC automatisch ausführen.

Öffnen Sie eine Node.JS-Eingabeaufforderung, wechseln Sie in den Projektstammordner und geben Sie Folgendes ein.

tsc -w

Und hey presto, jedes Mal, wenn VS Code die Datei automatisch speichert, wird TSC sie neu kompilieren.

Diese Technik wird in einem Blogeintrag erwähnt.

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

Scrollen Sie nach unten zu "Beim Speichern kompilieren"

19
Jon Preece

Ich habe heftig gekämpft, um das gewünschte Verhalten zu erreichen. Dies ist der einfachste und beste Weg, TypeScript-Dateien beim Speichern zu kompilieren, und zwar in der gewünschten Konfiguration nur DIESE Datei (die gespeicherte Datei). Es ist ein Aufgaben.json und ein Keybindings.json .  

 enter image description here

6
httpete

Eine Erweiterung schreiben

Jetzt, da vscode erweiterbar ist, ist es möglich, sich über eine Erweiterung in das on save -Ereignis einzuhaken. Eine gute Übersicht über das Schreiben von Erweiterungen für VSCode finden Sie hier: https://code.visualstudio.com/docs/extensions/overview

Hier ein einfaches Beispiel, das einfach echo $filepath aufruft und stdout in einem Nachrichtendialogfeld ausgibt:

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);
}

(Auch auf diese Frage SO verwiesen: https://stackoverflow.com/a/33843805/20489 )

Vorhandene VSCode-Erweiterung

Wenn Sie nur eine vorhandene Erweiterung installieren möchten, haben Sie in der VSCode-Galerie eine davon geschrieben: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Der Quellcode ist hier verfügbar: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

5
bingles

Anstatt eine einzelne Datei zu erstellen und Strg + S zu binden, um diesen Build auszulösen, würde ich empfehlen, tsc im Überwachungsmodus mit der folgenden Datei task.json zu starten:

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

Dadurch wird das gesamte Projekt einmal erstellt und anschließend die Dateien neu erstellt, die gespeichert werden, unabhängig davon, wie sie gespeichert wurden (Strg + S, automatisches Speichern, ...).

4
Dirk Bäumer

Ich habe das Kompilieren beim Speichern mit gulp task mit gulp-TypeScript und incremental build implementiert. Dadurch können Sie die Kompilierung nach Belieben steuern. Beachten Sie meine Variable tsServerProject. In meinem realen Projekt habe ich auch tsClientProject, da ich meinen Client-Code mit keinem angegebenen Modul kompilieren möchte. Wie ich weiß, kann man es nicht mit vs Code machen.

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

}
2

Ich kann mit der neuesten Version von TypeScript 1.8.X und 1.0 von Visual Studio-Code sagen, dass die von mir gezeigte Technik veraltet ist. Verwenden Sie einfach eine tsconfig.json auf der Stammebene Ihres Projekts, und alle Funktionen werden automatisch für die Syntaxprüfung ausgeführt. Verwenden Sie dann tsc -w in der Befehlszeile, um die Wiedergabe/das erneute Kompilieren automatisch durchzuführen. Es wird die gleiche Datei "tsconfig.json" für Optionen und Konfigurationen von ts compile lesen.

// tsconfig.json

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

Wählen Sie Voreinstellungen -> Arbeitsbereich-Einstellungen aus und fügen Sie den folgenden Code hinzu. Wenn Sie Hot Reload aktiviert haben, werden die Änderungen sofort im Browser angezeigt

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

ich habe die oben genannten Methoden ausprobiert, aber meine hat die automatische Kompilierung gestoppt, als es mir danach schien, weil die maximale Anzahl an zu überwachenden Dateien das Limit überschritten hat.

führen Sie den Befehl cat /proc/sys/fs/inotify/max_user_watches aus.

wenn weniger Dateien angezeigt werden, einschließlich node_modules, öffnen Sie die Datei /etc/sysctl.conf mit Root-Rechten und hängen Sie sie an

fs.inotify.max_user_watches=524288 in die Datei und speichern

führen Sie den Befehl cat erneut aus, um das Ergebnis anzuzeigen. Es wird klappen! hoffnungsvoll!

0
Aelaf

aktualisiert

In deinem tsconfig.json

"compileOnSave": true, // change to true

wenn das Problem weiterhin besteht, ändern Sie die Route und setzen Sie sie zurück. Speichern Sie die Anwendung. Es wird mit dem Kompilieren beginnen, d.h.

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

Ich hoffe das hilft jemandem. Dies ist zwar nicht die dauerhafte Lösung, aber es funktioniert, bis Sie eine bessere Lösung erhalten.

0
WasiF

Eine äußerst einfache Methode zum automatischen Kompilieren beim Speichern besteht darin, Folgendes in das Terminal einzugeben:

tsc main --watch

dabei ist main.ts Ihr Dateiname.

Beachten Sie, dass dies nur so lange ausgeführt wird, wie dieses Terminal geöffnet ist. Es ist jedoch eine sehr einfache Lösung, die ausgeführt werden kann, während Sie ein Programm bearbeiten.

0
Daniel C Jacobs