Jak wtyczka Emmet dla Brackets pomaga w szybkim pisaniu kodu?

Jak zainstalować rozszerzenie Emmet w edytorze Brackets opisałam w moim poprzednim wpisie. W tym artykule przejdziemy do pokazania, w jaki sposób możemy za jej pomocą pisać szybko kod.

1. Pozwala na szybkie wpisywanie elementów HTML. Wystarczy, że wpiszesz:

h2

i wciśniesz Tab klawisz, a w rezultacie otrzymasz otwierający i zamykający znacznik elementu h2, z kursorem ustawionym w środku( między tymi znacznikami), aby od razu szybko wpisywać do niego zawartość:

2. Wystarczy wpisać nazwę elementu znak mniejszości(<) i kolejną nazwę elementu, aby otrzymać element HTML z zawartością innego elementu HTML.

Pamiętaj jednak, aby między poszczególnymi znakami nie dodawać spacji.

Dla przykładu po wpisaniu:

p>ul>li

i wciśnięciu klawisza Tab, otrzymasz w wyniku kod:

Pamiętaj, aby stanąć kursorem po całym wpisanym kodzie przed wciśnięciem tabulatora, a nie w środku, czy na początku kodu. W przeciwnym razie nie zostanie wygenerowany cały kod.

3. A co jeśli lista ma zawierać 3 elementy li ? Wtedy wystarczy dopisać tuż za elementem znak gwiazdki(*) i liczbę wystąpień tego elementu w kodzie, a więc wpisz po prostu

p>ul>li*3

Oczywiście wpisany kod zatwierdzamy tabulatorem. A oto wynik:

4. No dobrze, a co jeśli chcemy mieć element p z klasą o nazwie znaki? Po prostu po p wpisujemy znak kropki i nazwę klasy:

p.znaki>ul>li*3

A oto wynik:

5. W podobny sposób działa dodawanie do elementu identyfikatora. Dodajmy dla listy id o nazwie main:

p.znaki>ul#main>li*3

Wynik:

6. Kolejna ważna funkcja to możliwość przedstawienia elementów jeden pod drugim, a nie jeden w drugim. Umożliwia dodać kolejny element na tym samym poziomie zagnieżdżenia. Wtedy zaraz po opisaniu ul, wpisujemy znak plus(+) i podajemy definicję dla kolejnego elementu, którym ma się pod nim znaleźć. Załóżmy, że pod listą chcemy jeszcze umieścić 2 znaczniki a z linkami url. Wpisujemy zatem:

p.znaki>ul#main>li*3+a*2

zatwierdzając tabulatorem. Spójrz na wygenerowany kod i zauważ, że w przypadku elementu a jest dodawany automatycznie atrybut href.:

W podobny sposób zadziała dodanie elementu img przechowującego linki do obrazków. Wpisanie:

p.znaki>ul#main>li*3+img*2

kodu spowoduje wygenerowanie dla elementu img także atrybutów src o raz alt :

7. I jeszcze jeden operator: ^ , który wskazuje, że element podany za nim powinien znaleźć się o 1 poziom zagnieżdżenia wyżej od elementu, po którym ten znak podajemy. A więc jeśli po definicji elementu li podamy znak ^ i nazwę elementu span, element ten pojawi się na poziomie elementu ul, bo o 1 poziom wyżej niż element li:

p.znaki>ul#main>li*3^span

A po wpisaniu 2 znaków ^, element span zostanie o 2 poziomy wyżej od elementu podanego przed span:

p.znaki>ul#main>li*3^^span

Porównaj kod wygenerowany z 2 znakami ^^:

Jeden poziom wyżej od li to poziom ul, ale kolejny poziom wyżej to poziom elementu p. Dlatego element span wystąpił po elemencie p.

8. Emmet pozwala także na operowanie na grupach co bardzo ułatwia wygenerowanie kodu ze zdefiniowanymi przez nas fragmentami. Grupę definiują nawiasy zwykłe. To co znajduje się w tych nawiasach to grupa. Grupę możemy traktować jak elementy, a więc powtarzać jej wystąpienie dowolna liczbę razy, umieszczać na różnych poziomach zagnieżdżenia itp. Dla przykładu zapiszmy:

div>(p.main>a)*2+img*3

W tym przypadku dzięki potraktowaniu elementu p z zawartym w nim elementem a jako grupy mogliśmy użyć powtórzenia tego fragmentu 2 razy. Pod grupą dopiero dodaliśmy na tym samym poziomie zagnieżdżenia dwa elementy img.

9. Jeśli chcemy dla elementu dodać atrybut z zawartością, możemy tego dokonać w nawiasach kwadratowych. Po nazwie elementu w nawiasach kwadratowych [ ] podajemy nazwę atrybutu, znak równości i w apostrofach lub cudzysłowie jego wartość. Wpiszmy dla głównego elementu div z poprzedniego punktu atrybut title z łańcuchem znakowym „Obrazy”.

div[title=”Obrazy”]>(p.main>a)*2+img*3

10. Do powtórzenia elementów używamy operatora *. Jeśli jednak chcemy dodatkowo dodać numer kolejnego powtarzanego elementu przed znakiem * wpisujemy znak $. Wygenerujmy w elemencie div 3 elementy p wraz z identyfikatorem o nazwie nr i podanym kolejnym numerem:

div>p#nr$*3

