Oliver Matthews
2 
4690
410
Emmet, tidligere kendt som Zen Coding, er et af de bedste værktøjer, du skal have til at øge din produktivitet, mens du koder HTML eller CSS. Det fungerer ligesom kodeudfyldelse, men det er mere kraftfuldt og forbløffende. Det er i stand til at automatisere din HTML / CSS fra en enkel form til den komplekse.
Emmet tilbyder god support til teksteditor eller IDE (Integrated Development Environment) som f.eks 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.
Emmets måde at arbejde på er ved at indtaste din tastaturtast, når du er færdig med at skrive syntaks. Følgende er mest almindelige Emmet-symboler, som du kan bruge. Fortsæt med at læse for at se dem i aktion.
Emmet - HTML bedste tricks
Du vil blive forbløffet, når du skriver HTML med Emmet, som jeg gjorde. Som nævnt tidligere er Emmet i stand til at forkorte en simpel HTML til meget kompleks. Og de er kun skrevet på en enkelt kodelinje. Hvis du forkorter ukendt tagnavn som standard, skriver Emmet automatisk det tag, du skriver. Se animation nedenfor for let at forstå den.
1. Indlejring
For at indlejre nogle elementer skal du blot tilføje et større tegn > efter hver tags, du vil bruge. For eksempel når jeg vil have en header med nav, div, ul og li indeni skal jeg bare skrive header> nav> div> ul> li og tasten hitfane.
2. Søskende
Hvis du ikke ønsker at indlejre dine elementer, kan du blot bruge et plus + tegn efterfulgt af tags, du vil tilføje. Eksempel header + sektion + artiklen + sidefod vil give et andet sted for header, afsnit, artiklen og sidefod.
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 ^ skilt. Hvis du skriver det to gange, vil du bestige dobbeltelement og så videre. For eksempel, hvis du skriver header> div> h1> nav du har nav-elementet stadig inde i h1. Udskift bare det sidste for at få det ud > underskrive med ^.
4. Tilføj klasse
Emmet er også i stand til at inkludere dit foretrukne klassnavn i tagget. Det tegn, du bruger, er det samme som klassevælger i CSS, der er en prik . skilt. For eksempel, hvis jeg vil have en div med .beholder klasse, h1 med .titel og nav med .fast, så skal jeg bare skrive div.container> header> h1.title + nav.fixed.
Hvis du vil have mere end en klasse inde, skal du indtaste din ekstra klasse efter den første klasse sammen med prikken . skilt. Eksempel: div.container.center vil producere .
5. Tilføj ID
Udover undervisning kan du også tilføje et ID i dit tag med # skilt. Brugen er den samme som at tilføje klasse, men du skriver muligvis ikke dobbelt ID inde. Hvis du prøver at gøre det, læser Emmet kun det sidste ID, du skriver.
6. Tilføj tekst
Emmet er ikke bare så simpelt som bare at forkorte nogle tags, du kan endda tilføje tekstlinje inde. For at tilføje noget tekst skal du bare pakke teksten med krøllet beslag skilt. Du behøver ikke tilføje en større > signere, da teksten automatisk tilføjes i tagget.
7. Tilføj attribut
Hvis du vil tilføje en anden attribut bortset fra klasse og id, skal du bare placere den attribut, du vil tilføje inde i beslaget [] skilt. For eksempel vil jeg have et billede, der har 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 inde, skal du gruppere dem med () tegn hjælper dig med at opnå dette let. Eksempel, jeg vil have en container, der har overskrift med h1 og nav inde og et andet afsnit uden for overskriften, jeg vil bare skrive: .container> (header> h1 + nav.fixed) + (afsnit> .content + .sidebar).
9. Multiplikation
Denne funktion kan muligvis blive en af dine foretrukne fra Emmet. Som med multiplikation kan vi multiplicere ethvert element så meget, som vi ønsker. For at bruge den skal du blot tilføje en stjerne * sign efter element, du vil multiplicere og tilføje elementets nummer. For eksempel vil jeg skrive fem li-poster inde i ul, så er den rigtige syntaks ul> li * 5.
10. Automatisk nummerering
Automatisk nummerering hjælper dig med let at skrive et andet navn med stigende antal. Den rigtige syntaks for denne funktion er en dollar $ skilt. Auto-nummerering bruges bedst med multiplikation. Eksempel, jeg vil tilføje min forrige li vare med en klasse fra item1 til item5. Så jeg skal bare tilføje yderligere klassens navn med dollartegn: ul> li.item $ * 5.
11. Lorem
Hvis du plejede at skrive en dummy tekst ved at åbne lipsum generator som lipsum.com, med Emmet behøver du ikke at gøre det mere. 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 en tekst med 10 ord lang, så skriver jeg lorem10.
12. Autodokument
Når du starter et nyt projekt i stedet for at skrive html-strukturen manuelt eller kopiere indsætning fra andre ressourcer, kan Emmet gøre det for dig bedre. Alt hvad du skal gøre er at skrive et udråbstegn ! tegn, hit fane og magien sker. Det vil generere en HTML5-dokumentstruktur for dig, hvis du vil bruge en HTML4 i stedet, skal du bare skrive html: 4t.
13. Link
Hvis du har en favorit-, rss- eller ekstern CSS-fil, du vil tilføje til dit dokument, kan du bruge linktricks til at skrive dem hurtigere. Hvis du vil inkludere et favicon, skal du skrive link: favicon så genererer det dig et favicon-link med standard favicon.ico filnavn inde. Og for css, link: css genererer dig et CSS-link med standard style.css stil navn inde. Og RSS vil det være rss.xml som standardnavn.
Du kan kombinere dem med plus + tegn for at generere en hurtigere ressource.
14. Anker
Som standard, når du skriver -en tag derefter hit fanen, får du en komplet -en tag med href attribut inde. Men du kan tilføje en http: // værdi, hvis du f.eks. kombinerer det med et link et link. Og hvis du i stedet vil have et maillink, så brug a: mail.
15. Smart springing
De sidste HTML-tricks, jeg vil give dig, er den smarte springende funktion. Grundlæggende behøver du ikke skrive tagnavnet, når du vil have klasse eller id inde i det. Dette gælder kun på en bestemt betingelse.
For det første, hvis du vil have en div med ID eller klasse inde, behøver du ikke at skrive tagnavnet, bare skrive id eller klassesymbol sammen med dets navn.
For det andet, når du er inde i en ul tag, du springer over at skrive li tag, hvis det har en klasse eller id.
Og den sidste anvendes inden i bord tag. Du kan springe over at skrive tr og TD tag, hvis de har klasse eller id, og Emmet tilføjer dem automatisk til dig.
Emmet - Bedste CSS-tricks
Når du har lært nogle af HTML-tricks, er det nu tid for CSS. Nogle af de almindelige symboler, der vises i det øverste billede, fungerer ikke med CSS. De er større > og klatre op ^ symboler. Hvis du bruger dem, producerer de ligesom plus + symbol. Så lad os komme i gang.
1. Bredde og højde
Definition bredde og højde med Emmet er meget let. Du skal bare skrive det første ord af dem efterfulgt af den størrelse, du vil tilføje. Hvis du ikke angiver enhederne som standard, genererer Emmet dem som standard px enhed. Det tilgængelige enhedssymbol er procent % og em.
2. Tekst
Der er nogle brugervenlige symboler for tekstegenskaber og genereres med standardværdi. ta vil generere text-align med venstre værdi, TD vil være tekst-dekoration med ingen værdi og tt vil blive tekst-transform med store bogstaver værdi.
3. Baggrund
For at tilføje baggrund skal du blot bruge bg forkortelse. Du kan kombinere det med BGI at få baggrundsbillede, BGC til baggrundsfarve og BGR til background-repeat. Du kan også skrive bg+ for at få en komplet liste over baggrundsejendom.
4. Font Face
Plustegnet gælder ikke kun for baggrunden. Til @ Font-face, du kan blot skrive @f+ for en komplet liste over @ Font-face ejendom. Hvis du skriver @f uden plustegn, så får du et grundlæggende @ Font-face kun.
5. Diverse
Andre gode tricks er, at du kan forkorte skrivning animation med anim tekst. Hvis du tilføjer et minus - tegn, får du animationsejendom med fuld værdi. Der er også @kf tekst, der producerer en komplet liste over @keyframe.
SE OGSÅ: Top 15 gratis PHP-rammer for 2015
Konklusion
Emmet er et meget enormt 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 bare nogle af Emmet-funktionerne. Der er masser af andet symbol og syntaks i Emmet, især for CSS. Bare gå over til Emmet docs eller snyder ark for at fremme din læsning.