Enable Emmet for .tsx files on VSC

Question

I'm using Visual Studio Code. How can I enable emmet on .tsx files?

I'd like a simple

.foo + tab

to be expanded to

<div className="Foo"></div>

However, nothing I tried seemed to trigger emmet with the desired behavior above.

Here's my VSC settings:

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

Telugu

Hi, the settings you have described in your question works fine for .js and .tsx file with JSX support. One reason it might not be working for you is, "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly" which should ideally be "emmet.showExpandedAbbreviation": "always" as was in my case. – Globeflower

Answer 1

I set this in my VS Code user settings and it works as desired for .tsx files:

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

Spinescent

Answer 2

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

this is my setting, it can work well

Thoughtful

Answer 3

Open settings. here's a quick shortcut: for windows use Ctrl + , while on mac hit Command + ,

look for the key includeLanguages. Enable Emmet abbreviations in languages that are not supported by default. here's an example:

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

Adjust "emmet.showExpandedAbbreviation" based on your needs (either use Always or inMarkupAndStylesheetFilesOnly)

In settings, it should be like this

"emmet.showExpandedAbbreviation": "Always"

and Here's a screenshot that might be helpful

Pebrook