How to Enable Emmet in JSX Files in VS Code

How to Enable Emmet in JSX Files in VS Code

If you're a React developer using Visual Studio Code (VS Code), you may have noticed that Emmet doesn't work as expected in JSX files out of the box. For example, when you type .container and press Tab, Emmet creates a <div class="container"></div> in an HTML file but doesn't do the same in a .jsx file. This guide will help you set up Emmet for JSX so you can enjoy its productivity-boosting features in your React projects.

---

What is Emmet?

Emmet is a powerful toolkit built into VS Code that allows developers to write HTML and CSS faster by using shorthand syntax. For example, typing .box in an HTML file and pressing Tab expands it to:

<div class="box"></div>

However, Emmet doesn’t fully support JSX by default, as JSX uses slightly different syntax than plain HTML (e.g., className instead of class).

---

Why Emmet Doesn’t Work in JSX by Default

1. JSX is not HTML: In JSX, HTML-like code is used, but with some differences:

   • class becomes className
   • for becomes htmlFor

2. Language Configuration: VS Code needs to know that JSX files (.jsx or .tsx) should also be treated like HTML for Emmet to work.

---

Steps to Enable Emmet in JSX Files

Follow these steps to configure Emmet for JSX in VS Code:

1. Open VS Code Settings (JSON)

1. Open the Command Palette by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).
2. Type Preferences: Open Settings (JSON) and select it.
3. This will open your settings.json file where you can customize VS Code settings.

2. Add Emmet Configuration

Add the following code to your settings.json:

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

Here’s what this does:

• Maps javascriptreact (JSX) and typescriptreact (TSX) to HTML for Emmet to work.

3. Restart VS Code

After making these changes, restart VS Code to ensure the new settings are applied.

---

Using Emmet in JSX Files

Once Emmet is enabled, you can use it as you would in an HTML file. For example:

Example 1: Class Name Expansion

Typing the following in a JSX file:

.div

and pressing Tab will expand to:

<div className=""></div>

Example 2: Nested Elements

Typing:

.nav>ul>li*3

and pressing Tab will expand to:

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

---

Common Issues and Fixes

1. Emmet Doesn’t Expand in JSX Files

• Ensure that the file has a .jsx or .tsx extension.
• Check that your settings.json includes the emmet.includeLanguages configuration.

2. Attributes Like class or for Appear in JSX

• Update them manually to className and htmlFor since Emmet doesn’t automatically adjust these attributes.

---

Conclusion

Enabling Emmet in JSX files can significantly speed up your development workflow by letting you write JSX faster with shorthand syntax. With just a few tweaks to your VS Code settings, you can bring the power of Emmet to your React projects.

Now that you know how to set up Emmet for JSX, try it out in your next project and see how much faster you can write code!