Abiola Farounbi Frontend developer and technical writer with a passion for open source, accessibility, and web technologies.

Type HTML faster in React with Emmet and VS Code

4 min read 1338

React Emmet VSCode

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

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 VSCode Abbreviation Example

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:

Open VSCode User Settings

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

VSCode User Setting New File Icon

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:

Select User Settings Command Palette
Select user settings page from the Command Palette

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:

Enable Emmet Vscode React User Settings
Enable Emmet in VSCode for React directly from the user settings page

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:

Open User Settings Command Palette

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!

LogRocket: Full visibility into your production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.

No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Abiola Farounbi Frontend developer and technical writer with a passion for open source, accessibility, and web technologies.

Leave a Reply