Joseph Mukorivo

Posted on Sep 15, 2021 • Updated on Apr 14, 2022 • Originally published at josemukorivo.com

Enable Emmet support for React in VS Code

#vscode #react #javascript #html

Back in the day in 1965😂(just kidding I mean 2019) when I was writing plain HTML in VS Code I used to work with emmet to be super fast with my markup. I started using react in 2019 and guess what, emmet was not working by default with React in VS Code and I had to write all my mark up one by one with their attributes.

It turned out that Emmet, React and VS Code already had a relationship👨‍👩‍👦 that I didn't know of. You know what🤔 Let me just show you how to enable it in VS Code.

Go to settings > extensions > emmet > include languages and add javascript as the item and javascriptreact as the value.

Photo by Michael Dziedzic on Unsplash

Top comments (7)

aderchox • Jan 24 '22

Or add this in settings.json:

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

Bashir Shahbakhsh • Jun 16 '23

Thanks 🙏

Bryan • May 7 '22

awesome straight to the point with exactly what I was looking for Thanks!

Kourosh Eidivandi • Jun 11 '23

Thank You!

stardust2stardust • Sep 5 '23

Thank you!

Treana Slocum • Jun 17 '23

Thanks this really helped.

Carlos Henrique • May 18 '22

Thanks!!

DEV Community

Enable Emmet support for React in VS Code

Top comments (7)

Read next

A Simple, mostly CSS code editor

GlobalErrorHandler: Catch the errors that falls through ErrorBoundary's fingers!

Create Toggle Button in HTML CSS & JavaScript

Java Programming