Med Emmet kan du snabbt generera nästlade elementstrukturer. Emmet följer med i VS Code och är något som många verkar ha stött på, men inte använder frekvent. Om du jobbar med html eller JSX kan du spara tid och göra skrivandet roligare med Emmet.
Vad är Emmet?
Emmet är en samling verktyg för att snabba upp utveckling av html, css och jsx. Det ger möjligheten att expandera en syntax baserad på css till taggar, har en uppsättning snippets för html och css och innehåller ett antal kommandon. Det används oftast för html/JSX och css men det finns också möjlighet att använda det för andra språk.
Emmet skapades av Sergey Chikuyonok och hette ursprungligen Zen Coding men bytte senare namn till Emmet (https://emmet.io/credits/).
Användning
Den viktigaste funktionen i Emmet är taggenereringen baserat på css-selektorer. Vill man få en tagg kan man skriva elementnamnet och expandera uttrycket med tab. Som exempel, div blir <div></div>. Det är också möjligt att använda klasser, id och attribut på varje element. I varje uttryck börjar man med element eller klass, följt av punkt för klassnamn, brädgård för id och hakparenteser för attribut, precis som med css-selektorer. Efter expansion sätts markören i taggen för att det skall vara enkelt att börja skriva.
Det går också att bygga strukturer av element med hjälp av > för direkt barn och + för syskon. Då blir taggen efter > ett direkt barn till föregående element och taggen efter ett + hamnar på samma djup som föregående element.
Det finns också ett kortkommando för att repetera element fler gånger, *. Asterisken är bra kompis med $, som ersätts med numret elementet har i ordningen. Markören hamnar i det första elementet. När vi skrivit klart kan vi tabba för att gå vidare till nästa.
Ibland behöver man lorem ipsum, och med Emmet behöver man inte ens lämna sitt flow i VS Code, skriv lorem, tabba och få 30 ord lorem ipsum. 100 ord istället? Skriv lorem100.
Emmets hemsida har en komplett lista med alla features i notationen.
Vill man lägga till egna snippets är det också möjligt, även om VS Codes egna snippets är att föredra om man inte vill utöka just taggexpansionen. VS Code-dokumentationen har en bra guide.
Hoppas du inspirerats till att prova använda Emmet mer. Vill du lära dig om vanliga VS Code snippets kan du alltid läsa denna blogpost. Utveckla smidigare!
