17

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",
    },
1
  • 1
    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. Apr 2, 2021 at 18:31

3 Answers 3

30

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

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

this is my setting, it can work well

0
2

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

Emmet settings

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.