Type HTML faster in React with Emmet and VS Code
Tags: react, webdev
Published: 2022-12-22 16:50:32

**Written by [Abiola Farounbi](https://blog.logrocket.com/author/abiolafarounbi/)✏️**

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](https://blog.logrocket.com/writing-vs-code-extensions-in-javascript/) and boost productivity. 

One interesting plugin from that list is an amazing tool called [Emmet](https://emmet.io/), 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](#html-react)
*   [Emmet in Visual Studio Code](#emmet-visual-studio-code)
*   [Enabling Emmet in Visual Studio Code for React](#enabling-emmet-visual-studio-code-react)
*   [Step 1: Open `settings.json` in VS Code](#open-settings-json-vs-code)
*   [Step 2: Configure the `settings.json`](#configure-settings-json)
*   [Emmet abbreviations](#emmet-abbreviations)
*   [Attribute operators](#attribute-operators)
*   [Nesting operators](#nesting-operators)

## HTML in React <a name="html-react">

One unique feature of React is the concept of [JSX](https://reactjs.org/docs/introducing-jsx.html). 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 <a name="emmet-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](https://blog.logrocket.com/wp-content/uploads/2022/12/emmet-vscode-abbreviation-example.gif) 

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 <a name="enabling-emmet-visual-studio-code-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 <a name="open-settings-json-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](https://blog.logrocket.com/wp-content/uploads/2022/12/open-vscode-user-settings.png) 

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](https://blog.logrocket.com/wp-content/uploads/2022/12/vscode-user-settings-new-file-icon.png) 

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](https://blog.logrocket.com/wp-content/uploads/2022/12/select-user-settings-command-palette.gif)

## Step 2: Configure the `settings.json` <a name="configure-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:

```javascript
"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](https://blog.logrocket.com/wp-content/uploads/2022/12/enable-emmet-vscode-react-user-settings-1.gif)

## Emmet abbreviations <a name="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 <a name="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 <a name="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:

```javascript
   <nav>
        <ul>
          <li></li>
        </ul>
    </nav>
```

### Sibling `+`

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

```javascript
<p></p>
<span></span>
```

### Climb up `^`

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

```javascript
  <header></header>
  <main>
    <div></div>
  </main>
  <footer></footer>   
```

### Multiplication `*`

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

```javascript
<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`:

```javascript
<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](https://docs.emmet.io/cheat-sheet/) 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](https://marketplace.visualstudio.com/items?itemName=ugross.vscode-react-snippets). 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](https://blog.logrocket.com/wp-content/uploads/2022/12/open-user-settings-command-palette.gif)

## 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](https://twitter.com/abiolaesther_) or leave a comment below. Happy coding!

---
##Cut through the noise of traditional React error reporting with LogRocket

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/signup)

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter — [try LogRocket today](https://lp.logrocket.com/blg/react-signup-issue-free).