What is Emmet? How to Use Emmet in VS Code for Faster Web Development

Emmet is a plugin for Visual Studio Code text editor that provides a number of tools to help you quickly write HTML and CSS code. It is developed by Sergey Chikuyonok, who is a Russian web developer. 

As a web developer, we have always been searching for a tool to increase our workflow and productivity. And today’s post is dedicated for web developers who frequently work with HTML and CSS.

Why use Emmet in VS Code?

The answer is simple:- Emmet is one of the most downright practical and a productive VS Code text editor plugin that you will ever see. With its ability to instantly expand simple abbreviations into complex code snippets, Emmet makes you feel like a powerful coding wizard with the world at your fingertips.

The central concept of Emmet is that it provides improved workflow with enhanced high-speed coding for web developers who work primarily with HTML and CSS.

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.

– Source: emmet.io

In this post you are going to be learning how to use Emmet syntax in VS Code text editor to generate HTML and CSS code. We will also cover all the features of Emmet including  abbreviation and keyboard shortcuts to save your time. Let’s dive into this journey to help you become a true Emmet pro.

Common Emmet symbols:

The following are the most common Emmet symbols that you can use.

The way Emmet works with other text editor is by pressing  Tab  or  Ctrl+E  or any other supported keyboard shortcut and Emmet expands the simple abbreviations into complex HTML and CSS code snippets.

But with VS Code Tab  key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

Here is an example:

Best Emmet  HTML tips & tricks:

You will be amazed when writing HTML with Emmet.  As stated earlier, Emmet is able to abbreviate a simple HTML to very complex one. And they are written only on a single line of code. Here are our best HTML tips and tricks for you.

Trick#1: Nesting

To generate nested elements we will use > operator. For instance, when we want to have a header with nav, div, ul, li then just type:

nav>div>ul>li

Output: 

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

Trick#2: Multiplication

Let’s make things a bit interesting, Generate a list of five li, each li has an anchor a tag. For nesting we used > operator in our previous trick. But how would we go about for repetition? Repetition can be done using * operator, just type:

ul>li*5>a

Output: 

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Trick#3: Sibling

Let’s say you want to have a header, section, article and footer tag individually. What would you do? These are not nested so you can not use >. The better solution would be sibling. To generate sibling use + operator. Just type:

header+section+article+footer

Output:

<header></header>
<section></section>
<article></article>
<footer></footer>

It will give a different place for header, section, article and footer.

Trick#4: Adding text

With Emmet you can even add line of text inside of an element. To add some text, you just have to wrap the text with curly braces { } sign. If you want to generate a div with text content inside then just type:

div{some demo text}

Output:

<div>some demo text</div>

It will generate a div tag with whatever text that is specified inside the curly braces { }.

Trick#5: Adding Class

Emmet is also able to include your preferred class name within the HTML tag. The sign you will use is a dot . sign. For example, if you want to have a div with .wrap class, h1 with .pagetitle and nav with .fixed, then you need to type:

div.wrap>header>h1.pagetitle+nav.fixed

Output:

<div class="wrap">
    <header>
        <h1 class="pagetitle"></h1>
        <nav class="fixed"></nav>
    </header>
</div>

Trick#6: Type multiple Class names on a single element

If you want to add multiple class names to a single element then the job is done easier by Emmet for you. Suppose, you want to type three classes such as .mango , .orange , .apple in a single element then type:

.mango.orange.apple

Output:

<div class="mango orange apple"></div>

Trick#7: Adding ID

You can also add an ID inside your tag with # sign. Just type:

div#main

Output:

<div id="main"></div>

You can specify multiple classes as mentioned in our previous tip but do remember that you can’t do the same with ID. If you specify two ID’s using #, the 2nd id will override the first. For example:

div#mango#orange

Output:

<div id="orange"></div>

Trick#8: Adding Attribute

By using [ ] we can add attributes to our HTML apart from class and id. For example,

input[type=email].mango

Output:

<input type="email" class="mango">

Let us take one more example, if we have a source image ‘ logo.png’ with ‘ logo’ as alt tag, so we need to type:

img[src=logo.png alt=logo]

Output:

<img src="logo.png" alt="logo">

Trick#9: Grouping

By using ( ) we can group code together. This works well with the sibling + operator. This simple example will generate an unordered list and three list items, each of which contain a link.

