JSX or HTML autocompletion in Visual Studio Code

Question

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; 

Answer 1

2019: Straight-to-the-point 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.

Answer 2

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)

Update 2021

For those who just want to copy-paste the code:

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

If the solution above doesn't work, try this:

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

Tested with VS Code v1.56.2.