Emmet and Sublime Text
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 > 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:
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 🙂
(No Ratings Yet)
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.
