Emmet este una dintre caracteristicile mele încorporate preferate ale VS Code. De asemenea, este disponibil ca extensie în alte editoare de cod.

Gândiți-vă la Emmet ca pe o stenografie. Cu acesta, puteți scrie cu ușurință o mulțime de cod rapid. Vă accelerează dramatic fluxul de lucru HTML și CSS.

Înțelegerea modului de utilizare a Emmet este literalmente o superputere. Unii l-au numit chiar un cod de înșelăciune de codare. ?

Și este doar una dintre numeroasele caracteristici uimitoare încorporate ale VS Code.

Recent, am lansat un curs cuprinzător și detaliat numit Deveniți un cod VS SuperHero. Acoperă toate aspectele Codului VS în profunzime.

Acest articol se bazează pe una dintre cele 11 secțiuni ale cursului: Scrierea și formatarea codului.

HTML

Cu Emmet puteți crea rapid o placă HTML într-o clipită. Într-un fișier HTML, pur și simplu tastați ! și veți vedea că Emmet a apărut ca o sugestie. Acum lovește Enter. Iată-l, o pagină web HTML de bază, goală, gata de pornire.

Dacă nu ați mai văzut HTML înainte și nu aveți nici o idee despre ce este toate acestea, nu vă faceți griji. Doar demonstrez capacitățile VS Code și Emmet. Nu trebuie să știți ce înseamnă toate acestea chiar acum.

Etichete de bază

Pentru a crea etichete HTML de bază, trebuie doar să tastați numele etichetei și apăsați Enter. Observați cum Emmet vă plasează cursorul în interiorul etichetei. Acum sunteți configurat să continuați să tastați în interiorul etichetei.

  • Încercați să tastați: div apoi Enter, sau h1 Enter, sau p Enter.
  • Și acestea funcționează: bq Pentru o <blockquote>, hdr Pentru o <header>, ftr Pentru o <footer>, btn Pentru o <button>, și sect pentru o secțiune.

Clase

Dacă sunteți familiarizat cu CSS, Emmet folosește același mod pentru a se referi la clase folosind un .. Pentru a defini o clasă împreună cu eticheta pur și simplu adăugați-o astfel:

  • div.wrapper -> <div class="wrapper"></div>
  • h1.header.center -> <h1 class="header center"></h1>

ID-uri

Id funcționează la fel:

  • div#hero -> <div id="hero"></div>

Combinând

Puteți să le legați împreună:

  • div#hero.wrapper -> <div id="hero" class="wrapper"></div>

Atribute

De asemenea, putem specifica atribute pentru etichete:

  • img[src="https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/cat.jpg"][alt="Cute cat pic"] -> <img src="https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/cat.jpg" alt="Cute cat pic" />

Conţinut

Pentru a include conținut în etichetă, pur și simplu înfășurăm conținutul în acolade, { }.

  • p{This is a paragraph} -> <p>This is a paragraph</p>

Frați și copii

Pur și simplu se îmbunătățește. De asemenea, putem specifica frați și copii folosind + și > personaje.

  • section+section -> <section></section><section></section>
  • ul>li -> <ul><li></li></ul>

Urcând

Trebuie să încercați să vă imaginați ceea ce construiți în cap în timp ce tastați stenograma Emmet. În acest exemplu vom „urca” în copac folosind ^.

div+div>p>span+em^bq

Rezultat:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Aici, am dorit ca blockquote să fie la același nivel cu paragraful. Din această cauză, trebuia să „urcăm”. Altfel, ar fi în interiorul paragrafului.

Gruparea

Dacă structura dvs. este foarte complexă, vă recomandăm să grupați etichetele în loc să le parcurgeți urcând.

În acest exemplu, vom crea un antet și un subsol fără a urca folosind paranteze ( ).

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

Rezultat:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Înmulțirea și $

Putem genera mai multe etichete prin multiplicare (*) și numerotarea articolelor în ordine folosind un semn de dolar ($).

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

Puteți chiar personaliza secvența de numerotare prin umplerea cu zerouri, începând cu un anumit număr și chiar inversând direcția.

Pad cu zerouri: ul>li.item$$$*5