11. Jednak do numeracji możemy dodać także kierunek tzn. czy ma to być wyliczanie rosnąco czy malejąco. Rosnący jest domyślnym kierunkiem, ale możemy go zmienić dodając modyfikator @- po znaku $. Zmieńmy więc kierunek wyliczania na malejący dla naszego ostatniego przykładu:

div>p#nr$@-*3

Jak widać tym razem numeracja rozpoczyna się od większej do mniejszej liczby.

12. Dodanie liczby za modyfikatorem zmiany kierunku wyliczania pozwoli na wypisywanie liczb od tej liczby(przy rosnącym kierunku), a przy malejącym jak w naszym przykładzie poniżej kończy się tą liczbą:

div>p#nr$@-2*3

13. Emmet pozwala także na wstawianie tekstu do elementu. Aby tego dokonać musimy go wpisać w nawiasy klamrowe: {}. Wstawmy więc do podanych elementów p tekst ten sam co id tych elementów p:

div>p#nr$@-2{$@-2}*3

Zauważmy, w którym miejscu nawiasy są dodane. Najpierw do elementu jest dodawany operator wyliczania($), dalej modyfikator malejącego kierunku(@-), potem numer rozpoczęcia lub końca wyliczania(tu jest to 2) i dopiero nawiasy klamrowe z tekstem stanowiącym zawartość elementu, a na koniec operator * z numerem powtórzeń tego elementu.

14. Gdy tekst elementu ma wyliczać rosnąco w przeciwieństwie do wartości id, wtedy można pominąć modyfikator zmiany kierunku(@-), a pozostawić liczbę początku wyliczenia, ale należy ją poprzedzić modyfikatorem: @:

div>p#nr$@-2{$@2}*3

15. A wpisując sam tylko tekst wystarczy użyć nawiasów klamrowych { } i tekstu wewnątrz. Wstawmy dla każdego p tym razem słowo paragraf:

div>p#nr$@-2{paragraf}*3

I na koniec bardziej rozbudowany przykład, w którym zmieniamy pustą zawartość atrybutu href na ścieżkę do pliku z numerem pliku i rozszerzeniem jpg:

div>a#nr$@-2[href=”documents/$@-2.jpg”]{paragraf $@-2}*3

I efekt:

16. Jeśli potrzebujesz tekstu tymczasowego stosowanego przez developerów, którym jest Lorem ipsum … , wystarczy wpisać w edytorze słowo lorem lub słowo lipsum i zatwierdzić tabulatorem, aby pojawił się jeden akapit tego tekstu, np. wpisz:

lorem

A oto wygenerowany tekst:

Gdy podasz po nim dodatkowo liczbę, zostanie wyświetlonych tyle wyrazów tego tekstu ile podałeś po tym słowie, np

lorem100

wyświetli taki tekst:

Gdy chcesz wygenerować 4 akapity tego tekstu, a każdy akapit ma mieć 20 wyrazów, wystarczy wpisać:

lorem20*4

Zwróć uwagę, że wtedy akapity zostaną umieszczone w elementach div.

17. Wtyczka posiada także cechę uzupełniania o elementy związane ściśle z podanym przez nas elementem. I tak podanie tylko klasy i podelementów bez nadrzędnego elementu spowoduje, że jako nadrzędny element będzie wygenerowany div. Oto przykład:

.content#main>p

który generuje taki kod:

W przypadku podania głównego elementu, który jest listą np. ul i nie podania podelementu dopisze li,np.:

ul>.elem*3

wygeneruje:

Podobnie zachowa się w przypadku elementu p z id nie wskazanego podelementu:

p>#$*2

Wynik:

I jeszcze tabela z dwoma kolejnymi podelementami nie podanymi w skrótowym kodzie:

table>[color=’yellow’]>[borders=’none’]

18. Emmet pozwala także na szybsze pisanie kodu w CSS, ale póki co, tylko dotyczy to właściwości a nie selektorów. Wystarczy podać pierwszą literę właściwości np. dla margin jest to m oraz liczbę, która ma stanowić wartość tej właściwości i znak jednostki. Dla em jest to e, dla % jest to p, a dla ex jest to x, a sama liczba to px. Załóżmy, że chcemy nadać elementowi margines równy 20 em, wtedy wpisujemy skrót:

m20em

i zatwierdzamy tabulatorem. A oto wygenerowany kod:

Dla podanej wartości rgb koloru z powtarzającą się liczbą szesnastkową w wartości właściwości color , wystarczy podać po literze c(właściwość color) znak # i liczbę szesnastkową lub jej część do powtórzenia np. d5:

c#d5

A dla nazw właściwości dwuczłonowych np. font-weight stosuje się pierwsze litery tych wyrazów( font-weight jest to fw), np:

fw200

20. A aby wygenerować szybko strukturę dokumentu HTML wystarczy wpisać:

doc

Efekt:

A gdy ma być wygenerowany jeszcze DOCTYPE i lang atrybut dla elementu html, wpiszmy:

!

co da nam wynik:

Jak widać Emmet może znacznie przyśpieszyć generowanie struktury strony, dlatego nie bez poowdu jest jedną z najczęściej wykorzystywanych wtyczek dla edytorów HTML. Czasem wpisanie tylko jednego wiersza kodu i wciśnięcie tabulatora potrafi wygenerować kilka stron kodu HTML. Więcej na temat skrótów znajdziecie w ściągawce( Cheat-Sheet) pod linkiem: https://docs.emmet.io/cheat-sheet/

Dodaj komentarz

Twój adres email nie zostanie opublikowany.