code studio visuel comstack sur save

Mise à jour de mai 2018:

À partir de mai 2018, vous n’avez plus besoin de créer tsconfig.json manuellement ni de configurer le tsconfig.json 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à un).
2. Appuyez sur Ctrl + Maj + B pour ouvrir une liste de tâches dans le code VS 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 en même temps si vous le souhaitez (par exemple, l’interface et le backend séparément).

Réponse originale:

Vous pouvez le faire avec les commandes Build:

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

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

Notez que le tableau de files est omis, par défaut tous les fichiers *.ts de tous les sous-répertoires seront compilés. Vous pouvez fournir tout autre paramètre ou modifier la target / out , assurez-vous simplement que watch est 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 + Maj + B pour construire le projet. Vous verrez la sortie du compilateur dans la fenêtre de sortie ( Ctrl + Shift + U ).

Le compilateur comstackra 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écifiquement pour cette réponse: typescript-node-basic

Si vous souhaitez éviter d’utiliser CTRL + SHIFT + B et que vous souhaitiez 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).

Si appuyer sur Ctrl + Shift + B semble nécessiter beaucoup d’efforts, vous pouvez activer “Auto Save” (Fichier> Auto Save) et utiliser NodeJS pour regarder tous les fichiers de votre projet et exécuter TSC automatiquement.

Ouvrez une invite de commande Node.JS, remplacez le répertoire par le dossier racine de votre projet et tapez ce qui suit:

 tsc -w 

Et hop, chaque fois que VS Code sauvegarde automatiquement le fichier, TSC le recomstackra.

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

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

Faites défiler jusqu’à “Comstack on save”

J’ai lutté puissamment pour obtenir le comportement que je veux. C’est le moyen le plus simple et le plus efficace pour comstackr les fichiers TypeScript lors de la sauvegarde, dans la configuration que je souhaite, seul ce fichier (le fichier enregistré). C’est un tasks.json et un keybindings.json.

Ecrire une extension

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

Voici un exemple simple qui appelle simplement echo $filepath et echo $filepath stdout dans un dialog 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 voulez simplement installer une extension existante, voici celle que j’ai écrite 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

Au lieu de créer un fichier unique et de lier Ctrl + S pour déclencher cette version, je vous recommande 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 construira une fois le projet entier et reconstruira ensuite les fichiers qui sont enregistrés indépendamment de la façon dont ils sont enregistrés (Ctrl + S, sauvegarde automatique, …)

J’ai implémenté comstack on save avec la tâche gulp en utilisant gulp-typescript et incremental build. Cela permet de contrôler la compilation comme vous le souhaitez. Remarquez ma variable tsServerProject, dans mon projet réel, j’ai aussi tsClientProject car je veux comstackr mon code client sans spécifier de module. 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', ['comstack-server'], watchServer); gulp.task('comstack-server', comstackServer); function watchServer(params) { gulp.watch(srcServer, ['comstack-server']); } function comstackServer(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 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 } 

État actuel de ce problème:

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

Je peux dire 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. Utilisez ensuite tsc -w sur la ligne de commande pour regarder / recomstackr automatiquement. Il lit le même fichier tsconfig.json pour les options et la configuration de comp comp.

 // tsconfig.json { "comstackrOptions": { "module": "amd", "target": "ES5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "inlineSourceMap": true }, "exclude": [ "node_modules" ] } 

Vous pouvez avoir dans votre tsconfig.json

 "comstackOnSave": false, // turn it to true and save 

Si le problème persiste, modifiez n’importe quelle route et rétablissez la sauvegarde de l’application. Il va commencer à comstackr

 const routes: Routes = [ { path: '', // ie remove this comma and then insert and save, it'll comstack component: VersionsComponent, children: [ { path: '', component: VersionDetailsComponent } ] } ] 

Si cela n’a pas résolu votre problème, essayez d’autres réponses intéressantes