Enable Emmet support for JSX in Visual Studio Code | React

Image from https://code.visualstudio.com/docs/editor/emmet

There is a small tweak you need to do on your VS Code to enable Emmet support for JSX. This makes typing HTML in React ( .js ) files much faster and easier.

Emmet comes with VS Code by default.

This tutorial was tested on VS Code version 1.31.1

1. Open any source folder on VS Code, and go to Settings :

On Mac : Command + ,

On Windows : Ctrl + ,

It’s Command or Control with the Comma symbol. Just to avoid any confusion.

2. Go to the Workspace Settings tab.

3. On the left sidebar, go to Extensions dropdown, and choose Emmet.

4. Click “Edit in settings.json”

5. Add this following lines to the settings.json file that opened up.

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

Your settings.json should look like this now

6. Emmet should be enabled in .js files now! 🎉

👇👇👇 🙏

If you find the article above useful, please consider subscribing to Medium using my referral link below. For no extra cost to you, I will get a small contribution each month. 🙇‍♂️

Join Medium with my referral link - Eshwaren M