# Boost Your Productivity with Emmet in VS Code

> Emmet is a markup and stylesheet abbreviation tool that allows developers to type shorthand syntax and expand it into full-fledged HTML or CSS code. It's a lifesaver for front-end developers, eliminating the need to manually type out repetitive tags and structures.

- URL: https://www.codethepixel.com/boost-your-productivity-with-emmet-in-vs-code
- Author: Asyraf Wahi Anuar (https://www.codethepixel.com/author/asyraf-wahi-anuar)
- Published: 2025-06-16
- Category: Tools & Software
- Tags: Emmet, Visual Studio Code
- Reading time: 7 min

Writing HTML and CSS can be repetitive and time-consuming, but there's a way to write code faster without sacrificing quality. Enter Emmet, a powerful tool built into Visual Studio Code (VS Code) that enables developers to expand short snippets into complete code structures instantly. This article will introduce Emmet, explain its core features, and demonstrate how you can use it effectively in VS Code to speed up your workflow.

## What is Emmet?

Emmet is a markup and stylesheet abbreviation tool that allows developers to type shorthand syntax and expand it into full-fledged HTML or CSS code. It's a lifesaver for front-end developers, eliminating the need to manually type out repetitive tags and structures. For example, typing:

```html
ul>li*5
```

and pressing Tab or Enter will generate:

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

By default, Emmet is already enabled in VS Code, so you can start using it immediately.

### 1. Expanding Abbreviations

To expand an Emmet abbreviation:

- Type the shortcut (e.g., div.container).
- Press Tab or Enter, and VS Code will expand it into:

```html
<div class="container"></div>
```

### 2. Nesting Elements

To nest elements inside one another, use the \> operator:

```html
header>nav>ul>li*3
```

Expands to:

```html
<header>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>
```

### 3. Grouping with Parentheses

You can group elements using parentheses to create more complex structures:

```html
div>(header>h1+p)+(section>p*2)
```

Expands to:

```html
<div>
    <header>
        <h1></h1>
        <p></p>
    </header>
    <section>
        <p></p>
        <p></p>
    </section>
</div>
```

Using Emmet for CSS

Emmet also works for CSS abbreviations! For example:  
Typing:

```html
m10
```

Expands to:

```html
margin: 10px;
```

Some advanced Emmet shortcuts to supercharge your workflow in VS Code:

### 4. Numbering with $

Automatically generate numbered elements:

```html
ul>li.item$*5
```

Expands to:

```html
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
```

### 5. Implicit Tag Names

Skip the tag name for common elements:

```html
.container
```

Expands to:

```html
<div class="container"></div>
```

### 6. Custom Attributes

Define attributes inside square brackets:

```html
a[href="https://example.com" target="_blank"]
```

Expands to:

```html
<a href="https://example.com" target="_blank"></a>
```

### 7. Text Content with {}

Add text inside elements:

```html
h1{Welcome to My Website}
```

Expands to:

```html
<h1>Welcome to My Website</h1>
```

### 8. Multiplication with Grouping

Use parentheses to structure complex layouts:

```html
div>(header>h1{Title})+(section>p*2)
```

Expands to:

```html
<div>
    <header>
        <h1>Title</h1>
    </header>
    <section>
        <p></p>
        <p></p>
    </section>
</div>
```

## Expanding in Non-HTML Files

Enable Emmet in other file types like JavaScript:

- Open VS Code Settings (Ctrl + ,).
- Search for "Emmet: Include Languages".
- Add:

```html
{
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "php": "html"
    }
}
```

## Custom Snippets

Define your own Emmet shortcuts:

- Open VS Code Settings.
- Search for "Emmet: Extensions Path".
- Add a custom JSON file with your snippets.

Emmet is a must-have tool for front-end developers working in VS Code. By mastering its abbreviations, you can code faster, reduce errors, and improve efficiency. If you haven't tried it yet, start implementing Emmet today. You'll be amazed by how much time it saves!