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/[email protected]”]{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

lorem 100

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/