Pool tundi lihtsa meili küljendamiseks. Kümme minutit viie reaga tabeli jaoks. Tund maandumislehe jaoks, kus on korduvad kaardid. Ja seda ilma parandusteta, lihtsalt siltide trükkimine, ilma et ükski sulgev silt puudu jääks või pesastus sassi läheks.

Kõlab tuttavalt? Rutiin tapab kiiruse ja su pilk muutub klaasistunuks pärast kolmekümnendat <tr><td>...</td></tr>. Sa tahad kirjutada ühe rea, vajutada nuppu ja saada valmis DOM-i.

Emmet teeb täpselt seda. Plugin laiendab lühikesi CSS-i-laadseid avaldisi murdosa sekundiga puhtaks HTML-iks. Ja epixx.github.io meeskond on selle süntaksi pakendanud interaktiivsesse treenerisse koos reaalajas valideerimisega, mille läbimine võtab tund aega ega vaja paigaldamist.

💡 Kiire ülevaade:

• Mis Emmet on, kust see tuli ja miks see on VS Code'is vaikimisi sees
• Epixxi treeneri samm-sammuline läbikäik: kuidas ülesanded ja sisseehitatud kursus töötavad
• Peamised süntaksi operaatorid koos reaalse näitega: kolme reaga tabel ühest lühendist
• Ressursid süvenemiseks: dokumentatsioon, ekraanisaated ja spikker

Mis Emmet on ja miks see endiselt mängus on

Emmet on koodiredaktori plugin, mis teisendab lühendid täispikkadeks HTML-iks või CSS-iks. Sa kirjutad ul>li*5>a, vajutad Tab ja saad viie elemendiga täpploendi koos linkidega. Ei mingit kopeeri-kleebi, ei mingit iga sildi käsitsi kirjutamist.

Projekt sai alguse 2008. aastal nimega Zen Coding (autor: Sergey Chikuyonok), hiljem nimetati ümber Emmetiks ja tänaseks on sellest saanud kiire märgendamise standard. Alates 2022. aastast on plugin VS Code'is vaikimisi sees: avad redaktori ja asud kohe tööle, paigaldamine pole vajalik. See on saadaval ka Sublime Texti, WebStormi, PHPStormi ja teiste redaktorite jaoks Emmeti veebisaidi kaudu.

Peamine eelis klassikaliste juppide ees on dünaamiline laiendamine. Jupp on püsivalt kodeeritud ega muutu käigu pealt. Emmeti avaldist saab laiendada, ümber struktureerida või olemasoleva koodi ümber mässida. Lühend table>tr*3>td>img+p+a annab erineva tulemuse, kui muudad kordajat *3 -> *5 või lisad klassi .footer-row, ja seda kõike ühel real ilma malle ümber defineerimata.

Emmet suudab ka:

• kiiresti sõlmede vahel liikuda (Go to Edit Point);
• mässida valitud koodi uue sildiga (Wrap with Abbreviation);
• tasakaalustada valikut, laiendades või kitsendades seda vanema või lapse sildini;
• genereerida "Lorem Ipsumit" mis tahes pikkuses;
• suurendada numbreid korduvates elementides, kasutades $.

Epixxi treener: praktika loengute asemel

Epixxi treener on veebikursus, mis viib su nullist süntaksi kindla valdamiseni. Paigaldamist pole vaja: avad lehe brauseris ja alustad kohe ülesannetega.

Mehaanika on lihtne. Vasakul näed teooriat ja näidistulemust. Paremal on sisestusväli Emmeti avaldise jaoks. Kirjutad lühendi, klõpsad "Check" ja näed genereeritud HTML-i. Kui see ühtib näidisega, liigud järgmise ülesande juurde. Kui mitte, proovid uuesti, kuni see õnnestub.

Kursus on jagatud loogilisteks plokkideks:

• põhielemendid ja pesastamine;
• korrutamise ja nummerdamise operaatorid;
• klassid, ID-d ja atribuudid;
• tekstisõlmed ja "Lorem Ipsum";
• taseme võrra üles ronimine (^) ja grupeerimine.

