JSX or HTML autocompletion in Visual Studio Code

Reactjs Autocomplete Visual Studio-Code Jsx Emmet

Reactjs Problem Overview

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;

Reactjs Solutions

Solution 1 - Reactjs

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.

Solution 2 - Reactjs

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.

Solution 3 - Reactjs

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"}

Solution 4 - Reactjs

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

Solution 5 - Reactjs

2018

I'm using VSCode (ver 1.27.2)

Base on my experienced, even though I'm working with React . The detected language on my VSCode is still vanilla JavaScript. And emmet did not work.

One of the ways to make it work again is change the VSCode detected language to JavaScript React. This is for single JS file only.

To change it once entirely, you need to associate it.

Click Configure File Association for .js...

And select JSX , which in my case, I already did.

For Workplace Setting, and last if none of them work for you. Go to Preference of just to ctrl + , (comma) to open it.

Type and search for emmet or Emmet. Then copy the Setting you want to override. In my case:

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

Note: I didn't try to use jsx only javascriptreact.

I implemented the second and third step. And I can now do Emmet.

Solution 6 - Reactjs

Simple answer in 2020

First, select the File Association in the bottom-center-right of the window.

Second, select Configure File Association for .js from the menu that drops down at the top-center of the window. Change it to JavaScript React.

Solution 7 - Reactjs

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

Solution 8 - Reactjs

2019 Update

Auto closing tags in .html, .js, and .jsx

Works out of the box. That is, after typing in the closing bracket to the opening tag, the closing tag will be inserted automatically.

Emmet with basic HTML in .jsx files

Works out of the box.

Emmet with basic HTML in .js files:

Add the following setting, required for Emmet abbreviation suggestions, and required for tab expansion to work consistently.

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

Emmet with custom tags (e.g. React Components) in both .js and .jsx files

Add the following setting:

  "emmet.triggerExpansionOnTab": true,

Note that with this setting, Emmet will expand all words as custom tags (not just React component names)

Also note that when using Emmet to expand React components as custom tags, you have to actually choose the component name from the suggestion list and complete that first (or type out the whole name manually and close the suggestion menu with the escape key). After the word expands, you then have to tab again to get Emmet to expand the custom tag.

There's an active feature request to potentially remove this extra step (automatically expand when selecting the suggestion so that it works the same way as expanding standard html tags would).

Troubleshooting

Ensure you have the latest version of VSCode.

Ensure you did not change the following default settings:

"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"
],

Solution 9 - Reactjs

I solved the problem simply by following the steps below:

On the left bottom of VSCode click to Javascript
Then on the top, you will see a list, click on "Configure 'Javascript' language based settings"

Add these lines to the file:

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

If you want to more details, you can check this link.

Solution 10 - Reactjs

I went throw all answers and this config worked for me. had to include language as well as add syntaxProfile. without the trigger expansion nothing worked but now I only press Tab button to get the result.

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

Solution 11 - Reactjs

Just go to settings in vscode.
You can see a search bar in setting type emmet.
Scroll down, there is an option include language.
Click on the add item button in include language.
Add item as javascript and value as javascriptreact.

if you get confused, please refer to the picture below:

Solution 12 - Reactjs

Easy & Modern way to enable the auto suggestions for JSX for ReactJs is Shown in GIF below.

for Windows => File > Preferences > Settings

for MacOs => Code > Preferences > Settings

then follow the steps shown in GIF.

Solution 13 - Reactjs

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

Solution 14 - Reactjs

Adding an item called javascript with value javascriptreact in the emmet section in settings worked for me.

a screen shot of my settings

Solution 15 - Reactjs

Changing the extension from ".js" to ".jsx" will do the job. But in a case that you want to keep ".js" extension follow below steps.

Go to

Files > Preferences > Settings

In the settings tab you will see two tabs named 'user' and 'workspace' (look close to the bottom of search bar). Both the tabs will show you same settings but user settings will effect for all the projects in VS Code while workspace will effect only for current project. Choose whatever option you want, workspace or user.

