owaishanif786 owaishanif786 - 23 days ago 6
React JSX Question

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;

Answer Source

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)