Lær hurtigkodingsvaner med Emmet-verktøy

Emmet, den siste oppdateringen av Zen Coding-plugin, er forfatter av Sergey Chikuyonok, den russiske front-end web-utvikleren og skribenten. Når Emmet er lagt til i kodingstekstredigeringsprogrammet, kan du øke produktivitetsnivåene og vil dermed imponere enhver leder for nettutvikling eller CIO.

Emmet bruker det som kalles Dynamic Snippets, som er forkortelser som blir transformert ved kjøretid, og er kjernen til Emmet verktøysett. De spesielle uttrykkene blir analysert i kjøretid og omgjort til for eksempel strukturert kodeblokk, CSS og HTML-kode. Det sentrale konseptet med Emmet er at det gir forbedret arbeidsflyt med forbedret høyhastighetskoding for webutviklere som hovedsakelig jobber med HTML og CSS - men kan også brukes til andre programmeringsspråk. Den svært bærbare Emmet er skrevet i JavaScript og fungerer på forskjellige plattformer inkludert nettlesere, Node.js, Microsoft Windows Script Host (WSH) og Mozilla Rhino.

Last ned Emmet

Nedlastingen er tilgjengelig for femten populære tekstutviklere for webutviklere, inkludert versjoner på tvers av plattformer for Sublime Text, Eclipse, Brackets, Komodo Edit og NetBeans. Nedlastinger for online tjenester inkluderer JSFiddle, JSBin, CodePen og ICEcoder. Tredjepartsstøtte er tilgjengelig for SynWrite, WebStorm, PhpStorm, Vim og HTML-Kit; Imidlertid støtter ikke plugins som er utviklet av tredjepartsutviklere for disse tredjepartsredigerere alle Emmet-funksjoner og handlinger. Nedlastingssiden vises i figur B nedenfor.

Installasjon

For denne demonstrasjonen lastet jeg ned Emmet for Dreamweaver-versjonen og installerte plugin-en manuelt, og dro ned Emmet.zxp-filen og dobbeltklikker den. Det åpner Adobe Extension Manager for Adobe-produkter, og installerer plugin-modulen i Dreamweaver, som vist i figur C og D.

Figur C

Figur D

For å legge til Emmet-utvidelsene til Dreamweaver-menyen, må du åpne Kommandoene | Emmet-innstillinger-dialogboksen og skriv inn den absolutte banen til mappen Emmet-utvidelser. Dette må legges inn manuelt siden Dreamweaver ikke støtter en mappevalg-dialog som vist i figur E.

I dette tilfellet er hele veien til Emmet-utvidelsene:

C: \ Programfiler \ Adobe \ Adobe Dreamweaver CS5 \ Plug-ins \ Kommandoer \ Emmet

Deretter trenger tastatursnarveien for tastekombinasjonen Ctrl + E å oppdateres. Gå til Rediger | fra Dreamweaver-menyen Tastatursnarveier, og fra rullegardinmenyen Kommandoer: Menykommandoer, åpne katalogen Sett inn, og velg Merk. Deretter må du fjerne elementet ved å klikke på minustegnet for snarveien til Ctrl + E, og velg deretter OK for å bekrefte. Dialogboksen Tastatursnarveier vises i figur F.

bruk

Når du er klar til å bruke Emmet-funksjonaliteten, er det bare å angi eventuelle Emmet-forkortelser og oppfølging ved å trykke på tastekombinasjonen av Ctrl + E, så vil Emmet-taggen (e) automatisk bli fullført. Jeg har gitt flere eksempler på HTML og CSS forkortelser for ofte brukt webutviklingskoding, og de vises nedenfor.

HTML

For HTML 5-doktypen på linje 1 i Dreamweaver, skriv inn forkortelsen "!" eller "html: 5" og trykk Ctrl + E. Den resulterende HTML5-doktypen vises sammen med noen få koder for å starte opp dokumentet, som vist i figur G.

Andre forkortelser på doktype inkluderer html: xt for XHTML overgangsdoktype, og html: 4s for HTML 4 Streng doktype.

