04 Jul 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.
|
1 |
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' |
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:
|
1 |
<a href=""></a> |
Also try: a:mail
|
1 |
<a href="mailto:"></a> |
And if you type a{Name here} it will show you:
|
1 |
<a href="">Name here</a> |
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:
|
1 2 3 4 5 |
<nav> <ul> <li><a href=""></a></li> </ul> </nav> |
You can even generate dummy text with Emmet. Try this: p*2>Lorem
It will generate two paragraphs with dummy text.
|
1 2 3 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos corporis reiciendis rerum voluptate soluta, maxime doloribus similique! Laboriosam maxime tempore dolores nulla repellendus sequi, ratione natus quo adipisci a eum.</p> <p>Porro itaque magnam, provident obcaecati voluptas pariatur neque blanditiis ab? Eaque necessitatibus consectetur, repudiandae amet consequatur, voluptatum accusantium dolores. Quas obcaecati harum architecto temporibus nulla odit dolorum beatae, laudantium inventore.</p> |
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.
