How to install and use Emmet for Sublime text 2

How to install and use Emmet for Sublime Text 2

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 for Sublime Text 2.
In this quick guide I will explain you how you can install and use Emmet plugin.

Install and use Emmet

This tutorial is for Sublime Text 2, It’s one of my favorite coding tools. So before we start with the tutorial, download Sublime Text 2 first.

Once installed you open Sublime Text 2.
You can either play around with this tool to get to know how it works or you can keep following this quick tutorial to install the Emmet plugin and code at high-speed.

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.

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

emmet HTML 5 document

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

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

Also try: a:mail

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

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

Emmet example a, img, header

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

Emmet make 5 list items

‘>’ 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:

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

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.

Emmet Quick site