Changer la langue en JSX dans Visual Studio Code

Question

Visual Studio Code now supporte JSX sur la version 0.8 , mais le seul moyen de l'activer est de l'utiliser avec un .jsx extension de fichier. Ce n'est pas dans la liste de changer le mode de langue manuellement, l'option la plus proche est JavaScriptReact, mais elle n'analyse pas les tags JSX.

Je suis dans un projet avec beaucoup de .js fichiers avec JSX et je ne peux pas le changer.

Existe-t-il un autre moyen d’utiliser la syntaxe JSX sans le .jsx extension?

Answer 1

Modifiez vos paramètres utilisateur ou les paramètres de votre espace de travail comme suit:

// Place your settings in this file to overwrite the default settings
{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

Remarque: Vous devrez peut-être redémarrer VSCode.

Answer 2

Je pourrais le faire, mais "not React fichiers JS") est également affiché avec le mode JavaScriptReact.

1. ouvrir le fichier C:\Program Files (x86)\Code Microsoft VS\resources\app\plugins\vs.
2. remplacez "jsx" par "js" dans le tableau "fileTypes".
3. redémarrez l'application, fermez les fichiers js ouverts et rouvrez-les.

Answer 3

Il m'a fallu un certain temps pour comprendre cela, mais JSX fait déjà partie d'Emmet, qui fait partie de VS Code. J'ai également dit à Emmet de rendre (en outre) les extraits JSX disponibles dans les fichiers JS classiques.

Il suffit de mettre ceci dans votre fichier de paramètres:

"emmet.syntaxProfiles": {
    "javascript": "jsx"
}    

Answer 4

Bien que la réponse de Dionys fonctionne, il existe un meilleur moyen de le faire dans les versions plus récentes de Visual Studio Code.

Aller à File>Prefrences>Settings puis faites défiler et trouvez "Emmet" ouvrez l'onglet et vous devriez voir le texte suivant

  // Enable Emmet abbreviations in languages that are not supported by default. Add a 
  mapping here between the language and emmet supported language.
  //  E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
  "emmet.includeLanguages": {},

Alors suivez les instructions et ajoutez "emmet.includeLanguages": { "javascript": "javascriptreact" } sur le panneau de droite du panneau json (qui écrasera les paramètres utilisateur).

Answer 5

Il existe maintenant une extension VS Code qui permet à .js fichiers à traiter comme .jsx fichiers .

Malheureusement, le lisez-moi de l'extension met également en garde:

lorsque vous installez cette extension, vous perdrez toute la prise en charge linguistique existante fournie pour les fichiers .js

Heureusement, VS Code est maintenant très proche de en adoptant Salsa , ce qui signifie que le problème js-is-jsx devrait bientôt être complètement résolu.

Answer 6

Je pense que la manière la plus simple de formater le code est la suivante

Cliquez en bas à droite sur VS Code Editor où il est écrit Javascript.

Vous verrez une option pour sélectionner le mode de langue, ici vous pouvez rechercher JavaScriptReact et sélectionner. C'est ça. Cela devrait résoudre votre problème.

1.