Už viackrát som sa pri práci v UI42 na rôznych webových aplikáciach stretol s pojmom Zen Coding. Nikdy som sa ale bližšie nezaoberal tým, čo by mi tento nástroj mohol priniesť a ako uľahčuje vývoj. Emmet je nástupca spomínaného Zen Codingu a PhpStorm umožňuje generovanie HTML a CSS práve pomocou tejto syntaxe.
O čo ide, a že má zmysel sa tým zaoberať, som sa dozvedel až pri skúmaní funkcií poskytovaných PhpStormom. Našťastie je to nástroj tak jednoduchý, že na prvé využitie benefitov Emmetu stačí doslova pár minút.
Väčšina web developerov pozná skratky, ktoré vám IDE-čko samo rozvinie do vopred nadefinovaných šablón. Napríklad ak napíšete “table” a po stlačení entra/tabulátora vám editor túto skratku nahradí HTML kódom <table></table>.
Ak nie je vývojár úplne lenivý, vie si upraviť svoj editor, tak aby rovno vygeneroval:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Problémom takýchto statických šablón je, že pre efektívnu prácu s nimi je nutné nadefinovať si desiatky vzorov a po čase si aj tak nikto nebude také množstvo skratiek pamätať. Emmet prišiel s jednoduchou syntaxou, ktorá nepotrebuje žiadne ručne vložené definície a dynamicky vygeneruje takmer akúkoľvek HTML šablónu len z jedného riadku Emmet kódu.
Pre horeuvedený príklad tabuľky stačí v PhpStorme napísať:
table>tr>td*2
Stlačením tabulátora máte v okamihu kompletný HTML kód. Syntax v tomto prípade využíva child selector “>” a operáciu násobenia. To by bol však príliš jednoduchý príklad a malý dôvod zaradiť Emmet medzi svoje pracovné nástroje.
Príklad pre prax
Určite pri usability testovaní často potrebujete vygenerovať celé časti stránok, napríklad pri eshope to môže byť naplnený nákupný košík. Ako dlho by ste písali nasledujúci kód?
<table id="cart">
<thead>
<tr>
<th>Lorem.</th>
<th>Est.</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td>Lorem ipsum dolor sit amet.</td>
<td><a onclick="return false;" href="#">delete row 01</a></td>
</tr>
<tr class="row2">
<td>Adipisci nostrum quae quo tempora.</td>
<td><a onclick="return false;" href="#">delete row 02</a></td>
</tr>
<tr class="row3">
<td>Facilis magnam rerum sunt vero!</td>
<td><a onclick="return false;" href="#">delete row 03</a></td>
</tr>
<tr class="row4">
<td>Animi neque reprehenderit vel voluptatibus.</td>
<td><a onclick="return false;" href="#">delete row 04</a></td>
</tr>
<tr class="row5">
<td>Alias amet autem consectetur pariatur.</td>
<td><a onclick="return false;" href="#">delete row 05</a></td>
</tr>
</tbody>
</table>
Ako dlho by asi trvalo vygenerovať ručne tento HTML kód? No minimálne niekoľko minút. A tiež si viem predstaviť ako sa pri ctrl-c, ctrl-v zabudne na správny index každého riadku. S pomocou Emmet skratiek je vygenerovanie tohto HTML otazka par sekúnd.
table#cart>(thead>tr>th*2>lorem1)+(tbody>tr.row$*5>(td>lorem5)+td>a[onclick="return false;"][href=#]{delete row $$})
Vyzerá tento príkaz príliš komplikovane? Možno som hneď začal pokročilým príkladom, ale pre každého, kto pozná CSS selektory je pochopenie toho riadku triviálne aj keď nikdy nevidel Emmet dokumentáciu.
Z čoho sa skladá uvedená skratka:
- názov elementu table a jeho ID cart,
- 2 bloky (thead, tbody), ktoré su reprezentované výrazmi v dvoch zátvorkách,
- hlavička tabuľky s dvoma th elementami a jedným vzorovým slovom (lorem1),
- 5 riadkov tabuľky, každý má inú triedu podľa svojho poradového čísla (zapísane pomocou $, ak chcete 01, 02 tak $$),
- prvý stĺpec obsahuje vzorový text s 5 slovami a druhý stlpec link, ktorý bude nositeľom príkazu zmazania dotyčného riadku.
V podstate už teraz z tohto príkladu vieme vyskladať ľubovolnú html šablónu. Okrem už použitých selektorov má Emmet ešte jeden, a to znak pre návrat o úroveň vyššie: “^”.
Navyše Emmet obsahuje aj definície pre tradičné kusy kódu, ktoré sa opakujú veľmi často a nie vždy sa vám ich chce písať ručne.
Skratka html:5 vygeneruje komplet šablónu pre html5 dokument, html:xt pre xhtml. Alebo link:favicon vloží kód pre favicon, ktorý si ja osobne nikdy nepamätám a kopírujem si ho už roky z exitujúcich webov.
Emmet taktiež okrem HTML (a XSL) umožňuje expandovať aj CSS vlastnosti, ale oproti možnostiam pre HTML mi táto funkcionalita pripadá menej užitočná. Príkaz w100 sa rozbalí na width:100px a bg+ napríklad na background: #fff url() 0 0 no-repeat;.
Viac informácií o syntaxi si najrýchlejšie nájdete v Cheat Sheete.
Podpora Emmet pluginu
Výhodou tohto HTML pluginu je aj to, že väčšina editorov, ktoré ho podporujú, vkladá do kusov generovaného kódu TabStop značky na miesta, ktoré sa budú zaručene ručne editovať. To uľahčuje následný pohyb v kóde, a viete preskákať všetkými miestami bez toho aby ste sa museli presúvať šipkami alebo myšou.
Emmet je podporovaný väčšinou významných editorov pre vývoj webu. Pobeží vám bez problémov ak vyvíjate v Eclipse, Sublime, PsPad, TextMate, Komodo, Notepad++, PhpStorm, Vim a v mnohých iných. Ak by nebol priamo integrovaný v PhpStorme, možno by som sa ani k tejto šikovnej pomôcke nikdy nedhodlal. Nezrýchli vám síce vývoj webov o 30 %, ale keďže ste už investovali pár minút do štúdia Emmetu tým, že ste dočítali môj blog až sem, určite sa oplatí vyskúšať ho a uľahčiť si bežnú prácu pri písani HTML. Väčšinu príkazov už poznáte, alebo si ich ľahko doplníte na stránkach projektu http://docs.emmet.io/, kde sú k príkladom publikované aj prehľadné videá.
