Ich möchte euch Emmet vorstellen. Ein Werkzeug Frontend-Developer. Ist zwar eigentlich ein alter Hut (früher bekannt unter dem viel cooleren Namen ZenCoding), aber es ist nie zu spät gute Werkzeuge vorzustellen. Das man viel mehr über (gute) alte Hüte sprechen sollte, wurde mir besonders klar als ich mich so freute zu lesen, dass @mkuehnel 2013 einen Vortrag über Twitter gehalten hat. Vor einem Publikum das durchweg aus Webworkern besteht :D

Zudem ist Emmet so eines dieser Dinge, die sich so gut in den Workflow integrieren, dass man's kaum noch spürt und dementsprechend auch nicht mehr darüber spricht.

Was macht Emmet?

Es handelt sich um eine bestimmte Art HTML zu schreiben. Hat man Emmet in Form von einem Plugin in seinen Code-Editor integriert, so kann man z.b. folgenden Text schreiben:

div.foobar

Dann drückt man die Tabulator-Taste , und es wird folgendes HTML generiert:

<div class="foobar"></div>

Man spaart sich also mit Emmet viel getippe beim HTML schreiben. Meine weiteren Beispiele könnt ihr am besten gleich selbst ausprobieren, nachdem ihr euch das Plugin installiert habt.

In meinen vorherigen Workflow-Artikeln haben wir den Sublime Text hübscher gemacht, ihm manieren beigebracht und den Package-Manager installiert. Zum installieren von Emmet macht ihr nun Folgendes:

  • Command-Palette öffnen (++p)
  • Package Install eingeben und Enter drücken (...ein paar Sekunden warten)
  • Namen des Packages Emmet eingeben. Enter.
  • Sublime neu starten.

Solltet ihr Emmet in einem anderen Editor als dem Sublime verwenden wollen, werdet ihr hier bestimmt glücklich.

Beispiele

Die folgenden Snippets könnt ihr euch jetzt also in eine leere .html-Datei kopieren, und selbst beobachten was bei passiert. So richtig interessant wird es, wenn man etwas größere Aufgaben per Emmet erledigt. Ich baue mir meine Navigation beispielsweise so:

div.nav>ul>li*5>a

Auch Möglich ist z.B. eine Tabelle mit zwei zeilen und drei Spalten:

table>tr*2>td*3

Und hier noch eine reihe an Containern mit durchnummerierten ID's:

div#foobar-$*5

Und zu guterletzt noch eine einfache HTML-Seite in Emmet:

html:5>(header>img.logo)+(nav>ul>li*5>a)+(section>h1+p+aside)+(footer>span)

Auch für oft wiederkehrendes css kann man Emmet nutzen. Wenn ihr genaueres wissen wollt, schaut in die Emmet-Docs oder die Dokumentation des Sublime-Packages.