Emmet, tidigare Zen Coding, är en av de mest praktiska praktiska och produktiva textredigeringsprogrammen som du någonsin kommer att se. Med sin förmåga att direkt expandera enkla förkortningar till komplexa kodprofiler, gör Emmet dig till en kraftfull kodningsguide med världen till hands.
Som en uppföljning till vår tidigare artikel om grunderna för Zen Coding, kommer vi idag att dyka in i sju fantastiska tips som hjälper dig att bli en sann Emmet pro.
1. Hoppa över Div
Vårt första tips är att du sällan behöver skriva ut? Div? i ditt makro Det är frestande eftersom det är vad du gör med alla andra HTML-element, men div är speciella och kräver faktiskt ännu mindre ansträngning. Allt du behöver göra är att skriva ut ett ID (med en hashtag) eller en klass (med en period) och Emmet antar att du letar efter att skapa en div.
Som du kan se ger båda förkortningarna samma resultat. Eftersom Emmet handlar om att spara tid genom att minska antalet skrivningar som krävs, skjuter du alltid för den kortaste vägen till vad du vill ha.
Implicit Tag Namn
Denna quirk är faktiskt en del av en större funktion som heter? Implicit taggen ?, som försöker tolka taggen som du vill ha baserat på kontext. Lägg märke till att jag inte skriver ut heller? Div? eller? li? i min förkortning, men de antas och läggs in i det slutgiltiga utökade stycket.
2. Kedjförkortningar med DOM Navigation
Om du använder Emmet för att expandera enkla klassnamn till div, bra för dig, har du en bra start. Den realtidsbesparande effekten uppnås dock bara när du lär dig att effektivt bygga större makron som kan expandera till en betydande del av din uppställning.
Nyckeln till detta är att memorera och förstå den syntax som hjälper dig att avgrena sig i olika nivåer av ditt dokumentträd. Det finns tre viktiga symboler att tänka på:
Som du kan se,?> Var13 ->? kan du gå djupare in i trädet och skapa ett barn,? +? kan du skapa ett nytt element på samma nivå som den tidigare (en syskon) och? ^? kan du klättra upp en nivå för att skapa ett element. För enkelhetens skull, låt oss börja med de första två.
Som du kan se, med barnsymbolen (precis som barnväljaren i CSS) kunde jag placera den inre div inuti den yttre div. Sedan använde jag en annan barnsymbol följt av syskon symbolen för att placera både h2 och stycket på samma nivå precis inuti den inre div.
Klättrar upp
Nu går vi vidare och tittar på att flytta upp trädet. Den här är lite mer komplicerad att bryta dig om men det är en fantastisk ny Emmet-funktion som vi inte hade i Zen Coding. I grund och botten använder du? Flytta upp? symbol, vi kan klättra ut ur en gren som vi har börjat dyka in i. Här är vad jag menar:
Som du kan se här, grävde vi in i första stycket och kastades i en ankare, men behövde sedan klättra upp och lägga till en annan punkt på samma nivå som den föregående. Den? ^? symbol tillät oss att uppnå detta.
För att göra denna funktion ännu mer användbar kan du kedja dessa symboler tillsammans för att klättra upp flera nivåer. Om vi till exempel lägger till ett em-element i vår tidigare förkortning, måste vi klättra upp två nivåer för att placera vår nästa punkt på samma nivå som den första.
3. Använd gruppering för att förenkla din struktur
Ibland kommer du att upptäcka att du har grävt så djupt in i en viss gren att det blir en förvirrande röra till kedjan tillsammans tillräckligt med klättra upp symboler för att få det du vill ha. I det här fallet kan det förenkla sakerna lite om du vänder dig till gruppering istället. Detta uppnås genom att implementera parentes runt olika sektioner av kod.
Det här känns faktiskt mer naturligt och logiskt än att använda klättringssymbolen, och vi gör verkligen samma sak. Du kan se att detta verkligen börjar betala när du beskriver en större del av din sida.
4. Infoga text och attribut
När du markerar din sida är text och attribut två saker som du kan förvänta dig att du inte kan utföra med Emmet. Många användare skisserar bara ett dokument med det här verktyget och fyller sedan i innehållsbristerna efter expansionen. Det här är ett bra sätt att arbeta, men om du är intresserad kan du infoga både text och attribut med hjälp av den syntax som visas nedan.
Som jag har visat ovan infogas text via {curly brackets} och attribut använder [square brackets]. Tänk på att ankare faktiskt automatiskt sätter in en? Href? men värdet för det lämnas tomt som standard, den här tekniken låter dig fylla den. Vidare, kom ihåg att du kan använda hakparenteser för att skapa ett attribut som du gillar, inte bara den som visas här.
5. Flera klassnamn på en enda artikel
Den här är super enkel, men när jag först började använda det här verktyget var det inte klart för mig hur man lägger till flera klassnamn i ett enda element. Det visar sig att allt du behöver göra är att skriva ut alla klassnamn i rad åtskilda av perioder.
6. Multiplikation
Detta är en annan av mina favoriter. Du kan spara dig massor av att skriva när du lägger in flera element av samma typ. Använd bara följande syntax:
Det fungerar i stort sett allt du behöver det, oavsett hur komplicerat. Försök para det med gruppfunktionen som vi såg förut för några intressanta resultat.
7. Automatisk numrering
Vårt sjunde och sista tips är att du kan infoga automatiskt ökande nummer i dina utdrag via dollartecken. Detta fungerar överallt: klasser, ID, text, attribut etc. Det här är ett exempel i åtgärd:
Observera att ju fler dollar tecken du använder, ju fler siffror kommer numret att ha. Så i första hand använde jag $, vilket utvidgades till 1, 2 och 3.Sedan i andra instans brukade jag $$, som utvidgades till 01, 02 och 03.
Prova dem!
Nu när du vet ett gäng seriöst fantastiska tricks för att prova med Emmet, är det dags att ge dem ett skott. Hit upp vår Emmet demo sida och prova några av de förkortningar som vi gick över ovan. Här är en lista över varje förkortning i den här artikeln i vanlig text för att du ska kopiera och klistra in.
Också vara säker på att träffa Emmet hemsida, där du kan lära dig mer och prova det själv med en gång.
Hur utvidgar jag förkortningar?
Expansion kan vara annorlunda i varje redaktör och kräver vanligtvis ett plugin. I Sublime Text 2, öppna Package Manager, sök efter Emmet, installera det och starta om appen. För att utlösa en expansion klickar du helt enkelt på flik efter att ha skrivit in en förkortning.
Vad är dina favorit tips?
Emmet är händerna ner ett av mina absolut favorit kodningsverktyg. Lita på mig, använd det i några veckor och du kommer aldrig vilja koda utan det igen. Det sparar massor av arbete och är så mycket smartare än din typiska kodredigerare.
Nu när du har sett mina tips, lämna några av dina egna! Skriv en kommentar nedan för att berätta för mig hur du använder Emmet eller Zen Coding och vilka funktioner är dina favoriter.