ul>(li>a)*3

Output:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Let us take one more complex example. Suppose, we need a container that has a header with h1 and nav inside and another section outside the header.

.container>(header>h1+nav.fixed)+(section>.content+.sidebar)

Output:

<div class="container">
    <header>
        <h1></h1>
        <nav class="fixed"></nav>
    </header>
    <section>
        <div class="content"></div>
        <div class="sidebar"></div>
    </section>
</div>

Trick#10: Climb up

The climb up ^ operator is used to move up one level in the tree structure. This can come in handy when you are using the child operator >.

section>div>p>a^p

In this case two paragraph elements will be created within the div but only the first paragraph will contain a link.

Output:

<section>
    <div>
        <p><a href=""></a></p>
        <p></p>
    </div>
</section>

If you type it twice, then you will climb double element and so on.  

Trick#11: Automatic numbering

Emmet also includes a feature that allows you to automatically add numbers to your HTML. This is useful for applications like setting unique classes on list items. Just add a dollar sign $ to your abbreviation where you want the number to appear and Emmet will take care of the rest.

Auto numbering is best used with multiplication *.Here is one example:

ul>li.item$*5

Output:

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

Trick#12: Generate random text (Lorem Ipsum)

If you write often ‘ Lorem Ipsum ’ dummy text on your web design project then this trick definitely help you a lot. For instance, if you need only Lorem Ipsum placeholder text, then type:

Lorem

Output:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eos architecto, quidem officiis at molestiae cum rem cupiditate natus. Ducimus aliquid nihil minus quo aperiam inventore illo perspiciatis corrupti autem.

But what if, you want to have some text with 10 word long from Lorem Ipsum, then type:

lorem10

Output:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, odit.

You can also use multiplication operator with Lorem Ipsum to get more content, for example:

lorem*5

Output:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur veritatis error illo eius quasi reprehenderit voluptate iste amet, ipsa dolores assumenda quidem labore doloribus dicta nam rem et quo harum?
Beatae quos, corporis maxime in pariatur quasi unde non sint! Porro similique fuga id at veritatis sit maxime, rerum sed explicabo nam aspernatur amet hic, optio exercitationem mollitia sapiente odio!
Odit eum corrupti voluptatem laborum labore soluta magnam ex similique aliquid voluptates debitis hic at, illo itaque perspiciatis quasi ab! Fugit nobis saepe quas voluptas placeat est quisquam doloribus voluptate.
Aspernatur temporibus quo odio obcaecati dolore nemo debitis fugiat cum, eligendi laboriosam asperiores, dignissimos quibusdam atque doloremque. Modi optio similique blanditiis maxime laborum dolore quasi suscipit itaque, earum inventore non?
Tenetur iste, cum commodi praesentium animi consequuntur? Consequuntur quia similique expedita nulla quas perspiciatis fuga ea sed dolorum quibusdam facere obcaecati, adipisci unde voluptates soluta reprehenderit. Dolorem delectus quis totam.

Trick#13: Using snippets

Whenever you starts a new project, it is important to define a document structure with proper doctype (HTML5). In this case Emmet can do better job for you by typing:

!

Output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

The example above generates a simple HTML5 compliant page template. But if you want only the doctype then type:

!!!

Output:

<!DOCTYPE html>

Trick#14: Generating link

If you have an external CSS file and want to add to your document, you can use link trick to write it faster.

 link:css

Output:

<link rel="stylesheet" href="style.css">

It will generate a CSS link with default style.css style name inside.

You can combine them with plus + sign to generate a faster resources.

head>link:css+link:favicon

Output:

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

Trick#15: HTML tags expansions

There are few HTML tags which we use over and over again. It gets tedious typing out these HTML tags. Emmet can help a lot to reduce typing these tags repeatedly and here are few examples for you to try:

HTML tags expansions #1: 

script:src

Output:

<script src=""></script>

HTML tags expansions #2: 

input:t

Output:

<input type="text" name="" id="">

HTML tags expansions #3: 

input:c

Output:

<input type="checkbox" name="" id="">

HTML tags expansions #4: 

a:link

Output:

<a href="http://"></a>

These are the most frequent Emmet commands which you may use in your day to day web development work in VS code. But if you think its not enough for you then kindly check out official Emmet Cheat Sheet in the HTML section.

Trick#16: Wrap with abbreviation