Rezultat:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Începeți cu un număr specific: ul>li.item$@3*5

Rezultat:

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

Direcție inversă: ul>li.item$@-*5

Rezultat:

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

Inversați direcția de la un anumit număr: ul>li.item$@-3*5

Rezultat:

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Numele implicite ale etichetelor

Există anumite etichete care nu trebuie să fie tastate și pot fi implicite.

  • O clasă definită inițial fără etichetă va fi implicată ca <div>.
    .wrapper -> <div class="wrapper"></div>
  • O clasă definită într-o etichetă de accent va fi implicată ca o <span>.
    em>.emphasis -> <em><span class="emphasis"></span></em>
  • O clasă definită într-o listă va fi implicată ca element de listă.
    ul>.item -> <ul><li class="item"></li></ul>
  • O clasă definită într-un tabel va fi implicată ca un <tr> și într-un rând ar fi un <td>.
    table>.row>.col -> <table><tr class="row"><td class="col"></td></tr></table>

Înfășurați cu etichete

Vor exista momente în care aveți cod existent pe care doriți să îl înfășurați cu o etichetă. Putem face cu ușurință cu Emmet.

Evidențiați codul pe care doriți să îl înfășurați și deschideți paleta de comandă (F1). Apoi căutați Emmet: Wrap with Abbreviation. Apoi vi se va prezenta o casetă de dialog în care puteți introduce elementul.

test -> <div>test</div>

Puteți utiliza, de asemenea, sintaxa standard Emmet în acest dialog. Încercați să înfășurați un text cu span.wrapper.

În mod implicit, această funcționalitate nu este atribuită unei comenzi rapide de la tastatură. Deci, dacă vă găsiți folosind-o des, poate doriți să adăugați o comandă rapidă personalizată pentru aceasta.

Lorem Ipsum

„Lorem Ipsum” este un text fals folosit de dezvoltatori pentru a reprezenta date pe o pagină. Doar tastați lorem și a lovit Enter. Emmet va genera 30 de cuvinte de text fals pe care le puteți folosi ca element de completare în proiectul dvs.

Cantitatea de cuvinte generate poate fi de asemenea definită.

  • lorem10 vă va oferi 10 cuvinte de text aleatoriu.

Punând totul împreună

Să folosim mai multe lucruri pe care le-am învățat până acum. Încercați acest lucru:

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

Rezultat:

<ul class="my-list">
  <li class="item-1">Lorem ipsum dolor sit amet.</li>
  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>
  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>
  <li class="item-4">Numquam architecto corrupti quam repudiandae.</li>
</ul>

CSS

În CSS, Emmet are o abreviere pentru fiecare proprietate. Nu am de gând să le enumăr pe toate, dar le voi indica pe cele mai utilizate. Pentru a vedea lista completă, consultați Emmet foaie de înșelăciune.

Poziţie

  • pos -> position:relative; (implicit la relativ)
  • pos:s -> position:static;
  • pos:a -> position:absolute;
  • pos:r -> position:relative;
  • pos:f -> position:fixed;

Afişa

  • d -> display:block; (blocare implicită)
  • 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;

Cursor

  • cur -> cursor:pointer;

Culoare

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

Marjă și căptușeală

  • 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: ;

Dimensiunea cutiei

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

Lăţime

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

Frontieră

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

Emmet este minunat!

Cu Emmet, puteți crea o structură HTML foarte complexă cu o singură linie. Este cu adevărat minunat. Și funcționează și cu CSS.

Puteți vedea cum Emmet vă poate crește drastic eficiența și viteza atunci când scrieți HTML și CSS.

Dacă doriți să vă sporiți în continuare eficiența și viteza în timp ce utilizați codul VS, verificați cursul meu Deveniți un cod VS SuperHero.

Cursul se aruncă mult mai adânc în aceste concepte și vă ajută să deveniți un dezvoltator de super-eroi rapid și eficient 🙂

Jesse Hall (codeSTACKr)

Sunt Jesse din Texas. Verificați celălalt conținut al meu și anunțați-mă cum vă pot ajuta în călătoria dvs. de a deveni dezvoltator web.