web-dev-qa-db-fra.com

Prise en charge de la saisie de texte pour Visual Studio 2017

J'ai récemment essayé d'apprendre TypeScript et, dans certaines des vidéos que j'ai visionnées après l'installation de l'extension "Web Essentials" lorsque vous travaillez avec un fichier .ts, Visual Studio vous propose un panneau de prévisualisation vous permettant d'afficher le code JavaScript tel qu'il apparaît. vous tapez.

Ces vidéos semblent utiliser VS 2012.

Cependant, l'installation de Web Essentials sur VS 2017 ne semble pas avoir cette option, est-ce que quelqu'un sait comment je peux le faire fonctionner avec VS 2017? At-il le même support pour TypeScript?

visual-studiotypescriptvisual-studio-2012visual-studio-2017
15
Ayo Adesina

Ainsi, TypeScript est installé par défaut avec VS2017 (Update 2 vous donnera la dernière version de 2.3 et autorisera les installations côte à côte). Si vous ne le possédez pas, vous pouvez l'ajouter via le programme d'installation de Visual Studio. À partir du programme d'installation, cliquez sur le menu Burger, choisissez Modifier, puis cliquez sur Composants individuels. Sous SDK, bibliothèques et cadres, vous pouvez ajouter TypeScript.

Une fois installé, vous pouvez ajouter un fichier tsconfig.json pour indiquer au compilateur TypeScript comment se comporter, exemple ici:

{
    "compileOnSave": true,
    "compilerOptions":
    {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules"
    ]
}

Le paramètre important est compileOnSave, qui demande à VS de compiler le fichier js lorsque vous enregistrez le fichier ts.

Vous devriez maintenant voir que vous avez un fichier Javascript imbriqué dans votre fichier TypeScript:

 Nested TypeScript

Maintenant, il vous suffit d’ouvrir les deux fichiers côte à côte et, lorsque vous enregistrez les fichiers, js se mettra automatiquement à jour (cochez l’option Toujours mettre à jour si VS vous invite à charger le fichier modifié sur le disque).

19
Matt

Je vois que votre question concerne VS 2017 et que je ne trouve aucune documentation sur VS 2017 pour confirmer si elle a été rajoutée. Cependant, j'ai trouvé que cela avait été supprimé dans VS 2015. Voir ce lien sur Github

Le volet d'aperçu TS a été supprimé de Web Essentials 2015 en raison de conflits permanents avec le compilateur TS lors de la sortie de nouvelles versions. L'équipe de TS en est consciente et j'espère qu'elle ajoutera cette fonctionnalité à ses outils à l'avenir. Il est possible que cette fonctionnalité soit incluse dans les toutes nouvelles extensions du compilateur Web ( https://visualstudiogallery.msdn.Microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c ) lors de la mise en œuvre des volets de prévisualisation.

7
HappyTown

J'ai un travail autour, c'est un peu de travail mais aide avec les occasions étranges où je veux vérifier la sortie.

J'exécute vs2017. J'ai Web Essentials installé et un compilateur Web, mais il ne semble toujours pas prendre en charge la version TS à partir de 15.4 et je ne pouvais pas faire fonctionner le fichier tsconfig.json.

Affichez brièvement les fichiers cachés dans votre projet et sélectionnez le fichier js correspondant, puis faites glisser l’onglet vers la droite pour obtenir un écran partagé  enter image description here

Lorsque vous modifiez et enregistrez le fichier ts, vous pouvez obtenir une fenêtre contextuelle indiquant "Le fichier a été modifié" ou quelque chose du genre. Vous pouvez également cocher la case "AutoRestore si aucun changement n'a été détecté". En paraphrasant, j'ai essayé de trouver l'option pour pouvoir la réinitialiser afin d'obtenir une capture d'écran, mais je ne la trouve pas!), cochez cette option, puis sélectionnez "Oui à tous" pour actualiser le fichier js. La prochaine fois que vous modifierez votre fichier ts, le fichier js sera mis à jour.

Je sais que ce n’est pas formidable, mais j’ai trouvé cela très utile, car j’ai pu obtenir un analogue de ce que vous voyez lorsque vous suivez le cours et ils continuent à afficher l’aperçu du javascript.

1
Luke Duddridge

Dans Visual Studio 2017, vous devez installer le workload "Développement Node.js" pendant le processus d'installation ou modifier votre installation existante dans la boîte de dialogue Nouveau projet en cliquant sur le lien "Vous ne trouvez pas ce que vous recherchez? Ouvrez Visual Studio Installer" . 

Ensuite, Fichier> Nouveau> Projet ... inclura les modèles de projet Javascript et TypeScript dans la catégorie Installé. 

0
Tom