Mise en évidence de la syntaxe de Visual Studio 2015 JSX / ES2015

MISE À JOUR (2017-02)

Les outils de noeud pour Visual Studio (NTVS) utilisent le moteur d’parsing Salsa depuis la version 1.2 et l’utilisation de NTVS est probablement le chemin de moindre résistance pour le support JSX.

https://github.com/Microsoft/nodejstools

Lisez (et soulignez) cette réponse pour plus de détails: https://stackoverflow.com/a/41996170/9324

RÉPONSE ORIGINALE

J’ai rencontré le même problème et trouvé deux solutions: l’une utilisant ReSharper et l’autre modifiant les outils Web externes de Visual Studio.

SOLUTION 1

Dans ReSharper 10:

• ouvrez la boîte de dialog Options
• sous Code Editing> JavaScript> Inspections choisissez ECMAScript 6 dans la liste déroulante du niveau de langage JavaScript
• Assurez-vous que l’option Activer la syntaxe JSX dans les fichiers .JS est également sélectionnée (en supposant que vous utilisez la syntaxe JSX).
• Vous devez également désactiver les erreurs de syntaxe JavaScript dans Visual Studio comme suit:
  • allez dans Outils> Options> Editeur de texte> JavaScript> IntelliSense
  • décochez la case Afficher les erreurs de syntaxe et cliquez sur OK.
• recharger la solution VS

Après avoir rechargé la solution, les squigglies rouges étaient partis pour moi. Cependant, la coloration syntaxique pour JSX ne fonctionne pas. Le segment d’ouverture de tous les éléments que je déclare dans la fonction de render n’a pas la couleur appropriée – mais c’est facile à ignorer.

Je devrais également mentionner que les fichiers javascript doivent avoir l’extension .js . Si vous leur donnez l’ extension .jsx , vous obtiendrez des squigglies rouges sur votre première déclaration d’importation. Le message d’erreur sera JSX Parser: illegal import declaration . (Ceci peut être corrigé en utilisant la solution n ° 2 ci-dessous)

UPDATE: merci à @SntsDev pour cette solution Il existe un moyen d’éviter de nommer les fichiers .jsx en tant que .js :

• dans Visual Studio, allez dans Options> Éditeur de texte> Extension de fichier
• ajoutez jsx et assignez-le à l’ éditeur Javascript

SOLUTION 2

La curiosité a eu raison de moi et je voulais explorer s’il y avait ou non une solution non-ReSharper. Visual Studio utilise un module de serveur de noeud exécuté localement nommé react-server pour parsingr JSX à la volée. Ce module peut être trouvé ici:

 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server 

UPDATE pour Visual Studio 2015 Update 3 Merci à @TheQuickBrownFox pour le commentaire / la mise à jour. Pour la mise à jour 3, l’emplacement des commandes react-server est maintenant dans ce fichier:

 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js 

En examinant le server.js ou server.js react-commands.js du ou des dossiers susmentionnés, il existe une fonction nommée transformJsxFromPost ou transformJsx . Cette méthode contient la ligne suivante: var transformed = reactTools.transformWithDetails(code, { elementMap: true }); . Ceci est une référence au module react react-tools ( https://www.npmjs.com/package/react-tools ), qui propose plus d’options pour parsingr ES6.

Donc:

• remplacer cette ligne:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true });

• avec ce qui suit:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

  Notez l’ajout des --es6module et --harmony , qui --es6module --harmony react-tools de traiter le code entrant comme ES6.

• désactiver les erreurs de syntaxe JavaScript dans Visual Studio comme suit:

  • dans Visual Studio, sélectionnez Outils> Options> Editeur de texte> JavaScript> IntelliSense
  • décochez la case Afficher les erreurs de syntaxe et cliquez sur OK

• IMPORTANT: redémarrez Visual Studio. Vos fichiers .jsx avec le code ES6 ne devraient plus avoir de squiggles rouges sur votre code ES6.

REMARQUES:

• Je ne sais pas si la modification décrite dans SOLUTION 2 du fichier server.js aura un impact sur le code non-ES6. Alors implémentez à vos risques et périls.
• En outre, il est fort possible / probable que votre modification soit remplacée par une mise à jour ultérieure de Visual Studio.
• Ce serait cool / amusant de remplacer l’utilisation de react-tools au sein de react-server avec Babel CLI. MISE À JOUR: Grâce à @NickDewitt, il semble avoir été capable de faire ce travail: https://stackoverflow.com/a/36321109/9324

Dans VS2015 Update-3 et NTVS 1.2 installés, il suffit de définir TypeScript Editor comme éditeur par défaut pour l’extension de fichier jsx .

1) Ouvrez Outils> Options> Editeur de texte> Extension de fichier .

2) Tapez jsx dans Extension, sélectionnez Editeur TypeScript en tant qu’éditeur, puis cliquez sur Appliquer.

EDIT : Visuals studio 15 est renommé en Visual Studio 2017: vous pouvez obtenir la RC ici: https://www.visualstudio.com/vs/visual-studio-2017-rc/

Solution future:

Visual Studio “15” Preview 2 support JSX fr Ne réagissez pas immédiatement. Vous pouvez activer la même bibliothèque Javascript Service (Salsa) comme VS Code.

