Emmet autocomplete is not functioning in JSX

Question

I'm new to Visual Studio Code and trying to get emmet to work on JSX. I read that I had to use the following code in my settings, but it is still not working. Can anyone troubleshoot for me?

"emmet.includeLanguages": {
      "html": "html",
      "javascript": "javascriptreact",
      "xml": {
        "attr_quotes": "single"
      }
    },
    "emmet.triggerExpansionOnTab": true 
}

Answer 1

This works for me:

"emmet.includeLanguages": {
  "html": "html",
  "javascript": "javascriptreact",
  "xml": {
    "attr_quotes": "single"
  }
},
"emmet.triggerExpansionOnTab": true

The only difference to your code is I removed the last curly brace so it is properly contained within the settings.json object. If you want these settings to work with all your files and projects make sure the changes are in your USER SETTINGS.

Here is the VSCode related documentation for Emmet configuration.

Answer 2

i found out that sometimes Emmet "forgets" to look for HTML in JS files, but it still does work in JSX and CSS files. So I put a few lines to "remind" Emmet look HTML in js files as well, associate with them, here it is:

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

or this:

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

here is the source