Dustin Hudson
0 
1478
232
Emmet, tidigare känd som Zen Coding, är ett av de bästa verktygen du borde behöva för att öka din produktivitet när du kodar HTML eller CSS. Det fungerar precis som kodavslutning, men det är mer kraftfullt och fantastiskt. Det kan automatisera din HTML / CSS från en enkel form till den komplexa.
Emmet erbjuder bra stöd för textredigerare eller IDE (Integrated Development Environment) som Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, parentes, Notepad ++, PHPStorm och många fler. Det stöder också online redigeringsverktyg som JSFiddle, JSBin, CodePen, IceCoder och Codio.
Sättet för Emmet fungerar är genom att skriva tangentbordstangentknappen när du är klar med att skriva syntax. Följande är vanligaste Emmet-symboler som du kan använda. Fortsätt läsa om du vill se dem i aktion.
Emmet - HTML bästa trick
Du kommer att bli förvånad när du skriver HTML med Emmet som jag gjorde. Som tidigare nämnts kan Emmet förkorta en enkel HTML till mycket komplex. Och de är skrivna endast på en enda rad med kod. Som standard, om du förkortar okänt taggnamn, kommer Emmet automatiskt att skriva taggen du skriver. Se animering nedan för att enkelt förstå det.
1. Häckning
För att häcka några element behöver du bara lägga till större tecken > efter varje taggar du vill använda. Till exempel när jag vill ha en rubrik med nav, div, ul och li inuti behöver jag bara skriva header> nav> div> ul> li och tangenten för hitfliken.
2. Syskon
Om du inte vill häcka dina element kan du helt enkelt använda ett plus + tecken följt av taggar du vill lägga till. Exempel, header + avsnitt + artikeln + sidfot kommer att ge en annan plats för rubrik, sektion, artikel och sidfot.
3. Klättra upp
När du är inne i ett barnelement och vill ha ett annat element utanför det barnet, kan du enkelt klättra upp ett element med ^ tecken. Om du skriver det två gånger, klättrar du dubbelelement och så vidare. Om du till exempel skriver header> div> h1> nav du har navelementet fortfarande inne i h1. För att få ut det, byt bara ut det sista > skylt med ^.
4. Lägg till klass
Emmet kan också inkludera ditt önskade klassnamn i taggen. Det tecken du använder är samma som klassväljare i CSS som är en punkt . tecken. Om jag till exempel vill ha en div med .behållare klass, h1 med .titel och nav med .fast, då måste jag bara skriva div.container> header> h1.title + nav.fixed.
Om du vill ha mer än en klass inuti, skriv sedan din ytterligare klass efter den första klassen tillsammans med punkten . tecken. Exempel: div.container.center kommer att producera .
5. Lägg till ID
Förutom klass kan du också lägga till ett ID i din tagg med # tecken. Användningen är densamma som att lägga till klass men du kanske inte skriver dubbel ID inuti. Om du försöker göra det kommer Emmet bara att läsa det senaste ID som du skriver.
6. Lägg till text
Emmet är inte bara så enkelt som att bara förkorta vissa taggar, du kan till och med lägga till textrad inuti. För att lägga till lite text måste du bara linda in texten med lockigt konsol tecken. Du behöver inte lägga till en större > underteckna eftersom texten automatiskt läggs till i taggen.
7. Lägg till attribut
Om du vill lägga till ett annat attribut bortsett från klass och id, placerar du bara attribut som du vill lägga till i konsolen [] tecken. Till exempel vill jag ha en bild som har logo.png-källa med logotyp alt, så jag skriver bara img [src = "logo.png"].
8. Gruppering
När du vill ha ett element med flera kapslade inuti, gruppera dem sedan med () skylt hjälper dig att uppnå detta enkelt. Exempel, jag vill ha en behållare som har rubrik med h1 och nav inuti och ett annat avsnitt utanför rubriken, jag skriver helt enkelt: .behållare> (header> h1 + nav.fixed) + (avsnitt> .content + .sidebar).
9. Multiplikation
Den här funktionen kan bli en av dina favoriter från Emmet. Som med multiplikation kan vi multiplicera alla element så mycket vi vill. Lägg till en stjärna för att använda den * logga efter elementet du vill multiplicera och lägga till numret på elementet. Till exempel vill jag skriva fem li-artiklar inuti ul, då är den rätta syntaxen ul> li * 5.
10. Automatisk numrering
Automatisk numrering hjälper dig att enkelt skriva ett annat namn med ökande antal. Rätt syntax för denna funktion är en dollar $ tecken. Auto-numrering används bäst med multiplikation. Exempel, jag vill lägga till mitt tidigare li artikel med en klass från item1 till item5. Så jag måste bara lägga till ytterligare klassnamn med dollartecken: ul> li.item $ * 5.
11. Lorem
Om du brukade skriva lite dummy text genom att öppna lipsum generator som lipsum.com, med Emmet behöver du inte göra det längre. Emmet stöder också dummy textgenerator med lorem eller Lipsum syntax. Du kan också ange hur lång tid din text ska bli. Till exempel vill jag ha lite text med 10 ord långt, då skriver jag lorem10.
12. Autodokument
När du startar ett nytt projekt istället för att skriva html-strukturen manuellt eller kopiera klistra in från andra resurser, kan Emmet göra det åt dig bättre. Allt du behöver göra är att skriva ett utropstecken ! skylt, hitflik och magin händer. Det skapar en HTML5-dokumentstruktur för dig, om du vill använda en HTML4 istället skriver du bara html: 4t.
13. Länk
Om du har en favicon-, rss- eller extern CSS-fil du vill lägga till i ditt dokument kan du använda länktrick för att skriva dem snabbare. Om du vill inkludera ett favicon skriver du länk: favicon då kommer det att generera dig en favoritlänk med standard favicon.ico filnamn inuti. Och för css, länk: css kommer att generera en CSS-länk med standard style.css stilnamn inuti. Och RSS kommer att vara det rss.xml som standardnamn.
Du kan kombinera dem med plus + tecken för att generera en snabbare resurs.
14. Ankare
Som standard när du skriver en tagg och tryck sedan på fliken, så får du en komplett en tagga med href attribut inuti. Men du kan lägga till en http: // värde om du t.ex. kombinerar det med länk en länk. Och om du vill ha en e-postlänk istället, använd sedan a: mail.
15. Smart hoppning
De sista HTML-tricks som jag ger dig är den smarta hoppfunktionen. I grund och botten behöver du inte skriva taggnamnet när du vill ha klass eller id inuti det. Detta gäller endast på vissa villkor.
Först om du vill ha en div med ID eller klass inuti, behöver du inte skriva taggen namnet, bara skriva id eller klass symbol tillsammans med dess namn.
För det andra, när du är inne i en ul tagg, hoppar du över att skriva li tagg om den har en klass eller id.
Och det sista tillämpas inom tabell märka. Du kan hoppa över att skriva tr och td tagg om de har klass eller id och Emmet lägger automatiskt till dem åt dig.
Emmet - Bästa CSS-trick
När du har lärt dig några HTML-trick är det nu dags för CSS. En del av den vanliga symbolen som visas i toppbilden fungerar inte med CSS. De är större > och klättra upp ^ symboler. Om du använder dem kommer de att producera precis som plus + symbol. Så låt oss komma igång.
1. Bredd och höjd
definiera bredd och höjd med Emmet är väldigt enkelt. Du måste bara skriva det första ordet av dem följt av den storlek du vill lägga till. Som standard, om du inte anger enheterna, kommer Emmet att generera dem med px enhet. Den tillgängliga enhetssymbolen är procent % och em.
2. Text
Det finns några lättanvända symboler för textegenskap och kommer att genereras med standardvärde. ta kommer att generera text-align med vänster värde, td kommer vara text-decoration med ingen värde och tt kommer att bli text-trans med versal värde.
3. Bakgrund
För att lägga till bakgrund, använd bara bg förkortning. Du kan kombinera det med BGI att få bakgrundsbild, bgc för bakgrundsfärg och bgr för bakgrund-repeat. Du kan också skriva bg+ för att få en fullständig lista över bakgrundsegenskaper.
4. Font Face
Plustecknet gäller inte bara för bakgrund. För @ Font-face, du kan helt enkelt skriva @f+ för en komplett lista över @ Font-face fast egendom. Om du skriver @f utan plustecken får du en grundläggande @ Font-face endast.
5. Diverse
Andra bra trick är att du kan förkorta skrivning animation med anim text. Om du lägger till ett minus - tecken, får du animationsegenskap med fullt värde. Det finns också @K F text som ger en fullständig lista över @keyframe.
SE OGSÅ: Topp 15 gratis PHP-ramverk för 2015
Slutsats
Emmet är ett mycket enormt tidsbesparande verktyg för att effektivisera din utvecklingsprocess. Om du bara känner till Emmet är det inte för sent att prova det nu. Dessa trick är bara några av Emmet-funktionerna. Det finns massor av andra symboler och syntaxer i Emmet, särskilt för CSS. Gå bara över till Emmet docs eller fuska ark för att förbättra din läsning.