JSX or HTML autocompletion in Visual Studio Code

问题:

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. For example completion as in 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; 

回答1:

Visual studio code detect .jsx extensions and add emmet support by default ( i'm using VS code 1.8.1)

But if you prefer to use .js extention for all your react files - you can associate JavaScript React mode with .js files in bottom right corner of VS Code window.

How to do this step by step (gif)

回答2:

December 2017 answer for React

The most straight-forward way to get JSX/HTML autocomplete in your React projects is to add this to your user settings or workspace settings (<project-path>/.vscode/settings.json):

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

You may have to restart VS Code for the change to take effect.

P.S. If you're not doing this mapping for a React.js project, then KehkashanFazal's answer should probably work for you.

回答3:

If someone is still struggling with this issue:

I have discovered that simply setting

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

does not enable HTML completion. But, using:

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

does.

According to emmet docs:

"emmet.includeLanguages": {}

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

回答4:

Just select the appropriate Language mode at the bottom-right on the screen: set it to JavaScript React.

回答5:

None of those solutions worked... but the Auto Close Tag extension does! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

回答6:

you can use The Auto Close Extention In Visual Studio Code . ps. when you install the extension, the autocomplete won't work until you reload VS Code , just Reopen VS Code , or go to auto close tag extension and click Reload.

link of the auto close tag Extension

文章来源: JSX or HTML autocompletion in Visual Studio Code