Voici les notes de publication: https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

Salsa: https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

SOLUTION ‘3’:

Grâce à la réponse d’Adam dans sa réponse, je travaille avec babel et ses plugins / presets. Cela vaut la peine de lire sa réponse en premier si vous essayez ceci.

Vous devez installer nodeJs et npm avant d’aller plus loin, et peut-être sauvegarder vos fichiers avant de les modifier.

J’utilise Reaction, les plugins es2015 avec les presets stage1 ici, mais vous pouvez utiliser tous les plugins que vous aimez

1. Powershell à C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server

2. Installez les packages suivants:

    npm install babel-core --save-dev npm install babel-preset-es2015 --save-dev npm install babel-preset-react --save-dev npm install babel-preset-stage-1 --save-dev 

3. Ajouter les dépendances à server.js sous childProcess

    var childProcess = require('child_process'); //already there var babel = require('babel-core'); var es2015 = require('babel-preset-es2015'); var react = require('babel-preset-react'); var stage1 = require('babel-preset-stage-1'); 

4. Remplacez la section try{}catch{} du req.on('end' affectation req.on('end' dans la fonction transformJsxFromPost :

    try { var transformed = babel.transform( code, { sourceMaps: true, presets: [ es2015, react, stage1 ] } ); result = { elementMappings: [] } //I found it least buggy when returning an empty list of elementMappings //but i will leave the code i was using to try and dupe it, or //recreate the elementMappings from react-tools // // result = { // elementMappings: [{ // 'start': 1, // 'end': transformed.code.length, // 'generatedCode': transformed.code // }], // map: transformed.map, // code: transformed.code // } } catch (e) { //the error that react-tools was returning was slightly different, so //map the babel error back to the react-tools error that VS 2015 expects result = { column: e.loc.column, description: e.errorMessage, errorMessage: e.message + ".. :-(", index: e.pos, lineNumber: e.loc.line }; } 

5. Redémarrez Visual Studio, fermez et rouvrez tous les fichiers .jsx et profitez de la mise en évidence de la syntaxe de babel 🙂

Remarques
Donnez à l’parsingur la possibilité d’intervenir après avoir démarré, Visual Studio va faire ce qui suit lorsque vous chargez dans un fichier .jsx la première fois:

1. Créez un dossier dans %localappdata%\Temp\ avec stderr.txt où vous pouvez trouver un journal de toutes les erreurs et stdout.txt qui vous indiquera quel {port} le serveur exécute et enregistre également d’autres informations.
2. Démarrez un serveur nodeJs en exécutant localhost:{port} qui accepte JSX en tant que POST sur /transformJsxFromPost et renvoie le numéro de ligne et le numéro de colonne de la première erreur rencontrée en tant qu’object json dans visual studio

J’ai du désactiver javascript intellisense pour les fichiers jsx comme Adam montre dans la solution 1 dans sa réponse:

Dans Visual Studio, accédez à Outils> Options> Editeur de texte> JavaScript> IntelliSense, puis décochez la case Afficher les erreurs de syntaxe et cliquez sur OK.

Avec javascript intellisense off, les deux réactif-serveur comme pack avec vs et babel comme je le remplace ici tous les deux renvoient seulement la première erreur qu’ils rencontrent, donc vous ne devriez pas vous attendre à mettre en évidence toutes les erreurs dans votre fichier, mais ils montrent à mesure que vous tapez si vous gardez votre code sans erreur.

Je suppose que tout ce qu’il rest à faire est de récupérer correctement les éléments – les solutions 4 peut-être? 🙂

En essayant de faire des recherches, j’ai réalisé un moyen simple de travailler avec des fichiers jsx dans toutes les versions de Visual Studio. Ce n’est pas parfait mais ça marche pour moi.

Téléchargez le dernier code Visual Studio [ https://code.visualstudio.com/updates ], puis cliquez avec le bouton droit de la souris sur un fichier jsx dans la version de Visual Studio dont vous disposez et sélectionnez «Ouvrir avec …». Sélectionnez ‘Ajouter’ et naviguez jusqu’à votre code Visual Studio récemment téléchargé et faites-en votre choix par défaut.

J’espère que cela aide les gens à s’inquiéter de devoir mettre à niveau.

Il est mentionné dans les commentaires ci-dessus par @TheQuickBrownFox, mais masqué par défaut (nécessaire pour tout développer), résumant ainsi ce que j’ai fait pour résoudre le problème dans la dernière mise à jour de la communauté Visual Studio 2015 3:

100% à partir de Solution 1 d’Adam Weber : https://stackoverflow.com/a/34110461/1633913 (paramétrer le niveau de langage JavaScript dans ReSharper sur ECMAScript 2016 et cocher Activer JSX … dans la même fenêtre + désactiver Afficher les erreurs de syntaxe dans Options VS JavaScript IntelliSense)

Solution 2 d’Adam Weber : https://stackoverflow.com/a/34110461/1633913 , mais légèrement modifiée; le fichier cible où vous devez remplacer:

ceci: var transformed = reactTools.transformWithDetails(code, { elementMap: true });

avec ceci: var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

est en effet ici: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

redémarrez VS et vous avez terminé.