Compilation de Visual Studio Code lors de l'enregistrement

Comment puis-je configurer Visual Studio Code pour compiler des fichiers dactylographiés lors de l'enregistrement?

Je vois qu'il est possible de configurer une tâche pour créer le fichier en focus en utilisant le ${file}comme argument. Mais j'aimerais que cela soit fait lorsqu'un fichier est enregistré.

Mise à jour de mai 2018:

Depuis mai 2018, vous n'avez plus besoin de créer tsconfig.jsonmanuellement ou de configurer le gestionnaire de tâches.

1. Exécutez tsc --initdans votre dossier de projet pour créer un tsconfig.jsonfichier (si vous n'en avez pas déjà un).
2. Appuyez sur Ctrl+Shift+Bpour ouvrir une liste de tâches dans VS Code et sélectionnez tsc: watch - tsconfig.json.
3. Terminé! Votre projet est recompilé à chaque enregistrement de fichier.

Vous pouvez avoir plusieurs tsconfig.jsonfichiers dans votre espace de travail et exécuter plusieurs compilations à la fois si vous le souhaitez (par exemple frontend et backend séparément).

Réponse originale:

Vous pouvez le faire avec les commandes de construction:

Créez un simple tsconfig.jsonavec "watch": true(cela demandera au compilateur de regarder tous les fichiers compilés):

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

Notez que filestableau est omis, par défaut tous les *.tsfichiers de tous les sous-répertoires seront compilés. Vous pouvez fournir d'autres paramètres ou modifier target/ out, assurez-vous simplement qu'il watchest défini sur true.

Configurez votre tâche ( Ctrl+Shift+P-> Configure Task Runner):

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

Maintenant, appuyez sur Ctrl+Shift+Bpour créer le projet. Vous verrez la sortie du compilateur dans la fenêtre de sortie ( Ctrl+Shift+U).

Le compilateur compilera automatiquement les fichiers une fois enregistrés. Pour arrêter la compilation, appuyez sur Ctrl+P->> Tasks: Terminate Running Task

J'ai créé un modèle de projet spécifiquement pour cette réponse: typescript-node-basic

Si vous voulez éviter d'avoir à utiliser CTRL+ SHIFT+ Bet que vous souhaitez que cela se produise à chaque fois que vous enregistrez un fichier, vous pouvez lier la commande au même raccourci que l'action d'enregistrement:

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

Cela va dans votre keybindings.json - (dirigez-vous vers cela en utilisant Fichier -> Préférences -> Raccourcis clavier).

Si appuyer sur Ctrl+ Shift+ Bvous demande beaucoup d'efforts, vous pouvez activer "Auto Save" (Fichier> Auto Save) et utiliser NodeJS pour regarder tous les fichiers de votre projet, et lancer TSC automatiquement.

Ouvrez une invite de commande Node.JS, changez de répertoire dans le dossier racine de votre projet et tapez ce qui suit;

tsc -w

Et bon, à chaque fois que VS Code enregistre automatiquement le fichier, TSC le recompilera.

Cette technique est mentionnée dans un article de blog;

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

Faites défiler jusqu'à "Compiler lors de l'enregistrement"

Écrire une extension

Maintenant que vscode est extensible, il est possible de se connecter à l'événement on save via une extension. Un bon aperçu de l'écriture d'extensions pour VSCode peut être trouvé ici: https://code.visualstudio.com/docs/extensions/overview

Voici un exemple simple qui appelle echo $filepathet génère simplement stdout dans un dialogue de message:

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

(Également référencé sur cette question SO: https://stackoverflow.com/a/33843805/20489 )

Extension VSCode existante

Si vous souhaitez simplement installer une extension existante, en voici une que j'ai écrite disponible dans la galerie VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Le code source est disponible ici: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

J'ai énormément lutté pour obtenir le comportement que je voulais. C'est le moyen le plus simple et le meilleur d'obtenir des fichiers TypeScript à compiler lors de l'enregistrement, dans la configuration que je veux, uniquement CE fichier (le fichier enregistré). C'est un tasks.json et un keybindings.json.

Au lieu de créer un seul fichier et de lier Ctrl + S pour déclencher cette construction, je recommanderais de démarrer tsc en mode veille à l'aide du fichier tasks.json suivant:

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

Cela créera une fois l'ensemble du projet, puis reconstruira les fichiers qui seront enregistrés indépendamment de la façon dont ils sont enregistrés (Ctrl + S, sauvegarde automatique, ...)

Actualisé

Dans votre tsconfig.json

"compileOnSave": true, // change to true

si le problème persiste, effectuez l'une des opérations suivantes:

Redémarrez votre éditeur ou modifiez n'importe quel itinéraire, rétablissez-le et enregistrez l'application. Il va commencer la compilation. c'est à dire

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

J'ai implémenté la compilation lors de l'enregistrement avec la tâche gulp en utilisant gulp-typescript et la construction incrémentielle. Cela permet de contrôler la compilation comme vous le souhaitez. Remarquez ma variable tsServerProject, dans mon projet réel j'ai également tsClientProject car je veux compiler mon code client sans aucun module spécifié. Comme je le sais, vous ne pouvez pas le faire avec vs code.

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

}

Sélectionnez Préférences -> Paramètres de l'espace de travail et ajoutez le code suivant.Si vous avez activé le rechargement à chaud, les modifications se reflètent immédiatement dans le navigateur.

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

État actuel de ce problème:

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

Je peux dire qu'avec la dernière version de TypeScript 1.8.X et 1.0 du code Visual Studio, la technique que j'ai montrée est obsolète. Utilisez simplement un tsconfig.json au niveau racine de votre projet et tout fonctionne automatiquement pour la vérification de la syntaxe. Ensuite, utilisez tsc -w sur la ligne de commande pour regarder / recompiler automatiquement. Il lira le même fichier tsconfig.json pour les options et la configuration de ts compile.

// tsconfig.json

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

Un moyen extrêmement simple de compiler automatiquement lors de l'enregistrement consiste à taper ce qui suit dans le terminal:

tsc main --watch

où main.tsest votre nom de fichier.

Notez que cela ne fonctionnera que tant que ce terminal est ouvert, mais c'est une solution très simple qui peut être exécutée pendant que vous éditez un programme.

Vous devez augmenter la limite de montres pour résoudre le problème de recompilation lors de l'enregistrement, ouvrez le terminal et entrez ces deux commandes:

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

Pour rendre les modifications persistantes même après le redémarrage, exécutez également cette commande:

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

J'ai essayé les méthodes ci-dessus, mais la mienne a arrêté la compilation automatique quand il en avait envie, car le nombre maximum de fichiers à surveiller avait dépassé la limite.

exécuter la cat /proc/sys/fs/inotify/max_user_watchescommande.

s'il affiche moins de fichiers, y compris node_modules, ouvrez le fichier /etc/sysctl.confavec le privilège root et ajoutez

fs.inotify.max_user_watches=524288 dans le fichier et enregistrez

réexécutez la commande cat pour voir le résultat. Ça va marcher! j'espère!

J'utilise des tâches automatiques exécutées sur le dossier (devrait fonctionner VSCode> = 1.30) dans .vscode / tasks.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
        }
    }
 ]
}

Si cela ne fonctionne toujours pas sur le dossier de projet ouvert, essayez Ctrl + Maj + P et Tâches: Gérer les tâches automatiques dans le dossier et choisissez "Autoriser les tâches automatiques dans le dossier" sur le dossier principal du projet ou le dossier en cours d'exécution.