Type HTML faster in React with Emmet and VS Code

Editor’s Note: This post was reviewed for accuracy on 13 April 2023. In March 2023, Visual Studio Code released v1.77 to improve accessibility, copy GitHub deep links, include TypeScript and JavaScript switch statements, and expand GitHub Copilot integration.

Visual Studio Code is widely known as a favorite IDE among React developers. With its large number of plugins and extensions, VS Code helps speed up the development process and boost productivity.

One interesting plugin from that list is an amazing tool called Emmet, which helps you write HTML and CSS faster by using simple abbreviations that are then converted into code blocks. However, there is one minor drawback; by default, Emmet is not enabled for React in VS Code.

In this article, we‘ll learn about React JSX, then go over the solution to enable Emmet in React for VS Code. We’ll also explore the various Emmet abbreviations. Let’s get started!

• HTML in React
• Emmet in Visual Studio Code
• Enabling Emmet in Visual Studio Code for React
• Step 1: Open settings.json in VS Code
• Step 2: Configure the settings.json
• Emmet abbreviations
• Attribute operators
• Nesting operators

HTML in React

One unique feature of React is the concept of JSX. JSX, which stands for JavaScript XML, is a simple syntax extension of JavaScript that allows you to write HTML in JavaScript.

With JSX, you can write HTML in React by converting HTML tags into React elements. Using JSX in React helps you to create a simpler and cleaner codebase for your React application, optimizing your logic and making it easier to understand.

When writing JSX, there are some rules to follow to prevent unnecessary console errors:

• HTML attributes and CSS properties must be named using camelCase
• JavaScript code must be wrapped in curly braces {} inside JSX
• For every opening tag of an HTML element, there must be a corresponding closing tag

With the Emmet plugin in VS Code, it’s easy to follow these rules, helping you type HTML in React faster and more efficiently.

Emmet in Visual Studio Code

Emmet is a built-in feature of VS Code, so it doesn’t require any additional installation. By using shorthand and abbreviations, Emmet greatly improves and speeds up your HTML and CSS workflow, saving you the stress of having to manually type out the code in full:

Emmet uses different abbreviations and short expressions depending on what’s passed, and then dynamically converts the abbreviations into the full code. Emmet is mostly used for HTML, XML, and CSS, but it can also be used with programming languages.

Enabling Emmet in Visual Studio Code for React

Building a web application’s UI in React would involve writing out the HTML in React using JSX and defining the styles using CSS.

A larger codebase would require a repeated syntax, which could potentially reduce productivity if you repeatedly have to type out each part. With Emmet, you can solve this problem easily.

By using short expressions and abbreviations, you can more quickly and easily type the HTML while also  producing a good codebase more efficiently. There is just one minor drawback; by default, Emmet isn’t configured to recognize .jsx files in React for VS Code. However, there is an easy fix.

By following these simple steps, you can easily configure VS Code to fully support React.

Step 1: Open settings.json in VS Code

To open the setting.json file, you first have to open the User Settings page by typing Ctrl + , if you’re on Windows or ⌘ + , if you’re on a Mac:

In the User Settings page, click on the new file icon in the top right corner of the page:

Alternately, you can open the settings.json file directly from the Command Palette. Simply type in Ctrl+ Shift + P if you’re on Windows users or ⌘ + shift + P if you’re on a Mac. This command opens the Command Palette in an input box format.

Next, in the Command Palette, search for settings.json and click on the Preference: Open User Settings JSON option from the dropdown menu:

Step 2: Configure the settings.json

From the settings.json file, you’ll be able to see the different configurations that are already set for your IDE. To enable Emmet in VS Code for React, we’ll add the following code:

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

With the code above, Emmet is now enabled for files that are recognized as javascriptreact or typescriptreact in VS Code, which are .jsx and .tsx files. You would need to reload the IDE to experience the updated changes.

Another alternative is to handle this directly from the VS Code UI. From the User Settings page, search for Emmet. Then, scroll down to Emmet: Include Languages and click on add item to include the code above as a key-value pair:

Emmet abbreviations

Now that we’ve successfully configured Emmet in VSCode to support JSX, we can try out the Emmet abbreviations and expressions directly in a jsx file. There are different abbreviations depending on what you want to implement. These abbreviations are then transformed into a structured code block.

Let’s take a look at some of the basic abbreviations and expressions.

Attribute operators

Attribute operators allows you to easily define the class and ID for a particular element:

• div.demo => <div className="demo"></div>
• div#demo => <div id="demo"></div>

The attributes can also be combined to form an expression as follows:

• div#headerId.headerClass => <div id="headerId" className="headerClass"></div>

Nesting operators

Nesting operators allows us to position how elements are placed and the order they follow.

Child >

Child is used to nest elements inside each other following the nav>ul>li structure:

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

Sibling +

Sibling places elements on the same level, following p+span:

<p></p>
<span></span>

Climb up ^

Climb up ^ moves the following element one level up the tree, header+main>div^footer:

  <header></header>
  <main>
    <div></div>
  </main>
  <footer></footer>   

Multiplication *

Multiplication * defines the number times an element should be created li*2:

<li></li>
<li></li>

Item numbering $

The item numbering $ operator allows us to assign unique values to repeated elements. It can be used alongside the multiplication operator to output the current number of the repeated element div.group$*5:

<div className="group1"></div>
<div className="group2"></div>
<div className="group3"></div>
<div className="group4"></div>
<div className="group5"></div>

Text formating {}

Text formatting {} is used to add text to elements as follows:

p.demo{test} => <p className="demo">test</p>

So far, we’ve covered the basic usage of Emmet. You can also check out this cheatsheet for more guides on the different abbreviation syntax.

React snippets extension

Another useful extension that is beneficial to have as a React developer is the React snippets extension. It works similarly to Emmet; by just typing the prefix, it automatically generates the code snippet for it. It provides the code snippets for React, Redux, and React Router with Hooks support:

Conclusion

Emmet is exceptional because of how easily it increases the speed of typing HTML; with just a simple expression, we can implement a large code block. We don’t have to go through an extra step for installation since it is available by default in VSCode.

Emmet improves both productivity among React developers and the developer experience regarding typing in JSX. I hope this article has provided a clearer solution to using Emmet in VS Code for React. If you have any questions, feel free to reach out to me on Twitter or leave a comment below. Happy coding!