Emmet, tidligere kendt som Zen Coding, er et af de bedste værktøjer, du skal øge din produktivitet, mens du kodes HTML eller CSS. Det fungerer ligesom kode færdiggørelse, men det er mere magtfulde og fantastiske. Det er i stand til at automatisere din HTML / CSS fra en simpel form til den komplekse.
Emmet tilbyder god støtte til tekst editor eller IDE (Integrated Development Environment) som Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm og mange flere. Det understøtter også online redigeringsværktøj som JSFiddle, JSBin, CodePen, IceCoder og Codio .
Vejen til Emmet-værker er ved at skrive din tastaturtastatur, når du er færdig med at skrive syntaks. Følgende er mest almindelige Emmet-symboler, som du kan bruge. For at se dem i aktion, fortsæt med at læse.
Emmet - HTML Bedste Tricks
Du bliver overrasket, når du skriver HTML med Emmet som jeg gjorde. Som nævnt kan Emmet forkorte en simpel HTML til meget kompleks. Og de er kun skrevet på en enkelt kode. Som standard, hvis du forkorter ukendt tagnavn, vil Emmet automatisk skrive det tag, du skriver. Se animation nedenfor for nemt at forstå det.
1. Nesting
For at nest nogle elementer skal du bare tilføje større tegn > efter hver tags, du vil bruge. For eksempel, når jeg vil have et header med nav, div, ul og li inde, skal jeg bare skrive header>nav>div>ul>li og hitfaneknappen.
2. søskende
Hvis du ikke vil nest dine elementer, kan du blot bruge et plus + tegn efterfulgt af tags, du vil tilføje. Eksempel, header+section+article+footer vil give et andet sted til header, section, article og footer .
3. Klatre op
Når du er inde i et barnelement og vil have et andet element uden for det barn, kan du nemt klatre op på et element med ^ tegn. Hvis du skriver det to gange, så klatrer du dobbeltelement og så videre. Hvis du for eksempel skriver header>div>h1>nav du nav-elementet stadig inde i h1. For at få det ud, skal du bare erstatte det sidste > tegn med ^ .
4. Tilføj klasse
Emmet kan også medtage dit foretrukne klassenavn i taggen. Tegnet, du bruger, er det samme som klassevælgeren i CSS, der er en prik . skilt. For eksempel, hvis jeg vil have en div med .container klasse, h1 med .title og nav med .fixed, så skal jeg bare skrive div.container>header>h1.title+nav.fixed .
Hvis du vil have mere end en klasse indeni, så skriv din ekstra klasse efter første klasse sammen med prikken . skilt. Eksempel: div.container.center vil producere .
5. Tilføj id
Udover klassen kan du også tilføje et ID inde i dit tag med # tegn. Brugen er den samme som at tilføje klasse, men du må ikke skrive dobbelt ID inde. Hvis du forsøger at gøre det, vil Emmet kun læse det sidste id, du skriver.
6. Tilføj tekst
Emmet er ikke bare så simpelt som bare forkorte nogle tags, du kan endda tilføje tekstlinje inde. For at tilføje nogle tekst skal du bare indpakke teksten med curly bracket {} sign. Du behøver ikke at tilføje et større > tegn, da teksten automatisk bliver tilføjet inden i taggen.
7. Tilføj attribut
Hvis du vil tilføje en anden attribut bortset fra klasse og id, skal du blot placere attributten du vil tilføje indbygget [] signatur. For eksempel vil jeg have et billede med logo.png kilde med logo alt, så jeg skriver bare img[src="logo.png"] .
8. Gruppering
Når du vil have et element med flere indlejrede indvendige, så kan du gruppere dem med () -tegnet nemt for at opnå dette. Eksempel: Jeg vil gerne have en container med overskrift med h1 og nav inde og et andet afsnit uden for overskriften. Jeg vil blot skrive: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplikation
Denne funktion kan blive en af dine foretrukne fra Emmet. Som med multiplikation kan vi formere ethvert element så meget, som vi ønsker. For at bruge det skal du blot tilføje en stjerne * tegn efter element, du vil multiplisere og tilføje elementets nummer. For eksempel vil jeg skrive fem li-elementer inde i ul, så er den rigtige syntaks ul>li*5 .
10. Automatisk nummerering
Automatisk nummerering hjælper dig med at skrive et andet navn med et stigende antal. Den rigtige syntaks for denne funktion er et dollar $ tegn. Automatisk nummerering bruges bedst til multiplikation. Eksempel: Jeg vil gerne tilføje mit tidligere li emne med en klasse fra item1 til item5 . Så jeg skal bare tilføje yderligere klassenavn med dollarskilt: ul>li.item$*5 .
11. Lorem
Hvis du plejede at skrive nogle dummy tekst ved at åbne lipsum generator som lipsum.com, med Emmet behøver du ikke gøre det længere. Emmet understøtter også dummy tekstgenerator med lorem eller lipsum syntaks. Du kan også angive, hvor længe din tekst bliver. For eksempel vil jeg have nogle tekst med 10 ord lang, så skriver jeg lorem10 .
12. Automatisk dokument
Når du starter et nyt projekt, kan du i stedet for at skrive html-strukturen manuelt eller kopiere indsætning fra andre ressourcer, og Emmet kan gøre det bedre for dig. Alt du skal gøre er at skrive et ekslamatorium ! tegn, hit fan og magien ske. Det vil generere en HTML5 dokument struktur for dig, hvis du vil bruge en HTML4 i stedet, så skriv bare html:4t .
13. Link
Hvis du har en favicon, rss eller ekstern CSS-fil, du vil føje til dit dokument, kan du bruge link-tricks til at skrive dem hurtigere. For at inkludere et favicon, skriv link:favicon så vil det generere dig en favicon link med standard favicon.ico filnavn inde. Og for css, link:css vil generere dig et CSS link med standard style.css stil navn indeni. Og RSS vil være rss.xml som standardnavn.
Du kan kombinere dem med plus + tegn for at generere hurtigere ressourcer.
14. Anker
Som standard, når du skriver a tag, så klik på fanen, får du et komplet tag med href attributten indeni. Men du kan tilføje en // værdi, hvis du kombinerer den med link for eksempel a:link . Og hvis du vil have et mail link i stedet, så brug a:mail .
15. Smart Skipping
De sidste HTML-tricks, jeg vil give dig, er den smarte hoppefunktion. Dybest set har du ikke skrive tagnavnet, når du vil have klasse eller id inde i det. Dette gælder kun under en vis tilstand.
For det første, hvis du vil have en div med ID eller klasse inde, behøver du ikke skrive tagnavnet, skal du bare skrive id eller klassesymbol sammen med dets navn.
For det andet, når du er inde i en ul tag, springer du over til at skrive li mærket, hvis det har en klasse eller et id.
Og sidstnævnte anvendes inden for table tag. Du kan springe på skrive tr og td tag, hvis de har klasse eller id, og Emmet vil automatisk tilføje dem til dig.
Emmet - Bedste CSS Tricks
Når du har læst nogle af HTML-tricks, er det nu tid til CSS. Nogle af de fælles symboler, der vises i topbilledet, virker ikke sammen med CSS. De er større > og klatre op ^ symboler. Hvis du bruger dem, vil de producere ligesom plus + symbol. Så lad os gå i gang.
1. Bredde og højde
At definere width og height med Emmet er meget let. Du skal bare skrive det første ord af dem efterfulgt af den størrelse, du vil tilføje. Som standard, hvis du ikke angiver enhederne, vil Emmet generere dem med px enhed. Det tilgængelige enheds symbol er procent % og em .
2. Tekst
Der er nogle nemme at bruge tekstegenskabssymbolet og vil blive genereret med standardværdi. ta vil generere text-align med left værdi, td vil være text-decoration med none værdi og tt bliver text-transform med uppercase .
3. Baggrund
For at tilføje baggrund, skal du blot bruge bg forkortelse. Du kan kombinere det med bgi at få background-image, bgc til background-color og bgr til background-repeat . Du kan også skrive bg+ at få en komplet liste over baggrundsegenskaber.
4. Font Face
Plustegnet er ikke kun anvendeligt til baggrund. For @font-face kan du simpelthen skrive @f+ for en komplet liste over @font-face egenskab. Hvis du skriver @f uden plustegn, får du kun et grundlæggende @font-face .
5. Diverse
Andre gode tricks, du kan forkorte skrive animation med anim tekst. Hvis du tilføjer et minustegn, får du animationsegenskab med fuld værdi. Der er også @kf tekst, der vil producere en komplet liste over @keyframe .
Konklusion
Emmet er et meget stort tidsbesparende værktøj til at strømline din udviklingsproces. Hvis du bare kender Emmet, er det ikke for sent at prøve det nu. Disse tricks er blot nogle af Emmet-funktionerne. Der er masser af andet symbol og syntaks i Emmet, især til CSS. Bare gå over til Emmet docs eller snydeark for at fremme din læsning.
