Pół godziny na złożenie prostego arkusza. Dziesięć minut na tabelę z pięciu wierszy. Godzina na landing page z powtarzalnymi kartami. I to bez poprawek, po prostu wpisać tagi, nie pominąć zamykającego, nie pomylić zagnieżdżenia.

Brzmi znajomo? Rutyna dusi tempo, a wzrok tępieje przy trzecim dziesiątku <tr><td>...</td></tr>. Chciałoby się napisać jedną linijkę, nacisnąć przycisk i dostać gotowy DOM.

Emmet robi dokładnie to. Wtyczka rozwija krótkie wyrażenia przypominające CSS w czysty HTML w ułamku sekundy. A zespół epixx.github.io spakował składnię w interaktywny symulator z weryfikacją na żywo, który przechodzi się w godzinę i nie wymaga instalacji.

💡 Szybki przegląd:

• Czym jest Emmet, skąd się wziął i dlaczego jest domyślnie wbudowany w VS Code
• Przejście krok po kroku przez symulator Epixx: jak skonstruowane są zadania i wbudowany kurs
• Kluczowe operatory składni na rzeczywistym przykładzie: tabela z trzech wierszy za pomocą jednej abrewiacji
• Zasoby do pogłębienia wiedzy: dokumentacja, screencasty i ściągawka

Czym jest Emmet i dlaczego wciąż jest w użyciu

Emmet to wtyczka do edytorów kodu, która przekształca skróty w pełnoprawny HTML lub CSS. Wpisują Państwo ul>li*5>a, naciskają Tab i otrzymują listę nieuporządkowaną z pięciu elementów z odnośnikami. Żadnego kopiowania i wklejania, żadnego ręcznego wypisywania każdego tagu.

Projekt wystartował w 2008 roku jako Zen Coding (autor: Siergiej Czikujonok), później został przemianowany na Emmet i dziś stał się standardem szybkiego kodowania szablonów. Od 2022 roku wtyczka jest wbudowana w VS Code „od ręki": otwierają Państwo edytor i od razu pracują, instalacja nie jest potrzebna. Jest też dostępna dla Sublime Text, WebStorm, PHPStorm i innych edytorów przez marketplace na stronie Emmet.

Główna przewaga nad klasycznymi snippetami to dynamiczne rozwijanie. Snippet jest sztywno zaszyty i nie zmienia się w locie. Wyrażenie Emmet można dobudować, przebudować, owinąć wokół istniejącego kodu. Abrewiacja table>tr*3>td>img+p+a da różne rezultaty przy zmianie mnożnika *3 na *5 lub przy dodaniu klasy .footer-row, i to wszystko jedną linijką, bez przedefiniowywania szablonów.

Emmet potrafi również:

• szybko przeskakiwać między węzłami (Go to Edit Point);
• owijać zaznaczony kod nowym tagiem (Wrap with Abbreviation);
• balansować zaznaczenie, rozszerzać je lub zwężać do tagu nadrzędnego lub podrzędnego;
• generować „Lorem Ipsum" dowolnej długości;
• inkrementować liczby w powtarzalnych elementach przez $.

Symulator Epixx: praktyka zamiast wykładów

Symulator Epixx to kurs internetowy, który prowadzi od zera do pewnego opanowania składni. Żadnej instalacji: otwierają Państwo stronę w przeglądarce i od razu biorą się za zadania.

Mechanika jest prosta. Po lewej stronie pojawia się teoria i wzór rezultatu. Po prawej pole wprowadzania dla wyrażenia Emmet. Piszą Państwo abrewiację, naciskają „Sprawdź" i widzą wygenerowany HTML. Zgadza się ze wzorem, przechodzą Państwo do następnego zadania. Nie, próbują ponownie, aż się uda.

Kurs jest podzielony na logiczne bloki:

• podstawowe elementy i zagnieżdżanie;
• operatory mnożenia i numeracji;
• klasy, identyfikatory i atrybuty;
• węzły tekstowe i „Lorem Ipsum";
• przejście na poziom wyżej (^) i grupowanie.

