Compilation de Visual Studio Code lors de l'enregistrement


156

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é.


4
Le lien ci-dessus est pour VS, pas pour le code VS. Compiler lors de l'enregistrement est une fonctionnalité différente de la compilation et des tâches. Il n'émet qu'un seul fichier JS lors de l'enregistrement. Je veux aussi que cela code VS.
Ciantic

C'est une bonne suggestion. J'ai ouvert un élément de travail interne pour implémenter cette fonctionnalité.
Dirk Bäumer


1
Pourriez-vous s'il vous plaît marquer une réponse
Seega

2
Tapez tsc <filename> --watchle terminal
Daniel C Jacobs

Réponses:


204

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


10
Le problème avec cela est qu'il maintient une tâche en cours d'exécution, VS Code sait que lorsque j'enregistre un fichier moins, ou un fichier ts, il semble redondant d'avoir un autre observateur simplement parce que nous ne pouvons pas nous connecter facilement à la commande "On save". Je me demande si quelqu'un a déjà fait une extension pour exécuter quelque chose quand un type de fichier spécifique est enregistré, ce serait beaucoup mieux.
Ciantic

2
@Ciantic cette réponse a été écrite avant que VS Code ne prenne en charge les extensions. Il y a juste une extension dont vous parlez, mais il est en fait plus rapide d'avoir des fichiers de surveillance du compilateur TypeScript et de ne recompiler que les fichiers modifiés.
zlumer

1
@Kokodoko bc compileOnSave ne fonctionne que dans VS 2015, pas dans le code
scape

2
@scape Cela fonctionne également dans VS Code, si vous ajoutez "-w" aux arguments de ligne de commande dans tasks.json!
Kokodoko

1
En fait, VSCode s'occupe de la configuration à votre place: Activé configure task: VSCode détecte automatiquement qu'il existe un tsconfig.jsonet affiche une boîte de dialogue dans laquelle vous pouvez choisir entre tsc: build - tsconfig.jsonou tsc: watch - tsconfig.json. Choisissez ce dernier et VSCode génère le tasks.jsonfichier (s'il n'y en avait pas auparavant) et ajoute la bonne configuration pour vous.
Daniel

37

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).


1
Cela devrait être juste un complément à la réponse ci-dessus (modifiée). Cela a fait ma journée!
chrissavage

bonne réponse ...? comment filtrer ce qui sera lancé ... par exemple: je ne veux exécuter la commande que si le fichier a l'extension html ???
ZEE

@ZEE oui, c'est possible, s'il vous plaît voir ce bit de documentation pour les raccourcis clavier et aussi la réponse de httpete pour un bref exemple. Plus précisément, la whencondition d'utilisation editorLangIdest d'importation.
BobChao87

22

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"


6

É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


5

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.

entrez la description de l'image ici


7
pour les développeurs paresseux: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } keybingings:{ "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" }
Dariusz Filipiak

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. {"compilerOptions": {"module": "amd", "target": "ES5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "inlineSourceMap": true}, "exclude" : ["node_modules"]}
httpete

5

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, ...)


2
certains de ces accessoires sont obsolètes.
Ebru Güngör

3

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

1
Le code VS prend-il actuellement en charge cette fonctionnalité? La dernière fois que j'ai vérifié, il n'a pas pu enregistrer et j'ai dû utiliser l'extension pour le faire.
Antti

Maintenant, il prend en charge
WasiF

2

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

}

1

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
}


1

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

1

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

tsc main --watch

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.


tsc -wfonctionne également pour tous les fichiers dactylographiés du projet
abitcode

1

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

0

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!


0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.