close
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:

demo emmet

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ę.

emmet download

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.

install emmet

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

emmet installed

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.

zagniezdzanie

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.

rodzenstwo

W górę

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

wgore

Klasy

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

klasy

Identyfikatory

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

id

Pomnożenie

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

mnozenie

Wstawianie tekstu

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

tekst

Dodawanie atrybutu

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

atrybuty

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 ( ).

grupowanie

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).

lorem

Podstawowa struktura

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

podstawowa struktura

Link

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

link

Automatyczne numerowanie

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

numerowanie

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.

Tags : emmet
  • Mike_P77

    Świetnie pokazałeś możliwości tymi GIFami. Najlepsze jest wrażenie osoby, która nie zna Emmet’a i widzi pierwszy raz na żywo jak ktoś sprawnie tego używa 😉

  • Fakt Emmet jest świetny. Myślę nawet, że gdyby powiedzieć, że Emmet powinien być obowiązkowym narzędziem frontendowców, to nie byłoby to przesadą. Nawet jeżeli ktoś będzie korzystał jedynie z 10% jego możliwości 🙂