Emmet, czyli przyjemne pisanie kodu

Autor: Paweł Szroeder

Jeśli pisanie kodu to dla Ciebie codzienność, a HTML i CSS zjadasz na śniadanie – czas poznać fantastyczny dodatek Emmet. Jego obsługa nie wymaga żadnej dodatkowej wiedzy, a korzyści jakie ze sobą niesie widoczne są od razu po instalacji.

 

Emmet, czyli przyjemne pisanie kodu

 

Dla kogo Emmet?

Projektujesz strony internetowe od A do Z? Teraz zastanów się ile razy dziennie wpisujesz te same właściwości CSS, czy też znaczniki HTML. Czasami powtarzasz tę czynność setki, jak nie więcej razy. Wpisywanie każdego słowa litera po literze jest naprawdę żmudne, a co najważniejsze – zabiera sporo czasu. Czy pisanie kodu nie byłoby przyjemniejsze i szybsze jeśli, np. zamiast całej właściwości padding-top wpisywalibyśmy po prostu pp? Oczywiście, że tak! I z pomocą przychodzi tu własnie Emmet.

 

Instalacja i korzystanie

Emmet jest narzędziem, które działa jako dodatek dla edytorów tekstowych kodu. Można go wykorzystywać z wieloma aplikacjami, do najbardziej popularnych należą Sublime Text, Atom, Net Beans, Brackets, CodaNotepad++, czy też Adobe Dreamweaver. W zależności od programu jaki używamy instalacja może przebiegać w rózny sposób. Wszystko oczywiście jest opisane bardzo dokładnie krok po kroku na oficjalnej stronie dodatku. W moim przypadku jest to Sublime Text, czyli cała instalacja odbywa się przez Package Control, gdzie wystarczy wyszukać i zainstalować plugin. To wszystko.

Korzystanie z dodatku jest równie proste jak jego instalacja. Emmet jest na tyle inteligentny, że zapamiętuje nasze zachowania (a właściwie pisanie kodu) i sam dostosowuje się do naszych potrzeb. Zacznijmy od HTML’a.

Zamiast wpisywać:

<div class="container"></div>

wystarczy, że wpiszemy:

div.container

a nastepnie TAB. Kod napisze się sam. Idźmy dalej. Wpisując:

div.container>div.row>(div.col-md-6{tekst})*2

ukaże nam się następująca struktura:

<div class="container">
   <div class="row">
      <div class="col-md-6">tekst</div>
      <div class="col-md-6">tekst</div>
   </div>
 </div>

Czyż nie jest to proste i przyjemne? Nie mówiąc już o oszczędności czasu. Teraz czas na przykład z CSS, równie prosty i skuteczny. Po co wpisywać:

position: absolute;

kiedy wystarczy:

pos-a

Jak widzicie zajęło nam to niecałą sekundę. A co jeśli chcielibyśmy dodatkowo wykorzystać prefixy?

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Aby uzyskać powyższy zapis należy użyć wyłącznie zwrotu:

-wm-bdrs

I tyle. Potem tylko dopisujemy wartość 20px.

 

Emmet to oszczędność czasu

Wszyscy wiemy jak czasochłonne jest pisanie kodu podczas tworzenia strony internetowej, zwłaszcza kiedy musimy wielokrotnie powtarzać tą samą czynność. W myśl zasady DRY (Don’t Repeat Yourself) warto używać dodatku Emmet, a jeszcze lepiej kiedy wykorzystamy go przy pisaniu w Sass lub Less. Dzięki temu przyśpieszamy naszą pracę, staje się ona bardzie wydajna i efektywna co daje dużą szansę na wcześniejsze zakończenie projektu. Jeśli jeszcze nie używasz dodatku Emmet w swoim edytorze – czas najwyższy to zmienić.