CODEWITHSUNDEEP
reactjsvisual-studio-codejsx
user7392290
user7392290

Reputation: 111

Emmet autocomplete is not functioning in JSX

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 
}

Upvotes: 11

Views: 4684

Answers (3)

Vivek Singh
Vivek Singh

Reputation: 1

If it's not working even after adding emmet for React in settings in vs code like

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

then try to autocomplete in a HTML file once and now it should work in React.

Upvotes: 0

Oleksiï Nikonov
Oleksiï Nikonov

Reputation: 5568

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

Upvotes: 19

PatrickOlvera
PatrickOlvera

Reputation: 101

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.

Upvotes: 7

Related Questions