Iga ülesanne annab täpselt nii palju teooriat, kui selle lahendamiseks vaja. See pole loeng, see on jõusaal: loed miinimumi, kirjutad maksimumi. Vigu ei karistata, sa lihtsalt sisestad uue avaldise ja näed kohe, mis muutus.

Treenerit kasutades hoia lahti Emmeti toega redaktor (VS Code, Sublime) ja korda võtteid päris HTML-failis. Lihasmälu tekib kiiremini, kui su sõrmed jätavad lühendid meelde, mitte ainult silmad.

Emmeti süntaks: lihtsast keeruliseni

Vaatame peamisi operaatoreid ühe konkreetse ülesande põhjal. Sul on vaja tabelit kolme reaga, kus igas lahtris on pilt, lõik ja link.

Selle asemel, et iga silt käsitsi trükkida ja ridu kolm korda kopeerida, kirjutad sa ühe rea:

1
table>tr*3>td>img+p+a

Pärast Tab (või Ctrl+E, olenevalt redaktorist) vajutamist laiendab Emmet selle valmis struktuuriks:

1
<table>
2
  <tr>
3
    <td>
4
      <img src="" alt="" />
5
      <p></p>
6
      <a href=""></a>
7
    </td>
8
  </tr>
9
  <tr>
10
    <td>
11
      <img src="" alt="" />
12
      <p></p>
13
      <a href=""></a>
14
    </td>
15
  </tr>
16
  <tr>
17
    <td>
18
      <img src="" alt="" />
19
      <p></p>
20
      <a href=""></a>
21
    </td>
22
  </tr>
23
</table>

Nüüd operaatoritest:

• > tähistab alamelementi. table>tr tähendab „tr elemendi table sees".
• *N on korrutamine. tr*3 annab kolm rida.
• + on samal tasemel olev sõsarelement. img+p+a loob kolm elementi üksteise järel ühe vanema sees.
• ^ liigub ühe taseme võrra üles. See on abiks, kui on vaja sügavast pesast välja hüpata ilma uut avaldist alustamata.
• $ on automaatne inkrement. li.item$*3 annab tulemuseks <li class="item1"> ja nii edasi kuni item3-ni.

Atribuutide jaoks kasuta nurksulge. Tabel cellpadding ja cellspacing atribuutidega kirjutatakse nii:

1
table[cellpadding=0 cellspacing=0]>tr*3>td

Tekstisõlme jaoks kasutatakse looksulge: a{Click here} laieneb kujule <a href="">Click here</a>. Kiireks täiteteksti genereerimiseks piisab sõnast lorem ja Emmet väljastab täitelõigu. lorem10 annab täpselt 10 sõna.

Paljud arendajad kasutavad Emmetit mitte ainult esialgse märgendi loomiseks, vaid ka olemasoleva koodi mähkimiseks: vali plokk, käivita „Wrap with Abbreviation" käsk, sisesta mähise silt. Valmis, ilma lõpusilti käsitsi lohistamata.

Kust edasi õppida: usaldusväärsed allikad

Pärast Epixxi treenari läbimist tuleks oskust reaalsete ülesannete peal kinnistada ja õppida tehnikaid kogenud arendajatelt. Siin on kogumik materjale alates ametlikust dokumentatsioonist kuni ekraanivideoteni.

• Ametlik Emmeti dokumentatsioon: täielik süntaksi, tegevuste ja seadistamise teatmik. Alusta siit, kui vajad täpset vastust konkreetse operaatori või filtri kohta.
• CSS-Tricksi ekraanivideo: „Emmet is Awesome": lühike video reaalajas tehnikatega ühelt autoriteetseimalt allikalt front-end kogukonnas.
• Smashing Magazine: Goodbye Zen Coding, Hello Emmet: ajalooline artikkel üleminekust Zen Codingult Emmetile. Kasulik tööriista filosoofia mõistmiseks.
• Atomic Object: Easy HTML with Emmet: praktiline sissejuhatus, mis keskendub igapäevasele kasutamisele, mitte süntaksi teatmikule.