Na każde zadanie przypada dokładnie tyle teorii, ile potrzeba do jego wykonania. To nie wykład, a siłownia: czytają Państwo minimum, piszą maksimum. Błąd nie jest karany, po prostu wprowadzają Państwo nowe wyrażenie i od razu widzą, co się zmieniło.

Równolegle z symulatorem proszę mieć otwarty edytor z obsługą Emmet (VS Code, Sublime) i powtarzać techniki na rzeczywistym pliku HTML. Pamięć mięśniowa działa szybciej, gdy palce zapamiętują skróty, a nie tylko oczy.

Składnia Emmet: od prostego do złożonego

Przeanalizujmy kluczowe operatory na przykładzie konkretnego zadania. Potrzebują Państwo tabeli z trzech wierszy, w każdej komórce obraz, akapit i odnośnik.

Zamiast ręcznie wpisywać każdy tag i trzykrotnie kopiować wiersze, piszą Państwo jedną linijkę:

1
table>tr*3>td>img+p+a

Po naciśnięciu Tab (lub Ctrl+E, zależnie od edytora) Emmet rozwija ją w gotową strukturę:

1
<table>
2
  <tr>
3
    <td>
4
      <img src="" alt="" />
5
      <p></p>
6
      <a href=""></a>
7
    </td>
8
  </tr>
9
  <tr>
10
    <td>
11
      <img src="" alt="" />
12
      <p></p>
13
      <a href=""></a>
14
    </td>
15
  </tr>
16
  <tr>
17
    <td>
18
      <img src="" alt="" />
19
      <p></p>
20
      <a href=""></a>
21
    </td>
22
  </tr>
23
</table>

A teraz o operatorach:

• >, element potomny. table>tr oznacza „tr wewnątrz table".
• *N, mnożenie. tr*3 da trzy wiersze.
• +, sąsiedni element tego samego poziomu. img+p+a, trzy elementy jeden po drugim wewnątrz tego samego rodzica.
• ^, przejście poziom wyżej. Ratuje, gdy trzeba wyskoczyć z głębokiego zagnieżdżenia bez nowego wyrażenia.
• $, autoinkrementacja. li.item$*3 da <li class="item1"> i dalej po kolei aż do item3.

Do atrybutów proszę używać nawiasów kwadratowych. Tabelę z cellpadding i cellspacing zapisuje się tak:

1
table[cellpadding=0 cellspacing=0]>tr*3>td

Węzeł tekstowy, nawiasy klamrowe: a{Нажми сюда} rozwinie się w <a href="">Нажми сюда</a>. Do szybkiego generowania ryby wystarczy słowo lorem, Emmet wygeneruje akapit wypełniający. lorem10, dokładnie 10 słów.

Wielu specjalistów od składu używa Emmeta nie tylko do początkowej struktury, ale także do opakowywania istniejącego kodu: zaznaczają Państwo blok, komenda Wrap with Abbreviation, wpisują tag opakowujący. Gotowe, bez ręcznego przeciągania znacznika zamykającego.

Gdzie uczyć się dalej: sprawdzone zasoby

Po ukończeniu symulatora Epixx warto utrwalić umiejętność na rzeczywistych zadaniach i podejrzeć techniki u doświadczonych deweloperów. Zestaw materiałów, od oficjalnej dokumentacji po screencasty.

• Oficjalna dokumentacja Emmet, pełny podręcznik składni, akcji i konfiguracji. Od niej proszę zaczynać, gdy potrzebna jest precyzyjna odpowiedź na temat konkretnego operatora lub filtra.
• Screencast CSS-Tricks: „Emmet is Awesome", krótkie wideo z technikami w czasie rzeczywistym od jednego z najbardziej autorytatywnych zasobów społeczności frontendowej.
• Smashing Magazine: Goodbye Zen Coding, Hello Emmet, historyczny artykuł o przejściu od Zen Coding do Emmeta. Przydatny do zrozumienia filozofii narzędzia.
• Atomic Object: Easy HTML with Emmet, praktyczne wprowadzenie z naciskiem na codzienne zastosowanie, a nie na podręcznik składni.

A do szybkiego powtórzenia składni przed pracą proszę mieć pod ręką ściągawkę Emmet, wszystkie operatory na jednym ekranie.

