Puoli tuntia yksinkertaisen sähköpostin asetteluun. Kymmenen minuuttia viisiriviseen taulukkoon. Tunti laskeutumissivulle, jossa on toistuvia kortteja. Ja tämä ilman korjauksia, pelkkää tagien kirjoittamista, unohtamatta sulkevia tageja, sotkematta sisäkkäisyyksiä.

Kuulostaako tutulta? Rutiini tappaa nopeuden, ja silmäsi lasittuvat kolmannenkymmenennen <tr><td>...</td></tr>:n jälkeen. Haluat kirjoittaa yhden rivin, painaa nappia ja saada valmiin DOM-rakenteen.

Emmet tekee juuri sen. Lisäosa laajentaa lyhyet CSS:n kaltaiset lausekkeet siistiin HTML:ään sekunnin murto-osassa. Ja epixx.github.io-tiimi on paketoinut syntaksin interaktiiviseksi harjoitteluohjelmaksi, jossa on live-validointi, jonka suorittamiseen menee tunti ja joka ei vaadi asennusta.

💡 Pikaopas:

• Mitä Emmet on, mistä se tuli ja miksi se on oletuksena sisäänrakennettuna VS Codessa
• Vaiheittainen läpikäynti Epixx-harjoitteluohjelmasta: miten tehtävät ja sisäänrakennettu kurssi toimivat
• Keskeiset syntaksioperaattorit todellisen esimerkin kautta: kolmirivinen taulukko yhdestä lyhenteestä
• Resursseja syvempään perehtymiseen: dokumentaatio, screencastit ja pikaopas

Mikä Emmet on ja miksi se on yhä relevantti

Emmet on koodieditorin lisäosa, joka muuntaa lyhenteet täysimittaiseksi HTML:ksi tai CSS:ksi. Kirjoitat ul>li*5>a, painat Tab-näppäintä ja saat luettelomerkein varustetun listan, jossa on viisi linkkielementtiä. Ei kopioi-liitä-toimintoa, ei jokaisen tagin manuaalista kirjoittamista.

Projekti alkoi vuonna 2008 nimellä Zen Coding (tekijä: Sergey Chikuyonok), nimettiin myöhemmin Emmetiksi ja on nykyään nopean merkintäkielen standardi. Vuodesta 2022 lähtien lisäosa on ollut sisäänrakennettuna VS Codessa valmiina: avaat editorin ja aloitat työskentelyn heti ilman asennusta. Se on saatavilla myös Sublime Textiin, WebStormiin, PHPStormiin ja muihin editoreihin Emmetin verkkosivuston markkinapaikan kautta.

Suurin etu perinteisiin pätkiin verrattuna on dynaaminen laajennus. Pätkä on kovakoodattu eikä muutu lennosta. Emmet-lauseketta voi laajentaa, muokata rakennetta tai kietoa olemassa olevan koodin ympärille. Lyhenne table>tr*3>td>img+p+a tuottaa eri tuloksen, kun muutat kertoimen *3 muotoon *5 tai lisäät luokan .footer-row, kaikki yhdellä rivillä ilman mallipohjien uudelleenmäärittelyä.

Emmet pystyy myös:

• hyppäämään nopeasti solmujen välillä (Go to Edit Point)
• kietomaan valitun koodin uudella tagilla (Wrap with Abbreviation)
• tasapainottamaan valintaa, laajentaen tai kaventaen sen ylemmän tai alemman tason tagiin
• generoimaan "Lorem Ipsum" -tekstiä minkä tahansa pituisena
• kasvattamaan numeroita toistuvissa elementeissä käyttäen $-merkkiä

Epixx-harjoitteluohjelma: käytäntöä luentojen sijaan

Epixx-harjoitteluohjelma on verkkokurssi, joka vie sinut nollasta syntaksin varmaan hallintaan. Ei asennusta: avaat sivun selaimessa ja aloitat tehtävät heti.

Mekaniikka on yksinkertainen. Vasemmalla näet teoriaa ja mallituloksen. Oikealla on syöttökenttä Emmet-lausekkeelle. Kirjoitat lyhenteen, napsautat "Tarkista" ja näet generoidun HTML:n. Jos se vastaa mallia, siirryt seuraavaan tehtävään. Jos ei, yrität uudelleen, kunnes onnistut.

