Emmet je jedna od mojih omiljenih ugrađenih značajki VS koda. Dostupno je i kao proširenje u drugim uređivačima koda.

Shvatite da je Emmet stenografija. Pomoću njega možete brzo napisati puno koda. Dramatično ubrzava vaš HTML i CSS tijek rada.

Razumijevanje načina upotrebe Emmeta doslovno je velesila. Neki su ga čak nazvali varalicom za kodiranje. ?

I to je samo jedna od mnogih nevjerojatnih ugrađenih značajki VS koda.

Nedavno sam pokrenuo sveobuhvatan i detaljan tečaj pod nazivom Postanite VS kod SuperHero . Pokriva sve aspekte VS koda u velikoj dubini.

Ovaj se članak temelji na jednom od 11 odjeljaka tečaja: Pisanje i oblikovanje koda .

HTML

S Emmetom možete brzo stvoriti HTML obrazac u tren oka. Jednostavno upišite u HTML datoteku !i vidjet ćete da se Emmet pojavio kao prijedlog. Sad pogodi Enter. Tu ste, osnovna, prazna HTML web stranica spremna za rad.

Ako nikada prije niste vidjeli HTML i nemate pojma što je sve ovo, ne brinite. Samo demonstriram mogućnosti VS koda i Emmeta. Ne morate znati što sve ovo trenutno znači.

Osnovne oznake

Da biste stvorili osnovne HTML oznake, samo upišite ime oznake i pritisnite Enter. Primijetite kako Emmet stavlja kursor unutar oznake. Sada ste postavljeni za nastavak tipkanja unutar oznake.

• Pokušajte upisati: divtada Enter, ili h1 Enter, ili p Enter.
• I oni također rade: bqza a , hdrza a , ftrza a , btnza a i sectza odjeljak.

Nastava

Ako vam je poznat CSS, Emmet se na isti način poziva na klase pomoću a .. Da biste definirali klasu zajedno s oznakom, jednostavno je dodajte ovako:

• div.wrapper ->
• h1.header.center ->

Osobne iskaznice

Id-ov posao je vrlo isti:

• div#hero ->

Kombinirajući

Možete ih povezati:

• div#hero.wrapper ->

Atributi

Također možemo odrediti atribute za oznake:

• img[src="cat.jpg"][alt="Cute cat pic"] ->

Sadržaj

Uključiti sadržaj unutar oznake, jednostavno omotati sadržaj u vitičastim zagradama, { }.

• p{This is a paragraph} ->

  This is a paragraph

Braća i djeca

Jednostavno postaje sve bolje. Također možemo odrediti braće i sestara i djece koji koriste +i >znakove.

• section+section ->
• ul>li ->

Penjati se

Morate pokušati zamisliti što gradite u glavi dok tipkate Emmetovu stenografiju. U ovom ćemo primjeru "popeti se" na drvo pomoću ^.

div+div>p>span+em^bq

Proizlaziti:

Ovdje smo željeli da blok citat bude na istoj razini kao i odlomak. Zbog toga smo se trebali "popeti gore". Inače bi to bilo unutar odlomka.

Grupiranje

Ako je vaša struktura vrlo složena, možda ćete htjeti grupirati oznake umjesto da se krećete penjanjem.

U ovom primjeru stvorit ćemo zaglavlje i podnožje bez penjanja pomoću zagrade ( ).

div>(header>ul>li>a)+footer>p

Proizlaziti:

Množenje i $

Možemo generirati više oznaka množenjem ( *) i numeriranjem stavki u nizu pomoću znaka dolara ( $).

• ul>li*5 ->
• ul>li{Item $}*3 ->
  • Item 1
  • Item 2
  • Item 3

Slijed numeriranja možete čak prilagoditi dodavanjem nula, počevši od određenog broja, pa čak i obrnutog smjera.

Podloga s nulama: ul>li.item$$$*5

Proizlaziti:

Počnite s određenim brojem: ul>[email protected]*5

Proizlaziti:

Obrnuti smjer: ul>[email protected]*5

Proizlaziti:

Obrnuti smjer od određenog broja: ul>[email protected]*5

Proizlaziti:

Implicitna imena oznaka

Postoje određene oznake koje nije potrebno upisivati ​​i mogu se podrazumijevati.

• Klasa koja je u početku definirana bez oznake podrazumijevat će se kao .

  .wrapper ->