Wideo: Emmet w 15 minut

Jeśli format tekstowy Państwu nie odpowiada, proszę obejrzeć screencast od Web Dev Simplified. Kyle pokazuje proces pracy na rzeczywistych przykładach: od prostych tagów do złożonego zagnieżdżenia z klasami i węzłami tekstowymi.

⁉️🤔 Często zadawane pytania

Czy Emmet trzeba instalować osobno?

W VS Code nie. Od 2022 roku Emmet jest częścią standardowej dystrybucji edytora i działa od razu po uruchomieniu. W przypadku Sublime Text, WebStorm, PHPStorm i innych edytorów należy zainstalować wtyczkę z marketplace'u, zakładka „Download" na oficjalnej stronie. VS Code używa składni Emmet 2.0, która jest nieco bardziej restrykcyjna wobec spacji w wyrażeniach. Jeśli skrót nie rozwija się, proszę upewnić się, że plik jest zapisany jako HTML, a nie zwykły tekst.

Czy można używać Emmeta do CSS?

Tak. Skróty takie jak m20 rozwiną się do margin: 20px;, a bdrs5 do border-radius: 5px;. Emmet generuje również prefiksy dostawców (-webkit-, -moz-) i gradienty. Pełna lista skrótów znajduje się w sekcji „CSS Abbreviations" oficjalnej dokumentacji.

Czym Emmet różni się od zwykłych snippetów?

Snippet to sztywny szablon: dostaje Pan to, co zostało w nim zapisane. Wyrażenie Emmeta jest dynamiczne: zmienia Pan mnożnik, dodaje klasę, opakowuje innym tagiem, a wynik przebudowuje się na bieżąco. Snippet dla table>tr*3>td nie da table>tr*7>td bez tworzenia nowego szablonu, a Emmet da to natychmiastową zmianą jednej cyfry.

Po co jest trener Epixx, skoro jest dokumentacja?

Dokumentacja wyjaśnia „co", a trener ćwiczy „jak". Po ukończeniu kursu palce same wpisują ul>li.item$*5>a{Пункт $} bez sięgania po mysz. Różnica jest taka, jak między podręcznikiem do jazdy a godzinami za kierownicą: teoria jest przydatna, ale umiejętność daje tylko praktyka.

Czy Emmet działa z JSX i szablonami?

Tak. VS Code obsługuje Emmeta w plikach JSX, proszę włączyć opcję emmet.includeLanguages i powiązać javascriptreact z html. Dla Vue i Angular również istnieją odpowiednie ustawienia. Klasy przez kropkę i identyfikatory przez krzyżyk działają jak zwykle.

Czy w 2026 roku istnieją alternatywy dla Emmeta?

Bezpośrednich alternatyw z tym samym podejściem „krótki ciąg znaków, gotowa struktura" nie ma. Narzędzia AI, takie jak Copilot i ChatGPT, generują kod na podstawie opisu, ale wymagają sformułowania zapytania i weryfikacji wyniku. Emmet jest szybszy do rutynowego tworzenia znaczników: cztery naciśnięcia klawiszy i ma Pan gotową strukturę z dziesięciu zagnieżdżonych tagów z klasami i atrybutami. Narzędzia te nie konkurują ze sobą, lecz się uzupełniają.

Opanować w godzinę, zwrot w tydzień

Emmet nie wymaga dogłębnej nauki. Pełne przejście trenera Epixx zajmuje od trzydziestu minut do godziny. Proszę powiesić ściągawkę na drugim monitorze i wypróbowywać każde wyrażenie w rzeczywistym projekcie. Po kilku dniach przestanie Pan zauważać, że korzysta z Emmeta, stanie się on przedłużeniem klawiatury.

Jeśli koduje Pan maile HTML, landing page'e lub komponenty interfejsów, godzina nauki zwróci się już do końca pierwszego tygodnia. A trener Epixx sprawi, że ta godzina będzie maksymalnie intensywna. Proszę otworzyć epixx.github.io/emmet i spróbować pierwszego zadania od razu, instalacja nie jest potrzebna, wynik widać natychmiast.