Nie słyszałeś jeszcze o emmet? Czas go poznać.

Dość dawno temu pisałem o narzędziu Zen Coding, które niesamowicie ułatwia nam pracę z HTML-em, i bez którego ja nie wyobrażam sobie tworzenia tego typu dokumentów. Zen Codingu już jednak niema, ale to nie oznacza, że straciłem sens życia. Poznajmy naszego dzisiejszego gościa, czyli Emmet, który jest młodszym bratem wspomnianego narzędzia.

Emmet, czym ty w ogóle jesteś?

Emmet to stworzone dla web-developerów narzędzie, a bardziej plugin do ich edytorów, który ciąg znaków, przypominający budową selektory w CSS, zamienia w rozbudowaną strukturę HTML. Dla przykładu poniższy ciąg znaków:

ul#menu>li.item-$*5>a[href=#]{Menu link $}

… po wciśnięciu klawisza tab zamieni się na:

<ul id="menu">
	<li class="item-1"><a href="#">Menu link 1</a></li>
	<li class="item-2"><a href="#">Menu link 2</a></li>
	<li class="item-3"><a href="#">Menu link 3</a></li>
	<li class="item-4"><a href="#">Menu link 4</a></li>
	<li class="item-5"><a href="#">Menu link 5</a></li>
</ul>

Emmet potrafi też pomóc w pisaniu CSS. Fajną rzeczą jest np. skrót lg(…), który na wyjściu daje nam definicje gradientu dla wszystkich przeglądarek.

lg(top, red, blue)
background-image: -webkit-gradient(linear, 0 0, 0 100%, 
                   from(red), to(blue));
background-image: -webkit-linear-gradient(red, blue);
background-image: -moz-linear-gradient(red, blue);
background-image: -o-linear-gradient(red, blue);
background-image: linear-gradient(red, blue);

Problemem przy CSS jest jednak to, że skrótów do zapamiętania jest zbyt wiele, co znacznie utrudnia korzystanie z niego. Emmet postarał się jednak rozwiązać ten problem, wprowadzając fuzzy search. Działa to tak, że za każdym razem kiedy podamy niezdefiniowany skrót, Emmet postara się znaleźć najbardziej zbliżoną do niego definicję. Dla przykłady, aby otrzymać overflow: hidden, możemy użyć skrótu ov:h, który jest właściwy, ale również ov-h, ovh lub nawet oh, które de facto nie występują w dokumentacji.

Akcje

Emmet to nie tylko skróty i klawisz tab. To również wiele bardzo przydatnych akcji. Dla przykładu, możemy w łatwy sposób poruszać się pomiędzy specjalnymi punktami edycji, dodawanymi przez Emmet pomiędzy tagami lub w miejscu na wartość atrybutu. Innym przykładem jest wzbogacanie tagu img o atrybuty width i height, pobrane automatycznie z dołączonego pliku używając klawiszy Shift+Ctrl+U (Shift+Ctrl+i w Sublime Text 2). Więcej akcji znajdziecie w dokumentacji:
http://docs.emmet.io/actions

Składnia, dokumentacja, taka sytuacja

A propo dokumentacji. Celowo piszę tutaj szczątkowo o tym co potrafi to narzędzie, bowiem Emmet w porównaniu do swojego poprzednika ma zdecydowanie lepszą i bardziej przystępną dokumentację. Znaleźć tam można opis wszystkich możliwości tego narzędzia wraz z interaktywnymi przykładami. Nie ma sensu bym to powielał, dodatkowo w gorszej formie. Link poniżej:

http://docs.emmet.io
http://docs.emmet.io/cheat-sheet/

Podsumowanie

Narzędzie jest warte uwagi i polecam je każdemu, o ile w ogóle istnieje jeszcze ktoś, kto o nim nie słyszał. To w jaki sposób ułatwia ono prace jest nie do opisania. Ja osobiście nie potrafię pracować w środowisku gdzie Emmeta nie ma (tak, w notatniku bym sobie nie poradził). Dla mnie jest po prostu must have.