Praca każdego font-end developera polega na pisaniu kodu, dużej ilości kodu. W wielu aspektach tej pracy pomagają dobre IDE, podpowiadając składnie, udostępniając skróty klawiszowe i optymalizując pracę. Dla innych zadowalające są nakładki na języki, pozwalające pisać szybciej (jak choćby Haml czy Sass).

W tym wpisie natomiast przedstawię jeszcze inny sposób na podniesienie efektywności w pracy. Mowa tutaj o Emmet, zestawie narzędzi do skrótowego pisania kodu HTML i CSS.

W czym Ci pomoże Emmet?

Emmet oferuje kilka różnych narzędzi wspomagających pracę, zarówno w HTML, jak i CSS. Zasada działania jest prosta – piszemy skrócony kod, kończymy linijkę, zatwierdzamy określonym skrótem klawiszowym i otrzymujemy wygenerowany kod HTML czy CSS.

Najważniejszą funkcjonalnością jest Expand Abbreviation, czyli możliwość pisanie kodu HTML na wzór selektorów CSS, jak również pisanie przy użyciu skrótów. A skoro selektory CSS są wszystkim znane to nikt nie będzie miał problemów z zapamiętywaniem nowej, magicznej składni (zapewne jQuery zawdzięczał też temu w dużej mierze swój sukces).

Kilka przykładowych zastosowań (powyżej kod, który musimy wpisać – poniżej, który zostanie wygenerowany):

• grupowanie i mnożenie elementów

  1	ul>(li>a)*10

  1 2 3 4 5 6 7 8 9 10 11 12

  <ul>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li> </ul>

• numerowanie mnożonych elementów

  1	ul>li.item-$*5

  1 2 3 4 5 6 7

  <ul>     <li class="item-1"></li>     <li class="item-2"></li>     <li class="item-3"></li>     <li class="item-4"></li>     <li class="item-5"></li> </ul>

• tworzenie sąsiednich elementów, dodawanie tekstów

  1	div.main>(header>h2)+(article>p*3)+(footer>p{All rights reserved.})

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <div class="main">     <header>         <h2></h2>     </header>     <article>         <p></p>         <p></p>         <p></p>     </article>     <footer>         <p>All rights reserved.</p>     </footer> </div>

• dodawanie ID, przechodzenie na rodzica (przydałaby się taka możliwość w CSS)

  1	div>h3#news^footer>p

  1 2 3 4 5 6

  <div>     <h3 id="news"></h3> </div> <footer>     <p></p> </footer>

• dodawanie atrybutów (Emmet automatycznie dodaje obowiązkowe atrybuty)

  1	a#idName.className[rel="nofollow"][customAttr="customValue"]{anchor}

  1	<a href="" id="idName" class="className" rel="nofollow" customAttr="customValue">anchor</a>

• budowa pojedynczych elementów w skróconej składni

  1

  textarea

  1	<textarea name="" id="" cols="30" rows="10"></textarea>

  inny przykład

  1

  bq>p

  1 2 3

  <blockquote>     <p></p> </blockquote>

  przykład dla CSS

  1 2 3

  div {     lg(left, #ddd 80%, #ccc) }

  1 2 3 4 5 6 7

  div {     background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.8, #ddd), to(#ccc));     background-image: -webkit-linear-gradient(left, #ddd 80%, #ccc);     background-image: -moz-linear-gradient(left, #ddd 80%, #ccc);     background-image: -o-linear-gradient(left, #ddd 80%, #ccc);     background-image: linear-gradient(left, #ddd 80%, #ccc); }

• generator Lorem Ipsum

  1	article>p*3>lorem30

  1 2 3 4 5

  <article>     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius impedit obcaecati et nisi assumenda mollitia! Voluptatibus vitae distinctio quisquam soluta adipisci dolore numquam id ab placeat sit praesentium qui sed.</p>     <p>Illo eum impedit dolorem repellat temporibus minus quisquam enim saepe quaerat excepturi ea incidunt facere commodi delectus illum quasi labore odit error quidem necessitatibus similique exercitationem vero modi maxime aperiam.</p>     <p>Possimus necessitatibus facilis et facere velit earum doloremque accusantium cumque corporis mollitia voluptas tempore saepe vel ratione expedita. Rem unde fuga quasi quam neque modi soluta error dignissimos eligendi repellat!</p> </article>

Myślę, że w powyższych przykładach nie trzeba niczego wyjaśniać – prościej już się nie dało. Do tego jak widać, oszczędność klawiatury jest znaczna.

Emmet oferuje jeszcze kilka fajnych skrótów, jak choćby:

• możliwość poruszania się w kodzie po drzewie DOM,
• możliwość przeskakiwania kursorem do pól, które możemy uzupełniać,
• zakomentowywanie wybranych fragmentów kodu,
• usuwanie elementów (bez dzieci),
• pobieranie wymiarów obrazka do elementu IMG (czy background-image dla CSS),
• kodowanie i dekodowanie statycznych obrazów do wersji inline (data:image/type;base64,XYZ).

Nie będę wchodził w szczegóły powyższych skrótów, bowiem część z nich mamy wbudowane w IDE i nie robią już takiego wrażenia (mimo iż nadal są bardzo przydatne, więc jeśli ktoś nie zna – nadrabiać!).

Jak zacząć używać Emmet?

Jeśli opisywane narzędzie Cię zainteresowało i chciałbyś zacząć go używać we własnych projektach to mam dla Ciebie dobrą wiadomość – nie powinieneś mieć z tym problemu. Emmet jest dostępny (za darmo) dla wszystkich popularnych IDE, jak choćby Sublime Text, Eclipse/Aptana, TextMate, Komodo Edit, Notepad++ czy nawet w wersji HTML dla elementu textarea. Dla niektórych programów wymagane będzie własnoręczne skonfigurowanie skrótów klawiszowych (jak choćby dla Komodo Edit).

Emmet dysponuje świetną dokumentacją z interaktywnymi przykładami – zdecydowanie polecam sprawdzić i się podszkolić! Również warto zapoznać się z pełną tablicą skrótów możliwych do wykorzystania z Emmet.

Jakie jest moje zdanie na temat Emmet? Chwilę po pierwszym „spotkaniu” od razu wylądował w moim IDE i sprawdza się doskonale. No, prawie doskonale – czasem formatuje składnie inaczej niż bym tego chciał.

Jeśli znasz szybszą i efektywniejszą metodę pisania kodu, podziel się w komentarzu! :-)