Błyskawiczne pisanie kodu HTML z Emmet

Emmet to wtyczka do popularnych edytorów, która znacznie usprawnia pisanie kodu HTML. W tym artykule dowiesz się jak jej używać.

Jak działa Emmet?

Działanie wtyczki polega na przekształcaniu skrótów na odpowiadające fragmenty kodu. Krótka demonstracja:

W tym prostym przykładzie możesz zobaczyć jak szybko tworzy się strukturę HTML korzystając z Emmet.

Instalacja Emmet

Pierwszą rzeczą, którą musimy zrobić jest instalacja Emmet w edytorze kodu. Przejdź na tę stronę.

Na tej stronie możesz sprawdzić instrukcję instalacji Emmet dla większości popularnych edytorów. Ja korzystam z Atoma, więc poniżej znajdziesz instrukcję instalacji w tym edytorze. Jeśli korzystasz z innego, to instrukcję znajdziesz na podanej stronie.

Instalacja Emmet w Atom

Otwórz edytor. Z menu wybierz element File -> Settings (lub użyj skrótu CTRL + przecinek). Z menu bocznego wybierz opcję Install. W wyszukiwarce wpisz emmet i naciśnij Enter.

Interesuje nas pakiet emmet autorstwa emmetio. Kliknij INSTALL. Po kilku sekundach narzędzie powinno być już zainstalowane i gotowe do użycia.

Korzystanie z Emmet w HTML

Możemy teraz zacząć korzystać z Emmet w kodzie HTML. Utwórz nowy plik .html (może być całkowicie pusty). Przejdźmy do pierwszej funkcji.

Zagnieżdżanie

Zagnieżdżanie to podstawowa funkcja Emmet. Dzięki niemu możemy w jednej linijce wygenerować całą strukturę HTML dla dowolnego elementu strony (np. menu). Robimy to poprzez wstawienie znaku > po kolejnych elementach. Najłatwiej zobaczyć to na przykładzie.

header>nav>ul>li>a -> Tab

W tym przykładzie możesz zobaczyć jak bardzo przydatny jest Emmet. Wystarczyła jedna linia kodu i zatwierdzenie klawiszem Tab by wygenerować podstawową strukturę menu.

Rodzeństwo

Ta funkcja generuje elementy w układzie rodzeństwa (na tym samym poziomie zagnieżdżenia). Korzystamy z niej wpisując znak + po kolejnych elementach.

header+div+section+aside+footer -> Tab

W górę

Wpisując znak ^ możesz przejść o poziom wyżej w zagnieżdżeniu.

header>div>img^ul>li -> Tab

Klasy

Korzystając z Emmet możemy w prosty sposób dodać do elementów klasy. Robimy to stawiając znak . po znaczniku.

section.clients>div.container>div.client>img.client-logo -> Tab

Identyfikatory

Dodawanie identyfikatorów działa podobnie do klas. Używamy znaku #.

nav>ul#menu>li -> Tab

Pomnożenie

Bardzo przydatna funkcja, która pozwala na wygenerowanie dowolnej ilości elementów. Wystarczy wpisać *liczba elementów (np. *5).

ul>li.social-media*5>a -> Tab

Wstawianie tekstu

Ta funkcja umożliwia wstawienie tekstu wewnątrz elementu. Tekst wpisujemy pomiędzy nawiasy klamrowe { }.

ul>li{element}*5 -> Tab

Dodawanie atrybutu

Emmet umożliwia wstawianie atrybutów używając nawiasów kwadratowych [atrybut=”wartość”] np. [src=”logo.png”].

div>a[href="/home"]>img[src="logo.png" alt="logo"]

Grupowanie

Grupowanie przydaje się szczególnie w bardziej zaawansowanych zagnieżdżeniach. W tym przykładzie wygenerujemy znacznik footer. Wewnątrz niego umieścimy div z klasą .social-media zawierający nagłówek i listę. Na poziomie diva .social-media utworzymy kolejny div o klasie .copyright z paragrafem. Do grupowania znaczników używamy nawiasów kołowych ( ).

footer>(.social-media>h2+ul.social-list>li*5)+(.copyright>p) -> Tab

Lorem ipsum

Ta funkcja jest bardzo przydatna jeśli chcemy wygenerować wypełniający tekst. Wystarczy wpisać lorem10 (10 to liczba słów w wygenerowanym tekście).

article>h1+p*5>lorem10 -> Tab

Podstawowa struktura

Bardzo prosta komenda, która pozwala na wygenerowanie podstawowej struktury HTML. Korzystamy z niej wpisując znak !.

! -> Tab

Link

Przydatna funkcja przyśpieszająca wstawienie znacznika <link>.

link:css | link:import | link:favicon -> Tab

Automatyczne numerowanie

Wstawiając znak $ przed mnożeniem możemy wygenerować liczby.

section>div.element$*7 -> Tab

Wszystkie skróty dostępne w Emmet możesz znaleźć tutaj.

Przyzwyczajenie się do pisania w Emmet może potrwać kilka godzin, ale po tym czasie zauważysz jak bardzo przydatne jest to narzędzie. Poświęć kilka godzin na przestawienie się i zaoszczędź setki godzin w przyszłości 🙂

Zobacz też artykuł o wykorzystaniu Emmet w CSS.