DEV Community

Sh Raj
Sh Raj

Posted on

1 1 1 1 1

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>
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

and pressing Tab will expand to:

<div className=""></div>
Enter fullscreen mode Exit fullscreen mode

Example 2: Nested Elements

Typing:

.nav>ul>li*3
Enter fullscreen mode Exit fullscreen mode

and pressing Tab will expand to:

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

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!

Build seamlessly, securely, and flexibly with MongoDB Atlas. Try free.

Build seamlessly, securely, and flexibly with MongoDB Atlas. Try free.

MongoDB Atlas lets you build and run modern apps in 125+ regions across AWS, Azure, and Google Cloud. Multi-cloud clusters distribute data seamlessly and auto-failover between providers for high availability and flexibility. Start free!

Learn More

Top comments (0)

Build gen AI apps that run anywhere with MongoDB Atlas

Build gen AI apps that run anywhere with MongoDB Atlas

MongoDB Atlas bundles vector search and a flexible document model so developers can build, scale, and run gen AI apps without juggling multiple databases. From LLM to semantic search, Atlas streamlines AI architecture. Start free today.

Start Free

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay