CODEWITHSUNDEEP
visual-studio-codeemmetreact-tsx
Jonca33
Jonca33

Reputation: 3493

Enable Emmet for .tsx files on VSC

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

Upvotes: 18

Views: 12980

Answers (3)

Muhammad Soliman
Muhammad Soliman

Reputation: 23756

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

Upvotes: 3

Audwin Oyong
Audwin Oyong

Reputation: 2556

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

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

Upvotes: 34

user7352643
user7352643

Reputation: 91

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

this is my setting, it can work well

Upvotes: 9

Related Questions