Forkortelsessyntaks inkluderer elementer, hekkeoperatører for barn og søsken, klatre opp, multiplikasjon og gruppering. Attributtoperatører inkluderer ID og klasse, varenummerering, nummerbase og retningsendring. Tekst kan legges til ved hjelp av de krøllete selene {}.

La oss si at du vil kombinere ID-er og klasser til et HTML5-artikkelelement; å skrive Emmet syntaksartikkel # front.main og deretter Ctrl + E resulterer i følgende kode:

 Hvor mange ganger har du måttet lage flere uordnede lister som inkluderer omtrent ti elementer eller mer, og alle inkluderer ankerkobling og tekst? Emmet forkortelsessyntaks # meny $ * 3> ul> li * 10> a {Link Here} og Ctrl + E oppretter følgende som vist i figur H. $ -Operatøren vil øke menyen ganger tre iterasjoner ved å bruke multiplikasjonen * 3, og listeelementene blir opprettet ti ganger hver med * 10-syntaks, inkludert et anker for hver med teksten "Link Here". 

Figur H

Hekkeoperatører brukes til å plassere syntaksforkortelser inne i et generert tre, som lar deg bygge hele sider med bare en kodelinje som i eksemplet vist nedenfor: artikkel> p {Tekst her ...} + bq> {Tekst her. ..} ^ p {Tekst her ...} * 3 og Ctrl + E resulterer i følgende kode, vist i figur I :

Tekst her...

Tekst her...

Tekst her...

Tekst her...

Tekst her...

Figur I

Form- og skjemainnganger er også inkludert i forkortelsessyntaxen, bare noen få inkludert her er vist i den korte forenklede tabellen nedenfor:

syntax

Resultat

skjema
form: get
form: post
inngang: t
inngang: tids
inngang: gang # datetime

Vil du legge til en datatabell raskt? Her er noen av HTML-datatabellens syntaks:

syntax

Resultat

tabellen +

tr +
colg +

CSS

Emmet er også nyttig for forkortet CSS-syntaks. Jeg vil fremheve bare noen få av de hundrevis som er tilgjengelige i tabellen nedenfor, med noen vanlige syntaksforkortelser fra Emmet og den resulterende koden som genereres. Mange av Emmet CSS3-syntaks er inkludert i leverandørens prefikser som en del av den resulterende koden, som jeg har vist med eksemplene på boksen-skygge og @ webkit-keyframes.

syntax

Resultat

pos stilling: relativ;
pos: s stilling: statisk;
t: a øverst: auto;
z z-indeks:;
va: t vertikal justering: topp;
TSH: ra tekstskygge: hv uskarphet rgba (0, 0, 0, .5);
bdtli: c border-top-left-image: fortsett;
d skjerm: blokkering;
bxsh: ra -webkit-box-skygge: innsatt hv uskarphet spredt rgba (0, 0, 0, .5);

-moz-box-skygge: innsatt hv uskarphet spredt rgba (0, 0, 0, .5);

boksskygge: innsatt hv uskarphet spredt rgba (0, 0, 0, .5);

@kf @ -webkit-keyframes identifikator {

fra { }

til { }

}

@ -o-nøkkelframesidentifikator {

fra { }

til { }

}

@ -moz-keyframes-ID {

fra { }

til { }

}

@keyframes-ID {

fra { }

til { }

}

c: ra farge: rgba (0, 0, 0, .5);
ff: ss font-family: sans-serif;
cps: b bildetekst-side: bunn;
BGI: n bakgrunnsbilde: ingen;
pgbb: r side-break-before: rett;

For en fullstendig liste over Emmet syntaksforkortelser, sjekk ut Emmet Cheat Sheet, tilgjengelig som en del av dokumentasjonen som er inkludert på Emmet-nettstedet. Når du har fått tak i de vanlige Emmet-syntaksforkortelsene, kan du komme godt på vei til å skape raske kodingsvaner og kutte utviklingstiden din mens du øker produktiviteten. Du vil være fornøyd, sjefen din vil være fornøyd, og kundene dine vil være fornøyde - en vinn situasjon rundt!

© Copyright 2021 | mobilegn.com