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. Fo

Answer 1

I solved the problem simply by following the steps below:

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

3. Add these lines to the file:

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

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

Answer 2

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

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

Answer 4

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

Answer 5

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 6

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