Visual Studio Code wird beim Speichern kompiliert

Wie kann ich Visual Studio Code so konfigurieren, dass beim Speichern Typoskriptdateien kompiliert werden?

Ich sehe, dass es möglich ist, eine Aufgabe zu konfigurieren, um die Datei im Fokus mit dem ${file}als Argument zu erstellen . Aber ich möchte, dass dies getan wird, wenn eine Datei gespeichert wird.

Update Mai 2018:

Ab Mai 2018 müssen Sie den tsconfig.jsonTask Runner nicht mehr manuell erstellen oder konfigurieren.

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

Sie können mehrere tsconfig.jsonDateien in Ihrem Arbeitsbereich haben und mehrere Kompilierungen gleichzeitig ausführen, wenn Sie möchten (z. B. Frontend und Backend getrennt).

Ursprüngliche Antwort:

Sie können dies mit Build-Befehlen tun:

Erstellen Sie eine einfache tsconfig.jsonmit "watch": true(dies weist den Compiler an, alle kompilierten Dateien anzusehen):

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

Beachten Sie, dass das filesArray weggelassen wird. Standardmäßig werden alle *.tsDateien in allen Unterverzeichnissen kompiliert. Sie können andere Parameter angeben oder target/ ändern. Stellen Sie outeinfach sicher, dass diese watchOption auf eingestellt ist true.

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

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

Drücken Sie nun Ctrl+Shift+B, um das Projekt zu erstellen. Sie sehen die Compilerausgabe im Ausgabefenster ( Ctrl+Shift+U).

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

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

Wenn Sie vermeiden möchten, dass CTRL+ SHIFT+ verwendet werden muss, Bund dies stattdessen jedes Mal auftreten soll, wenn Sie eine Datei speichern, können Sie den Befehl an dieselbe Verknüpfung wie die Speicheraktion binden:

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

Dies geht in Ihre keybindings.json - (gehen Sie dazu mit Datei -> Einstellungen -> Tastaturkürzel).

Wenn das Drücken von Ctrl+ Shift+ Bein großer Aufwand ist, können Sie "Auto Save" (Datei> Auto Save) aktivieren und mit NodeJS alle Dateien in Ihrem Projekt überwachen und TSC automatisch ausführen.

Öffnen Sie eine Node.JS-Eingabeaufforderung, wechseln Sie in das Verzeichnis Ihres Projektstammordners und geben Sie Folgendes ein:

tsc -w

Und hey Presto, jedes Mal, wenn VS Code die Datei automatisch speichert, kompiliert TSC sie neu.

Diese Technik wird in einem Blogbeitrag erwähnt.

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

Scrollen Sie nach unten zu "Beim Speichern kompilieren"

Schreiben Sie eine Erweiterung

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

Hier ist ein einfaches Beispiel, das nur echo $filepathstdout in einem Nachrichtendialog aufruft und 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);
}

(Wird auch in dieser SO-Frage erwähnt: https://stackoverflow.com/a/33843805/20489 )

Bestehende VSCode-Erweiterung

Wenn Sie nur eine vorhandene Erweiterung installieren möchten, finden Sie hier eine, die ich in der VSCode-Galerie geschrieben habe: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

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

Ich habe mich sehr bemüht, das gewünschte Verhalten zu erreichen. Dies ist der einfachste und beste Weg, um TypeScript-Dateien beim Speichern zu kompilieren. In der gewünschten Konfiguration wird nur DIESE Datei (die gespeicherte Datei) verwendet. Es ist eine task.json und eine keybindings.json.

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 einmal das gesamte Projekt erstellt und anschließend die gespeicherten Dateien neu erstellt, unabhängig davon, wie sie gespeichert werden (Strg + S, automatisches Speichern, ...).

Aktualisiert

In deinem tsconfig.json

"compileOnSave": true, // change to true

Wenn das Problem weiterhin besteht, führen Sie einen der folgenden Schritte aus:

Starten Sie Ihren Editor neu oder ändern Sie eine Route, setzen Sie sie zurück und speichern Sie die Anwendung. Es wird mit dem Kompilieren beginnen. dh

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

Ich habe die Kompilierung beim Speichern mit der Gulp-Aufgabe mithilfe von Gulp-Typoskript und inkrementellem Build implementiert . Auf diese Weise können Sie die Kompilierung beliebig steuern. Beachten Sie meine Variable tsServerProject. In meinem realen Projekt habe ich auch tsClientProject, da ich meinen Clientcode ohne angegebenes Modul kompilieren möchte. Wie ich weiß, kann man das 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/'));

}

Wählen Sie Einstellungen -> Arbeitsbereichseinstellungen 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
}

Aktueller Status dieser Ausgabe:

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

Ich kann sagen, dass mit der neuesten Version von TypeScript 1.8.X und 1.0 von Visual Studio-Code die von mir gezeigte Technik veraltet ist. Verwenden Sie einfach eine tsconfig.json auf der Stammebene Ihres Projekts und alles funktioniert automatisch für die Syntaxprüfung. Verwenden Sie dann tsc -w in der Befehlszeile, um automatisch zu sehen / neu zu kompilieren. Es wird dieselbe tsconfig.json-Datei für Optionen und Konfiguration von ts compile gelesen.

// tsconfig.json

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

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

tsc main --watch

Wo main.tsist dein Dateiname?

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

Sie müssen das Überwachungslimit erhöhen, um das Problem beim erneuten Kompilieren beim Speichern zu beheben. Öffnen Sie das Terminal und geben Sie die beiden folgenden Befehle ein:

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

Führen Sie diesen Befehl auch aus, um die Änderungen auch nach dem Neustart beizubehalten:

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

Ich habe die oben genannten Methoden ausprobiert, aber meine hat die automatische Kompilierung gestoppt, als es sich anfühlte, da die maximale Anzahl der zu beobachtenden Dateien das Limit überschritten hat.

cat /proc/sys/fs/inotify/max_user_watchesBefehl ausführen .

Wenn weniger Dateien einschließlich node_modules angezeigt werden, öffnen Sie die Datei /etc/sysctl.confmit dem Root-Privileg 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!

Ich verwende automatische Aufgaben, die in einem Ordner (sollte VSCode> = 1.30 funktionieren) in .vscode / task.json ausgeführt werden

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

Wenn dies beim Öffnen des Projektordners immer noch nicht funktioniert, versuchen Sie es mit Strg + Umschalt + P und Aufgaben: Automatische Aufgaben im Ordner verwalten und wählen Sie "Automatische Aufgaben im Ordner zulassen" im Hauptprojektordner oder im laufenden Ordner.