web-dev-qa-db-fra.com

code de visual studio compiler sur save

Comment configurer le code de Visual Studio pour compiler des fichiers TypeScript lors de l'enregistrement? Je vois qu'il est possible de configurer une tâche pour construire le fichier en utilisant le ${file} comme argument Mais j'aimerais que cela soit fait lorsqu'un fichier est sauvegardé.

typescriptvisual-studio-code
125
Powell Quiring

Mise à jour de mai 2018:

Depuis mai 2018, vous n'avez plus besoin de créer tsconfig.json manuellement ni de configurer le programme d'exécution des tâches.

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

Vous pouvez avoir plusieurs fichiers tsconfig.json 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.json avec "watch": true (cela indiquera au compilateur de regarder tous les fichiers compilés):

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

Notez que le tableau filesest omis. Par défaut, tous les fichiers *.ts de tous les sous-répertoires seront compilés. Vous pouvez indiquer d'autres paramètres ou modifier targetname __/outname__, assurez-vous simplement que watchest défini sur truename__.

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+B pour construire le projet. Vous verrez la sortie du compilateur dans la fenêtre de sortie (Ctrl+Shift+U).

Le compilateur compilera les fichiers automatiquement lors de l'enregistrement. Pour arrêter la compilation, appuyez sur Ctrl+P -> > Tasks: Terminate Running Task

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

171
zlumer

Si vous voulez éviter d'avoir à utiliser CTRL + SHIFT + B et préférez que cela se produise chaque fois que vous enregistrez un fichier, vous pouvez lier la commande au même raccourci que l'action de sauvegarde:

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

Cela va dans votre keybindings.json - (allez à ceci en utilisant Fichier -> Préférences -> Raccourcis clavier).

32
Fenton

En appuyant sur Ctrl+Shift+B semble être beaucoup d’efforts, vous pouvez activer "Enregistrement automatique" (Fichier> Enregistrer automatiquement) et utiliser NodeJS pour afficher tous les fichiers de votre projet et exécuter 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 hop, chaque fois que VS Code enregistre automatiquement le fichier, TSC le recompile.

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

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

Faites défiler jusqu'à "Compile on save"

19
Jon Preece

J'ai lutté avec force pour obtenir le comportement que je veux. C’est le moyen le plus simple et le meilleur d’obtenir les 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 .  

 enter image description here

6
httpete

Ecrire une extension

Maintenant que vscode est extensible, il est possible de connecter l'événement on save via une extension. Vous trouverez un bon aperçu de l’écriture d’extensions pour VSCode ici: https://code.visualstudio.com/docs/extensions/overview

Voici un exemple simple qui appelle simplement echo $filepath et génère 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);
}

(Voir également cette question SO: https://stackoverflow.com/a/33843805/20489 )

Extension VSCode existante

Si vous souhaitez simplement installer une extension existante, en voici une qui est 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

5
bingles

Au lieu de créer un fichier unique et de lier Ctrl + S pour déclencher cette construction, je vous recommande de démarrer tsc en mode de surveillance à 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 construira une fois l'ensemble du projet, puis reconstruira les fichiers qui seront enregistrés indépendamment de la manière dont ils ont été enregistrés (Ctrl + S, sauvegarde automatique, ...).

4
Dirk Bäumer

J'ai implémenté la compilation lors de la sauvegarde avec 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 module spécifié. Comme je sais que 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/'));

}
2
Andzej Maciusovic

Je peux dire avec la dernière version de TypeScript 1.8.X et 1.0 du code de Visual Studio, la technique que j'ai présentée est obsolète. Utilisez simplement tsconfig.json au niveau racine de votre projet et tout fonctionnera 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 sa compilation.

// tsconfig.json

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

Sélectionnez Préférences -> Paramètres de l'espace de travail et ajoutez le code suivant. Si le rechargement à chaud est activé, les modifications sont immédiatement répercutées dans le navigateur

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

Statut actuel de ce problème:

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

1
Aleksey Bykov

essayé les méthodes ci-dessus, mais le mien a arrêté la compilation automatique quand bon lui semblait, à cause de nombre maximal de fichiers à regarder ont dépassé la limite.

lancez la commande cat /proc/sys/fs/inotify/max_user_watches.

si elle affiche moins de fichiers, y compris node_modules, ouvrez le fichier /etc/sysctl.conf dans le privilège root et ajoutez

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

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

0
Aelaf

Mise à jour

Dans votre tsconfig.json

"compileOnSave": true, // change to true

si le problème persiste, modifiez n'importe quel itinéraire, rétablissez-le et enregistrez l'application. Il va commencer à compiler i.e.

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

J'espère que cela aidera quelqu'un. Bien que ce ne soit pas une solution permanente, cela fonctionne jusqu'à ce que vous obteniez une meilleure solution.

0
WasiF

Un moyen extrêmement simple de compiler automatiquement lors de la sauvegarde consiste à saisir ce qui suit dans le terminal:

tsc main --watch

où main.ts est votre nom de fichier.

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

0
Daniel C Jacobs