Emmet- html w parę chwil

Htmla używam niemal tak często jak polskiego albo angielskiego. Mimo swojej prostoty wymaga sporej ilości klepania i jego pisanie zajmuje więcej czasu niż wydawało by się to konieczne. Czemu by sobie tego nie uprościć? Emmet to plugin posiadający swoje implementacje w wielu popularnych edytorach kodu. Pozwala na tworzenie htmla w sposób przyjemny, intuicyjny oraz co najważniejsze- ekstremalnie szybki. Jeśli praca z szablonami zajmuje Ci więcej czasu niż powinno, ten post skierowany jest do Ciebie.

Przykład ogólny

Emmet w pewnym sensie to po prostu snippety- wpisujemy odpowiednie wyrażenie, a następnie za pomocą kombinacji klawiszy rozszerzamy je do postaci która nas interesuje. Gdyby na tym kończyły się funkcjonalności tego pluginu, nie było by powodu żebym się o nim rozpisywał. Emmet do swoich snippetów wprowadza dynamikę- pozwala snippety łączyć ze sobą za pomocą operatorów i otrzymywać dzięki temu różne wyniki będące nie pojedynczymi elementami, a całymi blokami kodu razem z atrybutami.

Prezentacja operatorów

Wspomniane wyżej operatory to zestaw znaczników znany chociażby z css. Jeśli wiecie jaką funkcję w css pełni ., #, >, [], niczym was nie zaskoczę. Emmet rozszerza ten zestaw o parę kolejnych. Ich użycie po chwili również staje się intuicyjne. Dajmy na przykład {}, oraz *- pierwszy pozwala na umieszczenie w znaczniku tekstu, a gwiazdka jest receptą gdy chcemy w jednym miejscu otworzyć zdefiniowaną ilość znaczników. Pełna lista operatorów dostępna jest w dokumentacji, która jest najlepszym miejscem żeby zacząć swoją przygodę z emmetem.

Praca z css

Przyznaję bez bicia że praca w css ostatnimi czasy nie jest moją domeną. Jednak mimo to chciałbym poświęcić chociaż jeden akapit na temat emmeta w stylowaniu strony. Rozszerza on snippety razem z wartościami, co jest wyjątkowo miłe. W celu zapoznania się z dostępnymi skrótami polecam cheat-sheet.