web-dev-qa-db-fra.com

Mise en surbrillance de la syntaxe Visual Studio 2015 JSX / ES2015

Comment obtenir une coloration syntaxique correcte dans Visual Studio 2015 pour JSX avec du code ES2015?

ES2015 code

Cela fonctionne bien si je supprime les mots-clés import et export: Without import/export

Je viens de mettre à jour Visual Studio 2015 Enterprise Update 1 mais cela reste le même.

visual-studio-2015intellisenseecmascript-6react-jsx
63
user3900456

MISE À JOUR (2017-02)

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

https://github.com/Microsoft/nodejstools

Lisez 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: une avec ReSharper et une autre en modifiant les outils Web externes de Visual Studio.

SOLUTION 1

Dans ReSharper 10:

  • ouvrir la boîte de dialogue Options
  • sous Modification du code> JavaScript> Inspections , choisissez ECMAScript 6 dans le Niveau de langue JavaScript déroulant
  • 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 escargots rouges étaient partis pour moi. Cependant, la coloration syntaxique pour JSX ne fonctionne pas. Le segment d’ouverture des éléments que je déclare dans la fonction render n’a pas la couleur appropriée, mais c’est facile pour moi de l’ignorer.

Je dois également mentionner que les fichiers javascript doivent avoir l’extension . Js . Si vous leur attribuez l'extension . Jsx , vous aurez des squigglies rouges sur votre première instruction d'importation. Le message d'erreur sera JSX Parser: illegal import declaration. (Ceci peut être corrigé avec la solution n ° 2 ci-dessous)

UPDATE: merci à @SntsDev pour cette solution de contournement Il existe un moyen d'éviter de nommer le . Jsx fichiers en tant que . js :

  • dans Visual Studio, accédez à Options> Editeur de texte> Extension de fichier
  • ajoutez jsx et assignez-le à éditeur de Javascript

SOLUTION 2

La curiosité a eu raison de moi et je voulais savoir s'il existait ou non une solution non-ReSharper. Visual Studio utilise un module de serveur de noeud exécuté localement, nommé react-server, Pour analyser 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

MISE À JOUR POUR Visual Studio 2015 Update 3 Merci à @ TheQuickBrownFox pour le commentaire /mise à jour. Pour la mise à jour 3, l'emplacement des commandes react-server Se trouve maintenant dans ce fichier:

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

En examinant plus en profondeur le fichier server.js Ou react-commands.js Des dossiers susmentionnés, vous trouverez une fonction nommée transformJsxFromPost ou transformJsx. Cette méthode contient la ligne suivante: var transformed = reactTools.transformWithDetails(code, { elementMap: true });. Il s'agit d'une référence au module react-tools ( https://www.npmjs.com/package/react-tools ), qui propose davantage d'options pour l'analyse de ES6.

Par conséquent:

  • remplace 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 indicateurs --es6module Et --harmony, Qui indiquent à react-tools De traiter le code entrant comme ES6.

  • désactivez les erreurs de syntaxe javascript dans Visual Studio comme suit:

    • dans Visual Studio, accédez à Outils> Options> Éditeur 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 gribouillis rouges sur votre code ES6.

REMARQUES:

  • Je ne sais pas si le changement décrit dans la SOLUTION 2 dans le fichier server.js Aura un impact sur le code non ES6. Alors implémentez à vos risques et périls.
  • En outre, il est tout à fait possible/probable que votre modification soit écrasée par une mise à jour ultérieure vers Visual Studio.
  • Ce serait cool/amusant de remplacer l'utilisation de react-tools Dans react-server Par Babel CLI. UPDATE: Merci à @NickDewitt, semble avoir réussi à faire fonctionner ce travail: https://stackoverflow.com/a/36321109/ 9324
75
Adam Weber

Dans VS2015 Update-3 et NTVS 1.2 installés, il vous suffit de définir Editeur TypeScript comme éditeur par défaut pour l’extension de fichier jsx a fait le tour pour moi.

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

2) Tapez jsx dans Extension, sélectionnez l'éditeur TypeScript comme éditeur, et cliquez sur Appliquer.

enter image description here

25
Chebyr

[~ # ~] modifier [~ # ~] : Visuals studio 15 est renommé en Visual Studio 2017: vous pouvez obtenir la télécommande ici: - https://www.visualstudio.com/vs/visual-studio-2017-rc/

Solution future:

Visual Studio "15" Preview 2 prend en charge JSX en React immédiatement. Vous pouvez activer la même bibliothèque de services Javascript (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

7
Reint Jan Hoiting

SOLUTION '3':

Grâce aux informations fournies par 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 avez besoin de nodeJs et npm installé avant d'aller plus loin et éventuellement de sauvegarder des fichiers avant de les modifier.

J'utilise réaction , es2015 plugins avec stage1 presets ici, mais vous pouvez utiliser n'importe quoi plugins 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 ci-dessous 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. Remplace le try{}catch{} section du req.on('end' affectation 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 appréciez la mise en évidence de la syntaxe babel :-)

Notes
Donnez à l’analyseur une chance de commencer après le démarrage. Visual Studio procédera comme suit lors du premier chargement dans un fichier .jsx:

  1. Créer un dossier dans %localappdata%\Temp\ avec stderr.txt où vous pouvez trouver un journal de toutes les erreurs et stdout.txt qui vous dira quoi {port} le serveur est en cours d'exécution et consigne également d'autres informations.
  2. Démarrer un serveur nodeJs, s'exécutant sur 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’objet JSON dans Visual Studio.

Je devais désactiver javascript intellisense pour les fichiers jsx comme Adam le montre dans la solution 1 dans sa réponse:

Dans Visual Studio, sélectionnez Outils> Options> Editeur de texte> JavaScript> IntelliSense, puis décochez la case Afficher les erreurs de syntaxe et validez.

Lorsque javascript intellisense est désactivé, tous les deux réagissent comme ils sont packagés avec vs et babel car je les remplace ici. Ils ne renvoient que la première erreur rencontrée. up que vous tapez si vous gardez votre code sans erreur.

Je suppose que tout ce qui reste à faire est d’obtenir le elementMappings correctement - solution 4 peut-être? :-)

5
user1641172

Tandis que j'essayais 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 fonctionne 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 que vous possédez et sélectionnez "Ouvrir avec ...". Sélectionnez "Ajouter" et naviguez jusqu'à votre code Visual Studio récemment téléchargé et faites-en votre valeur par défaut.

J'espère que cela aidera les gens à s'inquiéter de la mise à niveau.

4
Mark Caple

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

100% de Solution 1 d'Adam Weber : https://stackoverflow.com/a/34110461/163391 (paramètre Niveau de langage JavaScript dans ReSharper jusqu’à ECMAScript 2016 et cochez Activer JSX ... dans la même fenêtre + désactivation Afficher les erreurs de syntaxe dans VS JavaScript IntelliSense options)

Solution 2 de Adam Weber : https://stackoverflow.com/a/34110461/163391 , mais légèrement modifié; 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é.

4
Bartosz Lenar