Comment puis-je obtenir une mise en évidence correcte de la syntaxe dans Visual Studio 2015 pour JSX avec le code ES2015?
Cela fonctionne bien si je supprime les mots-clés d’ import
et d’ export
:
Je viens de mettre à jour Visual Studio 2015 Enterprise Update 1 mais il rest toujours le même.
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:
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 :
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:
IMPORTANT: redémarrez Visual Studio. Vos fichiers .jsx
avec le code ES6 ne devraient plus avoir de squiggles rouges sur votre code ES6.
REMARQUES:
server.js
aura un impact sur le code non-ES6. Alors implémentez à vos risques et périls. 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
Powershell à C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server
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
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');
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 }; }
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:
%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. 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é.