Už několikrát jsem se při práci v UI42 na různých webových aplikacích setkal s pojmem Zen Coding. Nikdy jsem se ale blíže nezabýval tím, co by mi tento nástroj mohl přinést a jak usnadňuje vývoj. Emmet je nástupce zmíněného Zen Codingu a PhpStorm umožňuje generování HTML a CSS právě pomocí této syntaxe.
O co jde, a že má smysl se tím zabývat, jsem se dozvěděl až při zkoumání funkcí poskytovaných PhpStormem. Naštěstí je to nástroj tak jednoduchý, že na první využití benefitů Emmetu stačí doslova pár minut.
Většina web developerů zná zkratky, které vám IDE-čko samo rozvine do předem nadefinovaných šablon. Například když napíšete “table” a po stisknutí enteru/tabulátoru vám editor tuto zkratku nahradí HTML kódem <table></table>.
Pokud není vývojář úplně líný, ví si upravit svůj editor, aby rovnou vygeneroval:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Problémem takovýchto statických šablon je, že pro efektivní práci s nimi je nutné nadefinovat si desítky vzorů a po čase si stejně nikdo takové množství zkratek nepamatuje. Emmet přišel s jednoduchou syntaxí, která nepotřebuje žádné ručně vložené definice a dynamicky vygeneruje téměř jakoukoliv HTML šablonu jen z jednoho řádku Emmet kódu.
Pro výše uvedený příklad tabulky stačí v PhpStormu napsat:
table>tr>td*2
Stisknutím tabulátoru máte v okamžiku kompletní HTML kód. Syntax v tomto případě využívá child selector “>” a operaci násobení. To by byl ale příliš jednoduchý příklad a malý důvod zařadit Emmet mezi své pracovní nástroje.
Příklad pro praxi
Určitě při usability testování často potřebujete vygenerovat celé části stránek, například u eshopu to může být naplněný nákupní košík. Jak dlouho byste psali následující 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>
Jak dlouho by asi trvalo vygenerovat ručně tento HTML kód? No minimálně několik minut. A také si umím představit, jak se při ctrl-c, ctrl-v zapomene na správný index každého řádku. S pomocí Emmet zkratek je vygenerování tohoto HTML otázka pár sekund.
table#cart>(thead>tr>th*2>lorem1)+(tbody>tr.row$*5>(td>lorem5)+td>a[onclick="return false;"][href=#]{delete row $$})
Vypadá tento příkaz příliš komplikovaně? Možná jsem hned začal pokročilým příkladem, ale pro každého, kdo zná CSS selektory je pochopení toho řádku triviální i když nikdy neviděl Emmet dokumentaci.
Z čeho se skládá uvedená zkratka:
- název elementu table a jeho ID cart,
- 2 bloky (thead, tbody), které jsou reprezentované výrazy ve dvou závorkách,
- hlavička tabulky s dvěma th elementy a jedním vzorovým slovem (lorem1),
- 5 řádků tabulky, každý má jinou třídu podle svého pořadového čísla (zapsáno pomocí $, pokud chcete 01, 02 tak $$),
- první sloupec obsahuje vzorový text s 5 slovy a druhý sloupec odkaz, který bude nositelem příkazu smazání dotyčného řádku.
V podstatě už teď z tohoto příkladu víme sestavit libovolnou html šablonu. Kromě již použitých selektorů má Emmet ještě jeden, a to znak pro návrat o úroveň výše: “^”.
Navíc Emmet obsahuje i definice pro tradiční kusy kódu, které se opakují velmi často a ne vždy se vám je chce psát ručně.
Zkratka html:5 vygeneruje kompletní šablonu pro html5 dokument, html:xt pro xhtml. Nebo link:favicon vloží kód pro favicon, který si já osobně nikdy nepamatuju a kopíruju si ho už roky z existujících webů.
Emmet také kromě HTML (a XSL) umožňuje expandovat i CSS vlastnosti, ale oproti možnostem pro HTML mi tato funkcionalita připadá méně užitečná. Příkaz w100 se rozbalí na width:100px a bg+ například na background: #fff url() 0 0 no-repeat;.
Více informací o syntaxi si nejrychleji najdete v Cheat Sheetu.
Podpora Emmet pluginu
Výhodou tohoto HTML pluginu je i to, že většina editorů, které ho podporují, vkládá do kusů generovaného kódu TabStop značky na místa, která se budou zaručeně ručně editovat. To usnadňuje následný pohyb v kódu, a víte přeskočit všemi místy bez toho, abyste se museli pohybovat šipkami nebo myší.
Emmet je podporován většinou významných editorů pro vývoj webu. Poběží vám bez problémů pokud vyvíjíte v Eclipse, Sublime, PsPad, TextMate, Komodo, Notepad++, PhpStorm, Vim a v mnoha dalších. Kdyby nebyl přímo integrován v PhpStormu, možná bych se ani k této šikovné pomůcce nikdy nedostal. Nezrychlí vám sice vývoj webů o 30 %, ale když už jste investovali pár minut do studia Emmetu tím, že jste dočetli můj blog až sem, určitě se vyplatí ho vyzkoušet a usnadnit si běžnou práci při psaní HTML. Většinu příkazů už znáte, nebo si je snadno doplníte na stránkách projektu http://docs.emmet.io/, kde jsou k příkladům publikované i přehledné videa.
