Compilazione del codice di Visual Studio al momento del salvataggio

Come posso configurare Visual Studio Code per compilare i file dattiloscritti al momento del salvataggio?

Vedo che è possibile configurare un'attività per costruire il file a fuoco usando l' ${file}argomento as. Ma vorrei che ciò avvenisse quando un file viene salvato.

Aggiornamento di maggio 2018:

A partire da maggio 2018 non è più necessario creare tsconfig.jsonmanualmente o configurare il task runner.

1. Esegui tsc --initnella cartella del progetto per creare il tsconfig.jsonfile (se non ne hai già uno).
2. Premere Ctrl+Shift+Bper aprire un elenco di attività in Codice VS e selezionare tsc: watch - tsconfig.json.
3. Fatto! Il progetto viene ricompilato su ogni salvataggio di file.

È possibile disporre di più tsconfig.jsonfile nell'area di lavoro ed eseguire più compilazioni contemporaneamente, ad esempio frontend e backend separatamente.

Risposta originale:

Puoi farlo con i comandi Build:

Crea un semplice tsconfig.jsoncon "watch": true(questo indicherà al compilatore di guardare tutti i file compilati):

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

Si noti che l' filesarray viene omesso, per impostazione predefinita *.tsverranno compilati tutti i file in tutte le sottodirectory. Puoi fornire altri parametri o modificare target/ out, assicurati solo che watchsia impostato su true.

Configura il tuo compito ( Ctrl+Shift+P-> Configure Task Runner):

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

Ora premi Ctrl+Shift+Bper costruire il progetto. Vedrai l'output del compilatore nella finestra di output ( Ctrl+Shift+U).

Il compilatore compilerà automaticamente i file quando vengono salvati. Per interrompere la compilazione, premere Ctrl+P->> Tasks: Terminate Running Task

Ho creato un modello di progetto appositamente per questa risposta: typescript-node-basic

Se si desidera evitare di utilizzare CTRL+ SHIFT+ Be si desidera invece che ciò avvenga ogni volta che si salva un file, è possibile associare il comando allo stesso collegamento dell'azione di salvataggio:

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

Questo vale nel tuo keybindings.json - (vai a questo usando File -> Preferenze -> Scorciatoie da tastiera).

Se premere Ctrl+ Shift+ Bsembra un grande sforzo, puoi attivare "Salvataggio automatico" (File> Salvataggio automatico) e usare NodeJS per guardare tutti i file nel tuo progetto ed eseguire TSC automaticamente.

Aprire un prompt dei comandi Node.JS, cambiare la directory nella cartella principale del progetto e digitare quanto segue;

tsc -w

E hey presto, ogni volta che VS Code salva automaticamente il file, TSC lo ricompila.

Questa tecnica è menzionata in un post sul blog;

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

Scorri verso il basso fino a "Compila al salvataggio"

Scrivi un'estensione

Ora che vscode è estensibile, è possibile collegarsi all'evento on save tramite un'estensione. Una buona panoramica delle estensioni di scrittura per VSCode è disponibile qui: https://code.visualstudio.com/docs/extensions/overview

Ecco un semplice esempio che chiama echo $filepathe genera stdout in una finestra di dialogo di messaggio:

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

(Riferito anche a questa domanda SO: https://stackoverflow.com/a/33843805/20489 )

Estensione VSCode esistente

Se vuoi semplicemente installare un'estensione esistente, eccone una che ho scritto disponibile nella galleria VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Il codice sorgente è disponibile qui: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Ho faticato a fondo per ottenere il comportamento che desidero. Questo è il modo più semplice e migliore per ottenere i file TypeScript da compilare al momento del salvataggio, nella configurazione che desidero, solo QUESTO file (il file salvato). È un task.json e un keybindings.json.

Invece di creare un singolo file e associare Ctrl + S per attivare quella build, consiglierei di avviare tsc in modalità watch usando il seguente file task.json:

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

Questo una volta costruirà l'intero progetto e poi ricostruirà i file che vengono salvati indipendentemente da come vengono salvati (Ctrl + S, salvataggio automatico, ...)

aggiornato

Nel tuo tsconfig.json

"compileOnSave": true, // change to true

se il problema persiste, eseguire una delle seguenti operazioni:

Riavvia il tuo editor o modifica qualsiasi percorso, ripristinalo e salva l'applicazione. Inizierà la compilazione. vale a dire

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

Ho implementato la compilazione su save con gulp task usando gulp-typescript e build incrementale. Ciò consente di controllare la compilazione come desiderato. Nota la mia variabile tsServerProject, nel mio vero progetto ho anche tsClientProject perché voglio compilare il mio codice client senza nessun modulo specificato. Come so, non puoi farlo con il codice 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/'));

}

Seleziona Preferenze -> Impostazioni area di lavoro e aggiungi il seguente codice, Se hai attivato Ricarica a caldo, le modifiche si riflettono immediatamente nel browser

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

Stato corrente di questo problema:

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

Posso dire con l'ultima versione di TypeScript 1.8.X e 1.0 del codice Visual Studio, la tecnica che ho mostrato è obsoleta. Usa semplicemente un tsconfig.json a livello di root del tuo progetto e tutto funziona automaticamente per il controllo della sintassi. Quindi utilizzare tsc -w sulla riga di comando per guardare / ricompilare automaticamente. Leggerà lo stesso file tsconfig.json per le opzioni e la configurazione della compilazione ts.

// tsconfig.json

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

Un modo estremamente semplice per eseguire la compilazione automatica al momento del salvataggio consiste nel digitare quanto segue nel terminale:

tsc main --watch

dov'è il main.tstuo nome di file.

Nota, questo funzionerà solo finché questo terminale è aperto, ma è una soluzione molto semplice che può essere eseguita mentre stai modificando un programma.

È necessario aumentare il limite di orologi per risolvere il problema di ricompilazione al salvataggio, Apri terminale e immettere questi due comandi:

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

Per rendere persistenti le modifiche anche dopo il riavvio, eseguire anche questo comando:

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

ho provato i metodi di cui sopra, ma il mio ha interrotto la compilazione automatica quando ne aveva voglia, a causa del numero massimo di file da guardareho hanno superato il limite.

esegui cat /proc/sys/fs/inotify/max_user_watchescomando.

se mostra un numero inferiore di file, incluso node_modules, apri il file /etc/sysctl.confnel privilegio di root e aggiungi

fs.inotify.max_user_watches=524288 nel file e salva

eseguire nuovamente il comando cat per vedere il risultato. Funzionerà! fiduciosamente!

Uso le attività automatiche eseguite sulla cartella (dovrebbe funzionare VSCode> = 1.30) in .vscode / task.json

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

Se il problema persiste nella cartella del progetto aperta, prova Ctrl + Maiusc + P e Attività: gestisci attività automatiche nella cartella e scegli "Consenti attività automatiche nella cartella" nella cartella principale del progetto o nella cartella in esecuzione.