And then on the left side menu bar you have to go

Extensions > JSON

Then at the right side you can see several settings. Scroll down a little bit and you will see something like this.

> JSON:Schemas
Associate schemas to JSON files in the current project.
Edit in settings.json

Click on "Edit in settigns.json". It will open a json file. Add below code to the json file.

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

And save the file. Now go and check if your js file supports for jsx auto-completion. This has been tested with

VS Code versino 1.61.2.

P.S. -: Following part is only for the learners who don't know about json.

Copy and paste the above code to the bottom of settings.json file as shown in the following image. Don't forget to add a comma (pointed by red arrow) and the code should be pasted before the last closing curly bracket (pointed by yellow arrow).

If you choose workspace settings tab then there might be nothing in you settings.json file. If so just paste the code inside the curly brackets.

Solution 16 - Reactjs

It took me two steps to get auto-closing tags in JSX.

Follow Kehkashan Fazal's instructions above about setting "emmet.includeLanguages"
Download the Auto Close Tag extension from VSCode (formulahendry.auto-close-tag)

And now you have nice auto-closing JSX tags!

Solution 17 - Reactjs

Follow these two steps only:

On bottom of VSCode where detect language click on that

1st step

Click on "Configure 'Javascript(Babel)' language based settings..." or what ever

2st step

paste this code on it separate first by comma ',' and save it.

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

3rd step

Solution 18 - Reactjs

Autocomplete for React Babel was working fine until yesterday for me.

None of these answers helped so I just restarted my computer. Worked like a charm ;)

Solution 19 - Reactjs

I was working on various projects and I have a big settings file.

I checked settings and found out that this settings was ruining that all.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

So I commented it. And everyhting works perfectly in React Apps. Thanks

Solution 20 - Reactjs

Only work in JSX files. Let it not work with JS.

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

Solution 21 - Reactjs

just name the file you are working on from .js to .jsx and you are fine .

Content Type	Original Author	Original Content on Stackoverflow
Question	bawa g	View Question on Stackoverflow
Solution 1 - Reactjs	Julian Soro	View Answer on Stackoverflow
Solution 2 - Reactjs	Andrii.Vandakurov	View Answer on Stackoverflow
Solution 3 - Reactjs	Kehkashan Fazal	View Answer on Stackoverflow
Solution 4 - Reactjs	Arif Dewi	View Answer on Stackoverflow
Solution 5 - Reactjs	RoCk RoCk	View Answer on Stackoverflow
Solution 6 - Reactjs	Davis Jones	View Answer on Stackoverflow
Solution 7 - Reactjs	Cole	View Answer on Stackoverflow
Solution 8 - Reactjs	jabacchetta	View Answer on Stackoverflow
Solution 9 - Reactjs	Esin ÖNER	View Answer on Stackoverflow
Solution 10 - Reactjs	user9083221	View Answer on Stackoverflow
Solution 11 - Reactjs	surendra ediga	View Answer on Stackoverflow
Solution 12 - Reactjs	Kamal Panara	View Answer on Stackoverflow
Solution 13 - Reactjs	zakaria kasmi	View Answer on Stackoverflow
Solution 14 - Reactjs	Saeid Rezaei	View Answer on Stackoverflow
Solution 15 - Reactjs	Jagath	View Answer on Stackoverflow
Solution 16 - Reactjs	bildungsroman	View Answer on Stackoverflow
Solution 17 - Reactjs	Ameer Hamza	View Answer on Stackoverflow
Solution 18 - Reactjs	Pixelomo	View Answer on Stackoverflow
Solution 19 - Reactjs	Oleg Shkliaiev	View Answer on Stackoverflow
Solution 20 - Reactjs	Fatih Ertuğral	View Answer on Stackoverflow
Solution 21 - Reactjs	gouder hicham	View Answer on Stackoverflow