DEV Community

Žane Suhadolnik
Žane Suhadolnik

Posted on

How to use Emmet with React/JSX?

Hi, hello, dober dan!

This isn't a tutorial sadly, more of a request for knowledge :D

Been learning React recently. As probably many of you I also use Emmet when it comes to writing HTML code more quickly. I wanted to use Emmet for JSX and found myself confused as to why it doesn't work consistently?

First thing I did was change the "Workplace settings" in VSCode as how this issue instructed: https://github.com/Microsoft/vscode/issues/41998

That worked, BUT when I created a new .js file in my src folder for example and tried writing React/JSX code in it, Emmet didn't work. The only solution I could figure out was to manually change the file type to javascriptreact every time I create a new file.

Does anyone have a link to a solution? Thanks :D

Latest comments (5)

Collapse
 
defman profile image
Sergey Kislyakov

Isn't jsx supposed to contain JSX/JS and JS to contain JS only?

Collapse
 
qoobes profile image
Ahmed Haracic

Yes, but it's still not used in most cases.

Collapse
 
mksdziag profile image
mksdziag • Edited

Hi,
For me answer from stackoverflow.com works perfectly

// add to your vscode settings
{
"files.associations": {
"*.js": "javascriptreact"
}
}

Collapse
 
emmanuel112673 profile image
Emmanuel112673

Thank you

Collapse
 
zasuh_ profile image
Žane Suhadolnik

Thank you!