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

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. — Aayush Goyal, Apr 02 '21 at 18:31

Audwin Oyong · Answer 1 · 2021-08-06T06:08:19.877

30

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

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

edited Aug 06 '21 at 06:08

answered Aug 12 '18 at 13:45

Audwin Oyong

2,247
3
15
32

score 9 · Answer 2 · edited Jun 29 '21 at 17:10

9

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

this is my setting, it can work well

edited Jun 29 '21 at 17:10

Samathingamajig

11,839
3
12
34

answered Jun 26 '18 at 06:45

user7352643

91
1
3

score 2 · Answer 3 · answered Jun 06 '22 at 18:46

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

Enable Emmet for .tsx files on VSC

3 Answers3