Autocomplétion JSX ou HTML dans Visual Studio Code

Question

Existe-t-il un moyen d'utiliser les composants ou la complétion HTML dans Visual Studio Code ? Parce que taper chaque lettre manuellement n'est pas une bonne idée lorsque nous avons des classes comme Bootstrap, etc. Par exemple, la complétion 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="http://stackoverflow.com/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="http://stackoverflow.com/">Home</a></li>
                        <li><a href="http://stackoverflow.com/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Answer 1

2019 : Une réponse directe à React.

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

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

Il se peut que vous deviez redémarrer VS Code pour que le changement prenne effet.

P.S. Si vous ne faites pas ce mappage pour un projet React.js, la réponse de KehkashanFazal devrait probablement vous convenir.

Answer 2

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

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

Comment procéder étape par étape (gif)

Mise à jour 2021

Pour ceux qui veulent juste copier-coller le code :

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

Si la solution ci-dessus ne fonctionne pas, essayez ceci :

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

Testé avec VS Code v1.56.2.

Answer 3

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

J'ai découvert que le simple fait de mettre

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

ne permet pas la complétion HTML. Mais, en utilisant :

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

fait.

Según docs d'emmet :

"emmet.includeLanguages": {}

Activez les abréviations emmet dans les langues qui ne sont pas supportées par défaut. Ajoutez ici une correspondance entre la langue et la langue supportée par emmet.
Eg : {"vue-html": "html", "javascript": "javascriptreact"}

Answer 4

Il suffit de sélectionner l'option appropriée Mode langue en bas à droite de l'écran : réglez-le sur JavaScript React.

Answer 5

Aucune de ces solutions n'a fonctionné... mais l'extension Auto Close Tag, oui ! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag