Az Emmet egy ingyenes plugin, ami a legtöbb ismert szerkesztőhöz letölthető és arra hivatott, hogy meggyorsítsa a munkafolyamatokat.
A legfontosabb támogatott programok:
-Sublime
-Atom Text
-Coda
-Eclipse/Aptana
-TextMate 2
-Notepad++
-NetBeans
-Adobe Dreamweaver
Az Emmet css-szerű rövidítéseket alakít html kóddá. Segítségével villámgyorsan elkészíthetjük egy weboldal HTML struktúráját (természetesen nem csak erre jó, de most ezen a vonalon fogjuk vizsgálni).
A működése hihetelenül egyszerű, csak beírjuk a rövidítést és nyomunk egy "TAB"-ot (fontos, hogy a kurzor a rövidítés végén álljon).
Nézzük is meg a működését különböző példákon keresztül:
1. HTML elem "ID"-val:
div#megnevezes -> <div id="megnevezes"></div>
p#megnevezes -> <p id="megnevezes"></p>
span#megnevezes -> <span id="megnevezes"></span>
2. HTML elem "class"-al:
div.megnevezes -> <div class="megnevezes"></div>
p.megnevezes -> <p class="megnevezes"></p>
span.megnevezes -> <span class="megnevezes"></span>
3. Gyermek elemek létrehozása
div.megnevezes>p.leiras
<div class="megnevezes">
<p class="leiras"></p>
</div>
4. Testvér elemek létrehozása
div.megnevezes+div.leiras
<div class="megnevezes"></div>
<div class="leiras"></div>
Végezetül pedig készítettünk pár gifet amin élesben is látható, hogy mennyire hatékony eszközről van szó és milyen mértékben tudjuk vele meggyorsítani a kódolási folyamatokat.
HTML5 váz
navigáció
unordered list készítése adott elemekből villámgyorsan (CTRL+SHIFT+G billenytűkombinációval hívható elő a panel)
különböző rövidítések akcióban