• Klasa definirana unutar oznake naglaska podrazumijevat će se kao a .

  em>.emphasis ->

• Klasa definirana unutar popisa podrazumijevat će se kao stavka popisa.

  ul>.item ->
• Klasa definirana u tablici podrazumijeva se kao a, a u retku bi bila a .

  table>.row>.col ->

Omotajte oznakama

Bit će trenutaka kada imate postojeći kôd koji želite omotati oznakom. Lako možemo s Emmetom.

Samo označite kod koji želite zamotati i otvorite naredbenu paletu ( F1). Zatim potražite Emmet: Wrap with Abbreviation. Tada će vam se prikazati dijaloški okvir u koji možete upisati element.

test -> test

U ovom dijaloškom okviru možete koristiti i standardnu ​​Emmetovu sintaksu. Pokušajte umotati neki tekst u span.wrapper.

Ta funkcija prema zadanim postavkama nije dodijeljena tipkovničkom prečacu. Dakle, ako se često koristite, možda ćete mu trebati dodati prilagođeni prečac.

Lorem Ipsum

"Lorem Ipsum" lažni je tekst koji programeri koriste za predstavljanje podataka na stranici. Samo upišite loremi pritisnite Enter. Emmet će generirati 30 riječi lažnog teksta koje možete koristiti kao punilo u svom projektu.

Može se definirati i količina generiranih riječi.

• lorem10 dat će vam 10 riječi slučajnog teksta.

Sve to zajedno

Iskoristimo nekoliko stvari koje smo do sada naučili. Isprobajte ovo:

ul.my-list>lorem10.item-$*5

Proizlaziti:

    

     
Lorem ipsum dolor sit amet.
     
Numquam repudiandae fuga porro consequatur?
     
Culpa, est. Tenetur, deleniti nihil?
     
Numquam architecto corrupti quam repudiandae.
    

CSS

U CSS-u Emmet ima kraticu za svako svojstvo. Neću ih sve nabrajati, ali istaknut ću svoje najčešće korištene. Da biste vidjeli cijeli popis, pogledajte Emmet-ove varalice.

Položaj

• pos-> position:relative;(zadano prema relativnom)
• pos:s ->position:static;
• pos:a ->position:absolute;
• pos:r ->position:relative;
• pos:f ->position:fixed;

Prikaz

• d-> display:block;(zadano blokirano)
• d:n ->display:none;
• d:b ->display:block;
• d:f ->display:flex;
• d:if ->display:inline-flex;
• d:i ->display:inline;
• d:ib ->display:inline-block;

Pokazivač

• cur ->cursor:pointer;

Boja

• c ->color:#000;
• c:r ->color:rgb(0, 0, 0);
• c:ra ->color:rgba(0, 0, 0, .5);
• op ->opacity: ;

Margin & Padding

• m ->margin: ;
• m:a ->margin:auto;
• mt ->margin-top: ;
• mr ->margin-right: ;
• mb ->margin-bottom: ;
• ml ->margin-left: ;
• p ->padding: ;
• pt ->padding-top: ;
• pr ->padding-right: ;
• pb ->padding-bottom: ;
• pl ->padding-left: ;

Veličina kutije

• bxz ->box-sizing:border-box;

Širina

• w ->width: ;
• h ->height: ;
• maw ->max-width: ;
• mah ->max-height: ;
• miw ->min-width: ;
• mih ->min-height: ;

Granica

• bd ->border: ;
• bd+ ->border:1px solid #000;
• bd:n ->border:none;

Emmet je sjajan!

S Emmetom možete stvoriti stvarno složenu HTML strukturu s jednim retkom. Stvarno je strava. I to također radi sa CSS-om.

Možete vidjeti kako Emmet može drastično povećati vašu učinkovitost i brzinu prilikom pisanja HTML-a i CSS-a.

Ako želite dodatno povećati svoju učinkovitost i brzinu tijekom korištenja VS koda, pogledajte moj tečaj Postanite VS kôd SuperHero.

Tečaj zaranja mnogo dublje u ove koncepte i pomaže vam da postanete brz, učinkovit programer superheroja :)

Ja sam Jesse iz Teksasa. Pogledajte moj drugi sadržaj i javite mi kako vam mogu pomoći na vašem putu da postanete web programer.

• Pretplatite se na moj YouTube
• Reci zdravo! Instagram | Cvrkut
• Prijavite se za moj bilten