How to install and use Emmet for Sublime Text 2 (or any other code editor)

Trying to figure out how coders can code at high-speed but they wont share their secrets with you? Then they are probably using the Emmet plugin. In this quick guide I will explain you how you can install and use Emmet plugin.

Install and use Emmet

Installing plugins for Sublime Text 2 can be tricky. Use the guide below on how to install it. Already have it installed? Then skip to the ‘how to use Emmet‘ section.

How to Install
Step 1:

We want to open the console to enable installations of packages. To open the console click: View – Open Console or use the shortcut: CTRL + ´
Now that your console is open, you paste the following code and press enter.

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
Code language: PHP (php)

And after installation restart Sublime Text 2.

Step 2:

The next thing we want to do is open the command palette. For this you use the shortcut: CTRL + SHIFT + P
and type: install package and press Enter.

Now we can install packages, since we want to install Emmet, you simply type Emmet and you select: Emmet (ex-Zen coding) for Sublime Text package.

And that’s it. After selecting the package, Emmet will install and you’ll get a notification after it’s done.

How to use Emmet

First of all, start with creating a new document and save it for example as: index.html
Now let’s get started!

We start with HTML 5,
To do this, you type html:5 and press TAB
You can also easily add the CSS link rel by typing: link:css and pressing TAB
Also try: link:favicon , link:rss or script:src

This part alone already saved you some time, didn’t it?

You can also type: a and press TAB this will show as:

<a href=""></a>
Code language: HTML, XML (xml)

Also try: a:mail

 <a href="mailto:"></a>
Code language: HTML, XML (xml)

And if you type a{Name here} it will show you:

<a href="">Name here</a>
Code language: HTML, XML (xml)

You can use this for many other attributes.
You can also give a class or id such as: header.logo or header#logo

Now that you’ve tried this, we can try to combine things. Try: header>h1.logo>a{Name here}

Simple right? But we’re not done yet!
Let’s try to make 5 list items, simply type the following: ul>li*5

> Is used to nest elements inside each other. You can use > multiple times. It’s very useful to create navigation menus and lists. Try nav>ul>li>a this will result in:

<nav>
    <ul>
        <li><a href=""></a></li>
    </ul>
</nav>
Code language: HTML, XML (xml)

You can even generate dummy text with Emmet. Try this: p*2>Lorem
It will generate two paragraphs with dummy text.

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, illum ut temporibus vitae quidem laboriosam earum quisquam officia maxime officiis quibusdam! Laboriosam necessitatibus eos provident illum vero voluptates? Molestiae, quia!</p>
<p>Hic perferendis dolorum sit ut consequatur odio amet, eius, explicabo sint eos et soluta harum doloribus quam illo voluptas voluptatem, quibusdam fuga. Deleniti sequi minus pariatur, commodi voluptas consequuntur quidem!</p>
Code language: HTML, XML (xml)

Also try to generate only 10 words or 50 words, therefore use: p>Lorem10 or p>Lorem50

Now you have the ability to set up your code in no-time! Eager to learn more? Check out the documentation on Emmet.io.