O webu
Emmet

Stránka projektu emmet.io

Použít jej lze v mnoha editorech (i v Sublime Text, PSPadu, NetBeans nebo Eclipse atd.) a je dostupný i v JavaScriptu pro použití na webu.

Instalace

Sublime Text

Do editoru Sublime Text se Emmet instaluje stejně jako ostatní pluginy přes Package Control.

PSPad

Stačí nahrát výše uvedný soubor do adresáře Script\JScript ve složce PSPadu, tj. standardně do umístění C:\Program Files (x86)\PSPad editor\Script\JScript.

Následně potom povolit skriptování v NastaveníNastaveni programuIntegrace do systemuPodpora skriptování pomocí WSH. Povolení skriptování v PSPadu

V PSPadu se pro aplikaci Emmetu na text před kursorem používá zkratka Ctrl + ,.

Využití

S Emmetem si lze výrazně urychlit a zkrátit zápis celých HTML bloků nebo CSS pravidel. Stačí napsat pár znaků a odpálit je standardně Tabulátorem nebo pomocí Ctrl + Enter.

Pár příkladů

HTML

Odkaz s třídou button

a.button, Tab

Zaškrtávací <input> v <label>u

label(input[type=checkbox]), Tab

Seznam s pěti položkami

ul(li{Položka}*5), Tab

Využít lze i číslování pořadí — je dostupné v $.

ul(li{Položka $}*5), Tab

  • Číslovat od konce lze zavináče a spojovníku (@-),
  • číslování od čísla tři @b3,
  • pro pevný počet míst čísel stačí více dolarů,
  • vše jde .
Jednoduchá struktura nadpisů

h1+h2+p+h2+h3, Tab

Komentář za ukončujícím <div>em

Pro přehlednost se občas hodí za ukončovací značku přidat komentář s třídou, aby bylo jasné, co značka ukončuje.

.clanek|c, Tab

Tohoto chování je možné dosáhnout i automaticky.

Stačí do souboru User/Emmet.sublime-settings nakopírovat následující a restartovat.

{
  "preferences": {
    "filter.commentAfter": "<!-- /<%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
  },
  "syntaxProfiles": {
    "html" : {
      "filters" : "html, c"
    }
  }
}

Dá se do něj dostat přes Preferences → Package Settings → Emmet → Settings – User.

Celý layout

html:5>.header(img#logo)+.menu(ul(li>a{Odkaz $}*5))+.content(h1+p)+.footer, Tab

Lorem ipsum generátor

lorem, Tab

Lze používat i při zápisu „element*5“, číslo za lorem nastaví počet slov.

CSS

Podobná kouzla lze provádět i v CSS.

Absolutně posicovaný element

posa+t10+l30+w100+h100+p1e+m1e, Tab

Rámeček

bt1-s#, Tab

Na první pohled vypadají HTML i CSS zkratky dost šíleně, nicméně jsou až překvapivě dobře promyšlené a svým způsobem intuitivní. Třeba k podivnému zápisu horního rámečku lze dojít postupným zkracováním.

Nejdříve jsem napsal bt:1-s-#000 a zkoušel, co by se ještě dalo ubrat (bt:1-s-#0bt1-s#). Převedení # bez kódu barvy na nulu je už trochu extrémní, ale myslím, že to hezky ilustruje tu promyšlenost.

Kromě možnosti používat zkratky jednotlivých vlastností funguje i tzv. fuzzy search, kdy se Emmet snaží dohledávat, co vlastně chce člověk napsat, takže si lze v podstatě vytvořit svůj vlastní styl zápisu.

Další hezké funkce a vysvětlující dema jsou v dokumentaci.

Hayaku

Hayaku umožňuje ještě možná trochu lepší napovídání CSS vlastností a hodnot v Sublime Textu. Pohodlnější vytváření HTML kódu ale nenabízí.