Wytwarzanie oprogramowania w znaczącej części składa się z procesu pisania kodu, niezależnie od stosowanego języka. Po pewnym czasie okazuje się jednak, że tworząc rozbudowane rozwiązania można dostrzec powtarzające się konstrukcje kodu. Na wyższym poziomie abstrakcji można do nich zaliczyć chociażby instrukcje sterujące czy pętle. Najprościej jest jednak zauważyć to podczas pracy z technologiami webowymi. W tym miejscu pojawia się problem z wydajnością danej osoby oraz czasem zmarnowanym na powtarzanie tych samych konstruktów. Czy nie lepiej byłoby zatem znaleźć sposób na ograniczenie ilości wpisywanych znaków o połowę lub nawet więcej, aby uzyskać ten sam rezultat?
Na tym etapie pragniemy zaznaczyć, że to dopiero wstęp do artykułu. Owszem, istnieją rozwiązania oferujące automatyczne uzupełnianie czy też podpowiadanie składni. Już najprostsze oprogramowanie pozwala osiągnąć takie efekty, najczęściej za pomocą użycia przycisku TAB, generującego sygnał o wartości 0x09 dla systemu operacyjnego. Mowa tutaj oczywiście o wierszach poleceń czy też wirtualnych terminalach (w niektórych przypadkach należy skorzystać z wymienionego przycisku dwukrotnie). Innym, bardzo popularnym rozwiązaniem oferującym podpowiadanie składni jest IntelliSense.
Emmet stanowi znacznie więcej niż podpowiadanie składni czy też zwyczajne, powtarzalne fragmenty kodu (które należy najpierw samemu zdefiniować). To zestaw narzędzi umożliwiających generowanie dynamicznych linii oraz wywoływanie na nich określonych akcji. Oprogramowanie Emmet jest zazwyczaj zintegrowane z popularnymi edytorami kodu. Na potrzeby tego wpisu wykorzystaliśmy rozwiązanie firmy Microsoft, czyli darmowy edytor kodu, również do zastosowań komercyjnych – Visual Studio Code. Bywa jednak, że używane przez nas oprogramowanie wspiera integrację z rozwiązaniem Emmet poprzez zewnętrzną wtyczkę, o tym w dalszej części wpisu. Poniższy zrzut ekranu przedstawia możliwości narzędzia Emmet w przypadku generacji szablonów HTML – zamiast 274 znaków, wystarczy 1 – !.
Oprócz przedstawionego przykładu oprogramowanie Emmet umożliwia również generację dynamicznej zawartości. Powiedzmy, że chcemy umieścić w kilku miejscach projektu następującą strukturę (tablica z jednym wierszem i trzema komórkami):
Zamiast powtarzać kod, wystarczy skorzystać ze skrótu table>tr>td*3, który następnie rozwija się przyciskiem TAB (zrzut ekranu poniżej). Jak można dostrzec, symbol > oznacza zawieranie się elementów, a * – ilość wystąpień określonego elementu. A co w sytuacji, kiedy chcielibyśmy umieścić znacznie bardziej rozbudowaną tabelę, o powiedzmy, 10 wierszach? Częściową odpowiedzią są dynamiczne szablony po stronie serwera, jednak w kontekście pracy z kodem – Emmet znacząco skraca pisany kod.
To tylko ułamek możliwości omawianego we wpisie rozwiązania. W rzeczywistości, podczas pracy z profesjonalnymi rozwiązaniami, wyrażenia Emmet są bardziej zaawansowane. Jednak gdy opanuje się ich podstawy, a tych na szczęście nie jest wiele – można sporo zyskać. Do podstawowych wyrażeń można zaliczyć przedstawione już symbole > oraz *. Zastosowanie ma również znak +. Oznacza występowanie elementów po sobie w określonej kolejności na tym samym poziomie hierarchii – żaden element nie jest ani nadrzędny, ani podrzędny. Oczywiście często zachodzi potrzeba cofnięcia się w hierarchii elementów jeszcze z poziomu wyrażeń Emmet. Do tego celu wykorzystuje się symbol ^. Na przykład, wyrażenie div+div>h1>span+em^^footer umieszcza oba elementy div i footer, a także span i em w tych samych hierarchiach, ponieważ podwójne użycie symbolu ^ przenosi kontekst do hierarchii elementów div.
Przedstawione możliwości zawierają się w części podstawowych grupy wyrażeń Emmet. Jeżeli chcesz dowiedzieć się więcej na ich temat oraz usprawnić swoją wydajność, polecamy oficjalną stronę w formie zgrabnej i zrozumiałem dokumentacji z gotowymi przykładami. Rozumiemy też, że nie każdy przywykł do rozwiązań firmy Microsoft, ponieważ na rynku istnieją inne edytory kodu niż Visual Studio Code. Emmet dostępny jest dla oprogramowania takiego jak Atom, Coda, Eclipse, Notepad++, Brackets, WebStorm oraz dla wielu innych produktów. Następnym razem, gdy przystąpisz do pisania kodu, może warto rozważyć zastosowanie wyrażeń Emmet oraz akcji, którym należałoby poświęcić osobny wpis.