Ja kiireks süntaksi meeldetuletamiseks enne tööd hoia käepärast Emmeti spikrilehte: kõik operaatorid ühel ekraanil.

Video: Emmet 15 minutiga

Kui tekstiformaat ei ole sinu jaoks, vaata Web Dev Simplifiedi ekraanivideot. Kyle demonstreerib töövoogu reaalsete näidetega: lihtsatest siltidest kuni keeruka pesastuseni koos klasside ja tekstisõlmedega.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean Emmeti eraldi installima?

VS Code'is mitte. Alates 2022. aastast on Emmet redaktori standardkomplektis ja töötab kohe pärast käivitamist. Sublime Texti, WebStormi, PHPStormi ja teiste redaktorite jaoks installi plugin turuplatsilt, ametliku veebisaidi vahekaardilt „Download". VS Code kasutab Emmet 2.0 süntaksit, mis on avaldistes tühikute suhtes veidi rangem. Kui lühend ei laiene, veendu, et fail on salvestatud HTML-vormingus, mitte lihttekstina.

Kas Emmetit saab kasutada CSS-i jaoks?

Jah. Lühendid nagu m20 laienevad kujule margin: 20px; ja bdrs5 laieneb kujule border-radius: 5px;. Emmet genereerib ka brauseriprefikseid (-webkit-, -moz-) ja gradiente. Täielik lühendite nimekiri on ametliku dokumentatsiooni jaotises „CSS Abbreviations".

Mille poolest erineb Emmet tavalistest juppidest (snippets)?

Jupp on jäik mall: see, mille sa kodeerisid, ongi see, mille saad. Emmeti avaldis on dünaamiline: muudad kordajat, lisad klassi, mähid selle teise sildiga ja tulemus ehitatakse lennult ümber. Jupp table>tr*3>td jaoks ei anna sulle tulemust table>tr*7>td ilma uut malli loomata, kuid Emmet annab, kui muudad koheselt ühte numbrit.

Miks kasutada Epixxi treenerit, kui dokumentatsioon on olemas?

Dokumentatsioon selgitab „mida", treener aga harjutab „kuidas". Pärast kursuse läbimist trükivad su sõrmed automaatselt ul>li.item$*5>a{Item $}, ilma et sirutaksid käe hiire järele. Vahe on nagu sõiduki käsiraamatu ja autoroolis veedetud tundide vahel: teooria on kasulik, kuid ainult praktika loob oskuse.

Kas Emmet töötab JSX-i ja mallidega?

Jah. VS Code toetab Emmetit JSX-failides; luba säte emmet.includeLanguages ja vastenda javascriptreact väärtusega html. Sarnased seadistused on olemas Vue ja Angular jaoks. Punktiga klassid ja dieesiga ID-d töötavad tavapäraselt.

Kas Emmetile on 2026. aastal alternatiive?

Otseseid alternatiive, mis kasutaksid sama „lühike sõne valmis struktuuriks" lähenemist, ei ole. AI-tööriistad nagu Copilot ja ChatGPT genereerivad koodi kirjelduste põhjal, kuid nõuavad päringu sõnastamist ja tulemuse kontrollimist. Emmet on rutiinse märgendi jaoks kiirem: neli klahvivajutust ja sul on käes valmis struktuur kümnest pesastatud sildist koos klasside ja atribuutidega. Need tööriistad ei konkureeri, vaid täiendavad üksteist.

Õpi tunniga, tasub end ära nädalaga

Emmet ei nõua süvitsi õppimist. Epixxi treeneri täielik läbimine võtab aega kolmkümmend minutit kuni tund. Pane spikker teisele monitorile ja proovi iga avaldist reaalses projektis. Paari päeva pärast sa ei märkagi enam, et kasutad Emmetit; sellest saab su klaviatuuri loomulik pikendus.

Kui sa ehitad HTML-kirju, maandumislehti või liidesekomponente, tasub üks õppimistund end ära juba esimese nädala lõpuks. Ja Epixxi treener muudab selle tunni võimalikult sisutihedaks. Ava epixx.github.io/emmet ja proovi esimest ülesannet kohe: installimist pole vaja, tulemused on kohe nähtavad.