Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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",
    },
like image 341
Jonca33 Avatar asked Apr 09 '18 17:04

Jonca33


People also ask

How do you activate Emmet in VS Code?

To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet. includeLanguages setting. Make sure to use language identifiers for both sides of the mapping, with the right side being the language identifier of an Emmet supported language (see the list above).

How do you trigger Emmet?

CodePen supports Emmet. In HTML, try typing header. main-header>nav>ul. site-nav>li*6>a then pressing TAB.

Does Emmet work in .JS files?

Emmets don't work in JS files. However, you can set it so that VS Code thinks that it's a JSX file and it would give React IntelliSense.


2 Answers

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

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
}
like image 152
Audwin Oyong Avatar answered Oct 17 '22 22:10

Audwin Oyong


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

this is my setting, it can work well

like image 36
user7352643 Avatar answered Oct 17 '22 20:10

user7352643