The Ultimate Plugin That Every Web Developer Should Have On Their Code Editor

4 min readJul 9, 2019

If you are a web developer and you haven’t ever heard or used Emmet, then you should go and install it right now ! well not before you finish reading this blog post first.

Basically Emmet is a plugin that makes typing HTML and CSS code way faster (and more fun) by using abbreviations of the tags names and properties.

Another thing to mention is that you can use this plugin in almost every code editor, whether it’s an offline editor that you have already installed on your computer such as VSCode, Sublime Text, Atom, Netbeans, Vim etc… or an online code editor like CodePen, JSFiddle, JSBin etc…

HTML With Emmet

The Exclamation Mark Abbreviation

An exclamation mark is enough to generate the basic html stuff that each html page has to include.

!
//equivalent to
<!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>
  <body>
  </body>
</html>

Tag Name Or First Letter(s)

Typing the tag name or just the first letter(s) without the less-than/greater-than sign is all what is needed to create the wanted element with its opening and closing tags.

Id And Class

You need to put # right after the element you want to create to add an id, and put . if you want to add a class, you can also add both if you wish to:

element#id.class1.class2
//equivalent to :
<element id="id" class="class1 class2"></element>

You can skip the element name in case the element you want to create is a div:

#id.cls
//equivalent to :
<div id="id" class="cls"></div>

Crucial Attributes, Optional Attributes And The Type Attribute

Crucial Attributes

Emmet will add automatically the attributes that are necessary for an HTML in order to work, like the href attribute for the anchor tag:

a
//equivalent to
<a href=""></a>

Optional Attributes

To add optional attributes, you need to place them inside of a pair of square brackets:

img[height="300px" width="300px"]
//equivalent to
<img alt="" height="300px" width="300px"] />

The Type Attribute

If your element happens to be an input which of course has a type attribute you can use a shorter syntax to create it by typing input:type :

input:b
//equivalent to
input[type="button id=""]
//equivalent to
<input type="button" id="" />

Text, Siblings And Nested Elements

Text

To fill a text element such an h tag or a p tag you need to put it (the inner text) between a couple of brackets, element{text}:

h1{Title}
//equivalent to
<h1>Title</h1>

Siblings

To put elements in a same level (one after the other) you have to put a + between each two elements:

section+section+section
//equivalent to
<section></section>
<section></section>
<section></section>

Nested Elements

To put an element inside another one you should put a > right after the parent and before the child element:

#parent>#child
//equivalent to
<div id="parent">
  <div id="child"></div>
</div>#grand-parent>#parent>#grand-child
//equivalent to
<div id="grand-parent">
  <div id="parent">
    <div id="grand-child></div>
  </div>
</div>

You can also group elements by wrapping them by a couple of parenthesis.

X Elements And Item’s Number

You can create x number of elements by typing only one command and also give each item a unique id/class by its order number using $:

ul>li*3
//equivalent to
<ul>
  <li></li>
  <li></li>
  <li></li>
<ul>
section>#id$*3
//equivalent to
<section>
  <div id="id1"></div>
  <div id="id2"></div>
  <div id="id3"></div>
</section

Lorem Ipsum

Generate random lorem text by typing loremX where X is the number of words. If you use the multiply operator on a <p> like so p>loremX*Y, it will generate a Y number of <span> having X number of words, if it’s an <ul> instead of a <p> ( ul>loremX*Y ) this will generate Y number of <li> having X number of words:

h1>lorem5
//equivalent to
<h1>Lorem ipsum dolor sit amet</h1>p>lorem3*3
//equivalent to
<p>
  <span>Lorem ipsum dolor</span>
  <span>Lorem ipsum dolor</span>
  <span>Lorem ipsum dolor</span>
</p>ul>lorem3*3
//equivalent to
<p>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</p>

CSS With Emmet

In CSS there’s 3 ways of adding a property and its value.

In some cases you only need to specify the first letter of the property’s name, the value then the unit:

m10px
//equivalent to
margin: 10pxp10px4px10px12px
//equivalent to
padding: 10px 4px 10px 12x

In other cases you need to use an abbreviation of the property name:

mxh
//equivalent to
max-height:miw
//equivalent to
min-width:

And finally there is this case where you need to use an abbreviation of the property’s name and then add a colon (sometimes without the colon) and the first letter of the value name:

pos:a
//equivalent to
position: absolutedf
//equivalent to
display: flex

Height, Width, Max/Min-Height, Max/Min-Width

Display

Position

Padding

You can check the Emmet cheat sheet for all theabbreviations needed for every HTML tag and CSS property.

Thanks for reading and I wish you happy coding.