web-dev-qa-db-fra.com

Autocomplétion JSX ou HTML dans le code Visual Studio

Est-il possible d'utiliser des composants ou une complétion HTML dans Visual Studio Code? Parce que taper chaque lettre manuellement n’est pas une bonne idée quand on a des classes comme Bootstrap, etc. Par exemple, l’achèvement comme dans Emmet: ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;
reactjsautocompletevisual-studio-codejsxemmet
40
owaishanif786

Le code Visual Studio détecte les extensions .jsx et ajoute le support emmet par défaut (j'utilise le code VS 1.8.1) 

Mais si vous préférez utiliser l'extension .js pour tous vos fichiers de réaction, vous pouvez associer le mode de réaction JavaScript aux fichiers .js dans le coin inférieur droit de la fenêtre de VS Code.

Comment faire cela étape par étape (gif)

 enter image description here

44
Andrii.Vandakurov

2018: Réponse directe au problème pour React

La façon la plus simple d’obtenir la complétion automatique JSX/HTML dans vos projets React consiste à l’ajouter à vos paramètres utilisateur ou à ceux de votre espace de travail (<project-path>/.vscode/settings.json):

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

Vous devrez peut-être redémarrer VS Code pour que la modification soit prise en compte.

P.S. Si vous ne faites pas cette correspondance pour un projet React.js, alors la réponse de KehkashanFazal devrait probablement fonctionner pour vous.

82
Julian Soro

Si quelqu'un est toujours aux prises avec ce problème:

J'ai découvert que le réglage 

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

n'active pas la complétion HTML. Mais, en utilisant:

"emmet.includeLanguages": {
    "javascript": "html"
}

est-ce que.

Selon Documents emmet :

"emmet.includeLanguages": {}

Activer les abréviations emmet dans les langues non prises en charge par défaut. Ajoutez ici un mappage entre la langue et la langue prise en charge par emmet.
Exemple: {"vue-html": "html", "javascript": "javascriptreact"} 

29
Kehkashan Fazal

Il suffit de sélectionner le mode Langue approprié en bas à droite de l'écran: réglez-le sur Réaction JavaScript.

14
Donskikh Andrei

Aucune de ces solutions n’a fonctionné ... mais l’extension de fermeture automatique le fait! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

7
Cole

vous pouvez utiliser l'extension de fermeture automatique dans Visual Studio Code . ps. Lorsque vous installez l'extension, la saisie semi-automatique ne fonctionne pas tant que vous ne rechargez pas le code VS, ne rouvrez que le code VS ou accédez à l'extension de balise à fermeture automatique, puis cliquez sur Recharger. 

lien de la balise auto close Extension 

3
zakaria kasmi

2018

J'utilise VSCode(ver 1.27.2)

Base sur mon expérience, même si je travaille avec React. La langue détectée sur ma VSCode est toujours vanille JavaScript. Et emmet n'a pas fonctionné. 

  • Une des manières de le faire fonctionner à nouveau est de changer le VSCode langue détectée en JavaScript React. Ceci concerne uniquement le fichier JS. 

 vscode options

  • Pour le changer une fois entièrement, vous devez l'associer. 

 two

Cliquez sur Configure File Association for .js...

 three

Et sélectionnez JSX, ce que j’ai déjà fait dans mon cas.

 four

  • Pour le milieu de travail, et le dernier si aucun d’entre eux ne fonctionne pour vous. Allez dans Préférences de juste pour ctrl + , (comma) pour l'ouvrir.

Tapez et recherchez emmet ou Emmet. Ensuite, copiez le paramètre que vous souhaitez remplacer . Dans mon cas:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

Note: Je n'ai pas essayé d'utiliser jsx uniquement javascriptreact.

 settings

J'ai mis en œuvre les deuxième et troisième étapes. Et je peux maintenant faire Emmet. 

3
RoCk Vangeance

Mise à jour 2019

Fermeture automatique des balises en .html, .js et .jsx

Fonctionne hors de la boîte. C'est-à-dire qu'après avoir tapé le crochet de fermeture sur la balise d'ouverture, la balise de fermeture sera insérée automatiquement.

Emmet avec HTML de base dans les fichiers .jsx

Fonctionne hors de la boîte.

Emmet avec HTML de base dans les fichiers .js:

Ajoutez le paramètre suivant, requis pour les suggestions d'abréviations Emmet et requis pour que le développement des onglets fonctionne de manière cohérente.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Emmet avec des balises personnalisées (par exemple, React Components) dans les fichiers .js et .jsx

Ajoutez le paramètre suivant:

  "emmet.triggerExpansionOnTab": true,

Notez qu'avec ce paramètre, Emmet développera tous les mots en tant que balises personnalisées (pas uniquement les noms de composants React)

Notez également que lorsque vous utilisez Emmet pour développer les composants React en tant que balises personnalisées, vous devez en fait choisir le nom du composant dans la liste de suggestions et compléter celle-ci en premier (ou tapez le nom complet manuellement et fermez le menu de suggestion avec la touche d'échappement). Une fois que Word se développe, vous devez à nouveau utiliser l'onglet pour que Emmet développe la balise personnalisée.

Il existe une demande de fonctionnalité active pour potentiellement supprimer cette étape supplémentaire (à développer automatiquement lors de la sélection de la suggestion afin qu'elle fonctionne de la même manière que le développement des balises HTML standard).

Dépannage

Assurez-vous de disposer de la dernière version de VSCode.

Assurez-vous de ne pas modifier les paramètres par défaut suivants:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"TypeScript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],
1
jabacchetta

Il m'a fallu deux étapes pour obtenir des balises à fermeture automatique dans JSX. 

  1. Suivez les instructions ci-dessus de Kehkashan Fazal concernant la configuration de "emmet.includeLanguages"
  2. Téléchargez l'extension de fermeture automatique à partir de VSCode (formulahendry.auto-close-tag)

Et maintenant, vous avez de jolis tags JSX à fermeture automatique!

1
bildungsroman

Je suis allé jeter toutes les réponses et cette config a fonctionné pour moi. Il fallait inclure le langage et ajouter syntaxProfile. sans l'expansion de la gâchette, rien n'a fonctionné, mais maintenant, je n'ai qu'à appuyer sur la touche Tab pour obtenir le résultat.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true
0
user9083221