Speed up your coding using Emmet - a really powerful tool
Tags: html, javascript, react, css
Published: 2020-12-21 07:06:18

![at_start](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/at_start.gif)

### Introduction

In this article, we will talk about [Emmet](https://emmet.io/). A very popular and highly useful tool that is built into almost every IDE out there like Visual Studio Code, Sublime Text etc.

If you're using [Codepen](https://codepen.io/), then you might be happy to know that emmet is also available in codepen. So you can type abbreviations to generate code in Codepen.

## What is so special about emmet?

It allows us to just type some abbreviations and generate the output HTML and CSS code.

It increases your productivity to a great extent so you don't have to type the same repetitive code again and again.

## Installation

Emmet is already available in almost every IDE so you don't need to install it. 

If for some reason, it's not available in your IDE, you can install the extension from [this page](https://emmet.io/download/).

## How to use it?

We just have to type the abbreviation and press the `Tab` key and emmet will convert it to the corresponding code.

### Inside HTML file

* If you have created a new `.html` file, then instead of manually typing the doctype, head, meta, body, just type ! (exclamation mark) and press tab and emmet will add the default HTML code

![Exclamation](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/exclamation.gif)

* If you want to create a div with the class `hero-banner` then instead of manually typing `<div class="hero-banner">Some content</div>`, just type `.hero-banner` and press tab key and the entire code will be generated for you.

![Hero Banner](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/hero_banner.gif)

As you can see, once the code is generated, emmet automatically places the cursor inside the div so you don't need to click inside the div to type content inside the div.

* By default emmet, considers a `div` when you don't specify the tag name.

But you can specify your own tag name also.

Suppose you want to create a section with two classes namely `box` and `showcase` then you just need to type `section.box.showcase` and press the tab key.

![Box Showcase](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/box_showcase.gif)

* Generate div with id `numbers`

Abbreviation: #numbers

![Id Numbers](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/id_numbers.gif)

* Generate div with 3 paragraphs

Abbreviation: div>p*3

![Div 3p](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/div_3p.gif)

As you can see, once the code is generated, emmet automatically placed the cursor inside the paragraph so you just need to press the tab key to move to the next paragraph to type the content inside it

* Generate 3 paragraphs with lorem ipsum text inside div

Abbreviation: div>p*3>lorem

![Lorem Para](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/lorem_para.gif)

* Generate a div with id `btn` and class `primary-btn`

Abbreviation: div#btn.primary-btn

![Primary Btn](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/primary_btn.gif)

* Generate ul with 3 li's and with an anchor tag inside it

Abbreviation: ul>li*3>a

![Li a](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/li_a.gif)

* Generate ul with class `menu-items` and 3 li's with class `menu-item` and with an anchor tag inside it

Abbreviation: ul.menu-items>li*3.menu-item>a

![Menu Items](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/menu_items.gif)

* To generate 4 div's with h2 and ul inside it and 2 li's inside ul

Abbreviation: div*4>h2+ul>li*2

![4_div_h2](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/4_div_h2.gif)

Here, we wanted h2 and ul to be side by side so we have used the + operator

* To generate ul with 4 li's inside it with class item1, item2, item3 and item4

Abbreviation: ul>li.item$*4

![item_number](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/item_number.gif)

Here, $ represents an incrementing number starting with 1.

If for some reason, you want to generate a number starting with 0, use the abbreviation `ul>li.item$@0*4`

![at_start](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/at_start.gif)

Here, we have specified the number after $ with @ symbol

* To generate a button with text `click here` inside it

Abbreviation: button{click here}

![button_click_here](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/button_click_here.gif)

* To generate a paragraph with text `Click here to continue` text where `here` is a link

Abbreviation: p>{Click }+a{here}+{ to continue}

![here_continue](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/here_continue.gif)

* To generate input with type checkbox

Abbreviation: input:c or input:checkbox

![input_checkbox](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/input_checkbox.gif)

You actually don't need to remember some abbreviations like input, just type input: and VS Code will suggest you with various emmet abbreviations

![input_suggestions](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/input_suggestions.gif)

* To generate script tag with the src attribute

Abbreviation: script:src

![script_src](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/script_src.gif)

* To generate tags with some attribute, specify the attribute inside brackets

Abbreviation: a[href='#']

![href](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/href.gif)

To specify multiple attributes separate them with spaces inside the brackets

![img_multiple](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/img_multiple.gif)

> Note: If for some reasons, the emmet suggestion hides and pressing tab does not complete the code, just delete the last character of the abbreviation or press ctrl + space to get the emmet suggestions and then press tab key.

### Inside CSS file

Emmet also works in CSS files.

* To add background to the selector

Abbreviation: bg

![bg](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/bg.gif)

* To add an absolute position to the selector

Abbreviation: pos:a

![pos_a](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/pos_a.gif)

There are tons of abbreviations for CSS but you don't need to remember any of them. VS Code makes it really easy by providing suggestions while typing

* To add any property to the selector just type initial characters and then the next word of that property.

So to add background-color just type backc(back for background and c for color)

![back_c](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/back_c.gif)

* To add background-size property just type backs

![backs](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/backs.gif)

So for CSS, you don't need to remember the emmet abbreviations. VS Code will help you out by providing suggestions.

## Enable emmet in React

By default, Emmet is not enabled for JSX in React in VS Code.
But you can enable it by following the below steps:

* In Visual Studio Code, press `Control + Shift + P` or `Command + Shift + P (Mac)` to open command palette and type setting and then select "Preferences: Open User Settings" option

![setting_1](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/settings_1.png)

* On the left side, expand the extension menu and click on Emmet

![setting_2](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/setting_2.png)

* Under `Include Languages` section, click on `Add Item` button and add `javascript` as a key and `javascriptreact` as a value and click on `Ok`

![setting_3](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/setting_3.png)

Now open any component file in React and type `.albums` and press the tab key and it will be converted to `<div className="albums"></div>`

![Albums](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/85bf8b56585eb06357a9deeb0e220d0c39587ae5/albums.gif)

As you can see, Emmet automatically converts `class` to `className`, If we're in a `.js` file.

* The great thing about Emmet is that you can generate an entire HTML page structure just using a single line of emmet abbreviation `div.container>h1.title+h2.subtitle+div>div*4>h3+ul>li*4>a`

![Structure](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/6e24c9ed930d8a5b745b4aed27cff36b6ae8b246/structure.gif)

**To find out more about such amazing abbreviations check out the [Emmet Cheatsheet](https://docs.emmet.io/cheat-sheet/).**

## Conclusion
That's it about this article. In this article, we have seen that, 

* Using Emmet inside HTML, CSS and even React javascript file, greatly improves productivity.
* We can generate an entire HTML page structure just using a single line of emmet abbreviation.
* So there is no more need of wasting time typing div, classes, ids manually, let the emmet do that job for you.

----

**Get my [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book at 40% off for the next 2 days only as a part of the Christmas sale.**

**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)