Kurssi on jaettu loogisiin osioihin:

• peruselementit ja sisäkkäisyys
• kerto- ja numerointioperaattorit
• luokat, ID:t ja attribuutit
• tekstisolmut ja "Lorem Ipsum"
• tason ylöspäin nousu (^) ja ryhmittely

Jokainen tehtävä tarjoaa juuri sen verran teoriaa kuin sen suorittamiseen tarvitaan. Tämä ei ole luento, vaan kuntosali: luet minimin, kirjoitat maksimin. Virheitä ei rangaista; syötät vain uuden lausekkeen ja näet heti, mikä muuttui.

Pidä harjoitteluohjelmaa käyttäessäsi auki editoria, jossa on Emmet-tuki (VS Code, Sublime), ja toista tekniikat oikeassa HTML-tiedostossa. Lihasmuisti kehittyy nopeammin, kun sormesi opettelevat lyhenteet, eivät vain silmäsi.

Emmet-syntaksi: yksinkertaisesta monimutkaiseen

Puretaan keskeiset operaattorit tietyn tehtävän avulla. Tarvitset taulukon, jossa on kolme riviä ja jonka jokaisessa solussa on kuva, kappale ja linkki.

Sen sijaan, että kirjoittaisit jokaisen tagin käsin ja kopioisit rivejä kolme kertaa, kirjoitat yhden rivin:

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

Tab-näppäimen (tai Ctrl+E, editorista riippuen) painamisen jälkeen Emmet laajentaa sen valmiiksi rakenteeksi:

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>

Nyt operaattoreihin:

• > on lapsielementti. table>tr tarkoittaa "tr tablen sisällä".
• *N on kertolasku. tr*3 antaa kolme riviä.
• + on sisaruselementti samalla tasolla. img+p+a luo kolme elementtiä peräkkäin yhden vanhemman sisään.
• ^ kiipeää yhden tason ylöspäin. Se auttaa, kun pitää hypätä ulos syvästä sisäkkäisyydestä ilman uutta lauseketta.
• $ on automaattinen numerointi. li.item$*3 antaa <li class="item1"> ja niin edelleen aina item3:een asti.

Attribuutteja varten käytä hakasulkeita. Taulukko, jossa on cellpadding ja cellspacing, kirjoitetaan näin:

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

Tekstisolmu käyttää aaltosulkeita: a{Click here} laajenee muotoon <a href="">Click here</a>. Nopeaan täytetekstin luontiin riittää sana lorem, ja Emmet tulostaa täytekappaleen. lorem10 antaa tasan 10 sanaa.

Moni kehittäjä käyttää Emmetiä paitsi alustavaan merkintään myös olemassa olevan koodin käärimiseen: valitse lohko, suorita Wrap with Abbreviation -komento, syötä kääretagi. Valmista, ilman päättävän tagin manuaalista raahaamista.

Mistä oppia lisää: luotettavat lähteet

Kun olet käynyt Epixxin harjoittelun läpi, taito kannattaa vakiinnuttaa oikeilla tehtävillä ja oppia tekniikoita kokeneilta kehittäjiltä. Tässä kokoelma materiaaleja virallisesta dokumentaatiosta screencasteihin.

• Virallinen Emmet-dokumentaatio: täydellinen viite syntaksille, toiminnoille ja asetuksille. Aloita täältä, kun tarvitset tarkan vastauksen tietystä operaattorista tai suodattimesta.
• CSS-Tricksin screencast: "Emmet is Awesome": lyhyt video reaaliaikaisilla tekniikoilla yhdeltä frontend-yhteisön arvovaltaisimmista lähteistä.
• Smashing Magazine: Goodbye Zen Coding, Hello Emmet: historiallinen artikkeli siirtymästä Zen Codingista Emmetiin. Hyödyllinen työkalun filosofian ymmärtämiseen.
• Atomic Object: Easy HTML with Emmet: käytännönläheinen johdanto, joka keskittyy jokapäiväiseen käyttöön syntaksiviitteen sijaan.

Ja nopeaa syntaksin kertausta varten ennen töiden aloitusta pidä Emmetin lunttilappu käsillä: kaikki operaattorit yhdellä ruudulla.

Video: Emmet 15 minuutissa