Select any code and surround it with the tags you want. This requires a little more legwork and you will need to open up your command palette.

Here are the steps to follow:

Step 1: You will need to place your cursor on the tag you want to wrap
Step 2: Open your command palette with CTRL + SHIFT + p
Step 3: Find Emmet: Wrap with Abbreviation
Step 4: Type in your Emmet abbreviation that will wrap your current tag

Trick#17: Tag balancing

Ever look at an opening HTML tag and wonder where it’s closing tag is? Ever wanted to select everything inside of the opening and closing tags? Here is Emmet’s Tag balancing feature come into rescue. Below is a demonstration of the same:

Steps to follow:

Step 1: Place your cursor inside the tags you want to find
Step 2: Open your command palette with CTRL + SHIFT + p
Step 3: Find Emmet: Balance (Outward)
Step 4: Do this multiple times to keep expanding outwards

Best Emmet CSS tips & tricks:

After you learn some of the HTML tips & tricks, now it’s time for the CSS. Emmet also includes a number of abbreviations to help you generate CSS code faster.

This can be very helpful as you do not have to remember long property names, use abbreviations to assign values to properties. These abbreviations are often shorthand versions of the CSS property names.

You can find a full list of the CSS abbreviations that are available by examining css.json file from Github. Let’s look at some examples here too.

Trick#1: Width & Height

Defining width and height in your CSS document is easy with Emmet. You just have to write the first word of them followed by the size you want to add.

Example 1: 

body{
    w
}

Output: 

body{
    width: ;
}

Example 2: 

body{
    w200
}

Output: 

body{
    width: 200px;
}

By default, if you do not specify the units, Emmet will generate them with px unit. The available unit symbol is percent %, em and rem.

Example 3: 

body{
    w200%
}

Output:

body{
    width: 200%;
}

Example 4:

body{
    w:a
}

Output:

body{
    width: auto;
}

Trick#2: Margin

If you need 20px margin all sides then type:

Example 1:

body{
    m20-20-20-20
}

Output:

body{
    margin: 20px 20px 20px 20px;
}

Same thing can be done for padding of 20px:

Example 2:

body{
    p20-20-20-20
}

Output:

body{
    padding: 20px 20px 20px 20px;
}

Trick#3: Text

There are some easy to use text property symbol and will be generated with default value. ta will generate text-align with left value, td will be text-decoration with none value and tt will become text-transform with uppercase value.

Example 1:

body{
    ta
}

Output:

body{
    text-align: left;
}

Example 2:

body{
    td
}

Output:

body{
    text-decoration: none;
}

Example 3:

body{
    tt
}

Output:

body{
    text-transform: uppercase;
}

Trick#4: Font Face

For @font-face, you can simply write @f which will expand a basic @font-face property.

body{
    @f
}

Output:

body{
    @font-face {
        font-family: ;
        src: url();
    }
}

For a complete list of @font-face property then type:

@ff

Output:

  @font-face {
      font-family: 'FontName';
      src: url('FileName.eot');
      src: url('FileName.eot?#iefix') format('embedded-opentype'),
           url('FileName.woff') format('woff'),
           url('FileName.ttf') format('truetype'),
           url('FileName.svg#FontName') format('svg');
      font-style: normal;
      font-weight: normal;
  }

Trick#5: Background

To add a background, simply use bg abbreviation. You can combine it with bgi to get background-image, bgc for background-color and bgr for background-repeat.

Example 1:

body {
bg
}

Output:

body {
background: #000;
}

Example 2:

body {
bgi
}

Output:

body {
background-image: url();
}

Example 3:

body {
bgc
}

Output:

body {
background-color: #fff;
}

Example 4:

body {
bgr
}

Output:

body {
background-repeat: no-repeat;
}

Conclusion 

Emmet is a very huge time saving tool to streamline your development process. Trust us, use it for a few weeks and you will never want to code without it again. Now that you have seen our tips and tricks for Emmet, leave a few of your own under comment section.

That’s it for this article. Let us know if you liked this post and we will do more tips and tricks for ways to improve your workflow.

Similar articles you may like

• How to password protect a folder in Windows 10
• Linux Commands Cheatsheet: Basic Linux Commands
• Buy Windows 10 product key for the cheapest price in India
• How to Install and use Windows Subsystem for Linux (WSL) on Windows 10