Emmet and Sublime Text

written by devangelist on December 25, 2014 in HTML5 with no comments

No matter what text editor is being used – the chance that there is a Emmet Pluign for that editor is quite high. If that’s the case, then you will love it!

Install Emmet in SublimeText

The first thing to do in order to install Emmet in SublimeText is to install the Package Control for SublimeText.
Once the Package manager is installed, just copy the code from the website into your SublimeText Console (ctrl+` or View > Show Console).

After restarting SublimeText, Emmet can be installed trough the Package Control – ctrl + shift + p (Windows, Linux) or cmd + shift + p (OS X) – via the install package command.

Introduction to Emmet

Every developer knows that typing HTML code takes a lot of unnecessary time. Emmet will help you with snippets and abbreviations to significantly accelerate the writing of HTML and CSS code:

div.container

By pressing the Tab-key:

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

This abbreviation is even shorter with .container – since Emmet implicitly assumes a div element.

This allows forming all kinds of constructs: from children to siblings, numbering to own attributes. For example, by using a html:5 or ! command you will get a fully HTML5 Document generated:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>
</body>
</html>

There are plenty of other abbreviations. To cite a few examples:

Shortcut Result
            script:src
        
            <script src=""></script>
        
            link:rss
        
            <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
        
            input:hidden
        
            <input type="hidden" name="">
        
            table+
        
<table>
    <tr>
        <td></td>
    </tr>
</table>
        
            select+
        
<select name="" id="">
    <option value=""></option>
</select>
        


Child / Parent / Sibling elements with Emmet

With Emmet it’s a breeze to create sub-elements of a list:

ul>li*3

Becomes:

<ul>
     <li></li>
     <li></li>
     <li></li>
</ul>

While the &gt character indicates that they are child elements, the result can be duplicated many times with a *3 shortcut. The current index can be accessed via $:

ul>li.itemClass$3*

Becomes:

<ul>
     <li class="itemClass1"></li>
     <li class="itemClass2"></li>
     <li class="itemClass3"></li>
</ul>

To reach the parent element, a ^ is used:

div>ul>li*3^div.container

Will result into:

<div>
     <ul>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <div class="container"></div>
</div>

On the same level, an element can be added via +

div>label+button

Becomes:

<div>
     <label for=""></label>
     <button></button>
</div>

Custom Text / Attributes in Emmet

Using {} any text can be specified:

div>label{Name}+input+button{Submit}

Becomes:

<div>
     <label for="">Name:</label>
     <input type="text">
     <button>Submit</button>
</div>

And also own attributes are easily possible with [for="name"]:

form>label[for="name"]{Name:}+input#name+button{Submit}

Becomes:

<form action="">
    <label for="name">Name:</label>
    <input type="text" id="name">
    <button>Submit</button>
</form>

Grouping

If constructs – for example with many Child / Parent specifications – are too complex, they can be grouped with parentheses:

div>(ul>li*3)+h2+(ul>li*4)

Becomes:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h2></h2>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Enter Abbreviation

If multiple rows are selected in the editor, they can be wrapped inside other Elements with the enter Abbreviation command (ctrl + alt + enter). For example in a navigation:

Home
About
Contact

Press ctrl+alt+enter and type:

div>ul>li*>a[title=$#]{$#}

In SublimeText you will get the following result:

<div>
    <ul>
        <li><a href="" title="Home">Home</a></li>
        <li><a href="" title="About">About</a></li>
        <li><a href="" title="Contact">Contact</a></li>
    </ul>
</div>

As already mentioned above, the elements can be repeated with *, whereas $# will fill in the current element.

All in all

Even a complete HTML5 page, as the following example shows, can be generated via the abbreviations and snippets shown:

Sublime Text - Emmet plugin

html:5>(header>nav>ul>li*4>a)+(.content>article*2>h1+p>lorem15^aside.sidebar)+(footer>p{Copyright 2014})+script:src

Becomes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <article>
            <h1></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque assumenda id adipisci amet earum, tenetur?</p>
            <aside class="sidebar"></aside>
        </article>
        <article>
            <h1></h1>
            <p>Dolorem odio ab dicta minus, qui molestias! Asperiores delectus sint debitis illum numquam tempore veritatis.</p>
            <aside class="sidebar"></aside>
        </article>
    </div>
    <footer>
        <p>Copyright 2014</p>
    </footer>
    <script src=""></script>
</body>
</html>

Now you’ve learned the basics, but there are plenty more helpful abbreviations and snippets on the Emmet Cheat Sheat.

What kind of tricks are you using with Emmet? Write it in the comments :)

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

About the Author

Roberto Bez is a passionate Webdeveloper and TechLead at HolidayCheck. For Roberto development is not only work or a job, but a great motivation and a new challange every day. Everything new and geeky, from new web-technologies to all kind of databases – he tries to introduce it in the daily development.