Jos tekstimuoto ei ole juttusi, katso Web Dev Simplifiedin screencast. Kyle esittelee työnkulkua oikeilla esimerkeillä: yksinkertaisista tageista monimutkaiseen sisäkkäisyyteen luokkien ja tekstisolmujen kanssa.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö Emmet asentaa erikseen?

Ei VS Codessa. Vuodesta 2022 lähtien Emmet on sisältynyt editorin vakiopakettiin ja toimii heti käynnistyksen jälkeen. Sublime Textiin, WebStormiin, PHPStormiin ja muihin editoreihin asenna lisäosa markkinapaikalta, "Download"-välilehdeltä virallisella sivustolla. VS Code käyttää Emmet 2.0 -syntaksia, joka on hieman tarkempi lausekkeiden välilyönneistä. Jos lyhenne ei laajene, varmista, että tiedosto on tallennettu HTML-muodossa, ei pelkkänä tekstinä.

Voinko käyttää Emmetiä CSS:ään?

Kyllä. Lyhenteet kuten m20 laajenevat muotoon margin: 20px; ja bdrs5 muotoon border-radius: 5px;. Emmet tuottaa myös selainkohtaiset etuliitteet (-webkit-, -moz-) ja liukuvärit. Täydellinen lista lyhenteistä on "CSS Abbreviations" -osiossa virallisessa dokumentaatiossa.

Miten Emmet eroaa tavallisista koodinpätkistä?

Koodinpätkä on jäykkä malli: saat sen, minkä koodaat. Emmet-lauseke on dynaaminen: muutat kerrointa, lisäät luokan, käärit sen toisella tagilla, ja lopputulos rakentuu lennossa uudelleen. Koodinpätkä table>tr*3>td ei anna sinulle table>tr*7>td ilman uuden mallin luomista, mutta Emmet antaa, kun vaihdat yhden numeron.

Miksi käyttää Epixx-harjoitinta, jos dokumentaatio on olemassa?

Dokumentaatio selittää "mitä", kun taas harjoitin harjoituttaa "miten". Kurssin suoritettuasi sormesi kirjoittavat automaattisesti ul>li.item$*5>a{Item $} ilman, että tartut hiireen. Ero on kuin ajokortin teoriakirjan ja ratin takana vietettyjen tuntien välillä: teoria on hyödyllistä, mutta vain harjoitus rakentaa taidon.

Toimiiko Emmet JSX:n ja templaattien kanssa?

Kyllä. VS Code tukee Emmetiä JSX-tiedostoissa; ota käyttöön emmet.includeLanguages-asetus ja yhdistä javascriptreact html-muotoon. Vastaavat asetukset löytyvät Vuelle ja Angularille. Pisteillä merkityt luokat ja risuaidalla merkityt ID:t toimivat kuten tavallisesti.

Onko Emmetille vaihtoehtoja vuonna 2026?

Suoria vaihtoehtoja, joissa olisi sama "lyhyt merkkijono valmiiksi rakenteeksi" -lähestymistapa, ei ole. Tekoälytyökalut kuten Copilot ja ChatGPT tuottavat koodia kuvausten perusteella, mutta vaativat kehotteen muotoilua ja tuloksen tarkistamista. Emmet on nopeampi rutiininomaiseen merkintään: neljä näppäinpainallusta, ja sinulla on valmis kymmenen sisäkkäisen tagin rakenne luokkineen ja attribuutteineen. Nämä työkalut eivät kilpaile keskenään, vaan täydentävät toisiaan.

Opi tunnissa, maksa itsensä takaisin viikossa

Emmet ei vaadi syvällistä opiskelua. Epixx-harjoittimen suorittaminen kokonaan vie puolesta tunnista tuntiin. Laita lunttilappu toiselle näytölle ja kokeile jokaista lauseketta oikeassa projektissa. Parissa päivässä et enää huomaa käyttäväsi Emmetiä; siitä tulee näppäimistösi jatke.

Jos rakennat HTML-sähköposteja, laskeutumissivuja tai käyttöliittymäkomponentteja, oppimiseen käytetty tunti maksaa itsensä takaisin ensimmäisen viikon loppuun mennessä. Ja Epixx-harjoitin tekee siitä tunnista mahdollisimman tiiviin. Avaa epixx.github.io/emmet ja kokeile ensimmäistä tehtävää heti: ei asennusta, tulokset näkyvät välittömästi.