Emmet für schnelleres schreiben von HTML

Direkt von Emmet:

Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes.

Das Sublime Plugin Emmet nutzt eine CSS ähnliche Schreibweise um schneller HTML schreiben zu können. Zusätzlich bringt es einige weitere Funktionen als kleine Helfer mit. Hier eine Übersicht der folgenden Inhalte um Emmet näher zu bringen:

Inhalte

Installieren

Emmet kann über die Sublime Package Control installiert werden. Ctrl + ⇧ + P(Windows / Linux) oder ⌘ + ⇧ + P (Mac OSX) -> Package Control: Install Package ->Emmet.

Schnelles Beispiel

Ich will der ganzen Sache mal vorweg greifen und hier ein schnelles Beispiel bringen was mit Emmet möglich ist. Dazu in Sublime ein neues HTML-Dokument öffnen und folgendes eingeben (sieht komplizierter aus als es ist):

(header.wrapper>nav>ul>(li>a{Item $})*4)>main.wrapper>h1{Hello World}+p{Lorem ipsum ...}

Den Cursor jetzt an das Ende setzen und Tab drücken, somit wird folgendes HTML erzeugt:

<header class="wrapper">
    <nav>
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
        </ul>
    </nav>
</header>
<main class="wrapper">
    <h1>Hello World</h1>
    <p>Lorem ipsum ...</p>
</main>

Nicht schlecht oder? Aber jetzt mal alles der Reihe nach.

Elemente erzeugen

Zum erzeugen von Tags und dem setzen des Cursors in den Tag wird einfach der Tag-Name geschrieben und mit Tab Emmet ausgeführt:

span

Tab drücken:

<span>[Hier ist jetzt der Cursor]</span>

Kindelemente

Mit dem >-Operator können Kindelemente erzeugt werden:

div>p

erzeugt:

<div>
    <p></p>
</div>

Folgeelemente

Nachfolgende Elemente (Elemente auf der selben Ebene) werden mit dem +-Operator erstellt:

div+p

erzeugt:

<div></div>
<p></p>

Multiplikator

Um gleich mehrere Elemente zu erzeugen kann der *-Operator genutzt werden mit einem angestellten Zahlwert.

ul>li*4

wird zu:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Gruppieren

Ebenfalls sehr nützlich ist das erstellen von Gruppen. Nehmen wir wieder das Beispiel einer Liste, diesmal aber bitte mit Link-Tags. Emmet:

ul>(li>a)*4

Durch das gruppieren von li und a und dem anwenden des Multiplikators erhalten wir eine Liste mit Links:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Klassen und ID’s vergeben

Per CSS-Schreibweise mit . für Klassen und # für ID’s können auch diese Werte gleich gesetzt werden. Für Klassen:

div.wrapper

wird

<div class="wrapper"></div>

Und für ID’s:

div#header

wird

<div id="header"></div>

Attribute

Auch individuelle Attribute können per CSS-Schreibweise mit [] erzeugt werden:

a[rel="nofollow" data-action="click"]
<a href="" rel="nofollow" data-action="click"></a>

Mehrere Attribute werden mit einem Leerzeichen getrennt in die eckigen Klammern geschrieben.

Platzhalter für Nummern

Der Operator $ dient als Platzhalter für eine Nummerierung. So können wir das Beispiel mit der Liste etwas abändern:

ul>li.item$*4

Wir setzen eine Klasse mit dem $-Operator und erhalten nummerierte Klassen:

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

Dieser kann auch mehrfach genutzt werden um die Zahl 0 voran zu stellen:

ul>li.item$$*10
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
    <li class="item06"></li>
    <li class="item07"></li>
    <li class="item08"></li>
    <li class="item09"></li>
    <li class="item10"></li>
</ul>

Text

Auch Text kann sogleich einem Element hinzugefügt werden, per {}:

p{Hello World}

wird:

<p>Hello World</p>

Um das Beispiel mit der Liste zu verfeinern (und den Platzhalter für Nummerierung zu nutzen):

ul>(li>a{Item $})*4
<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
</ul>

Lorem ipsum

Eine weitere Funktion ist das einfügen von „Lorem ipsum“ Text mit Emmet (im Gegensatz zu vielen Meinungen ist „Lorem ipsum“ kein echtes Latein, vielmehr pseudo Text der an die lateinische Sprache angelehnt ist, siehe Wikipedia). Folgender Emmet Code erzeugt vier Absätze mit „Lorem ipsum“:

(p>lorem)*4
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis esse sunt reiciendis sed voluptatibus. Ea eos omnis autem animi vero qui repudiandae veniam iste nam accusamus ex dolores, harum nisi.</p>
<p>Dolor ut adipisci similique asperiores harum repellat consectetur quam cupiditate doloremque neque sequi ipsum pariatur omnis hic, inventore sunt architecto excepturi dolore nemo eligendi magni eveniet. Dolores, mollitia nihil! Ullam!</p>
<p>Quo magnam perferendis consequatur voluptatem quidem sit eum itaque dignissimos commodi neque quod dolorum molestias quia consectetur aliquid repellat, facere autem dolorem unde illo laboriosam deleniti et! Facilis, non, neque!</p>
<p>Cupiditate, quaerat aspernatur, aliquid voluptates quibusdam nisi numquam quae, fugit, exercitationem ullam eos? Amet tempore eveniet, blanditiis aut illo iusto expedita fuga, quibusdam aliquam fugit dolor quidem sapiente perferendis reprehenderit!</p>

Nettes Feature muss ich sagen!

Hilfreiche Funktionen über die Sublime Command Palette

Des weiteren kommen mit Emmet noch einige weitere nützliche Funktionen, die, wenn sie nicht auf einen Shortcut gelegt wurden, über die Sublime Command Palette verfügbar sind (Ctrl + ⇧ + P (Windows / Linux) oder ⌘ + ⇧ + P (Mac OSX)).

Toggle Comment

Mit dem Befehl Emmet: Toggle Command können schnelle ganze HTML-Blöcke aus- oder einkommentiert werden. Einfach in das passende Element den Cursor setzen und das Kommando ausführen. So wird aus (Cursor im ul-Tag):

<header>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>
<main class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolorem, optio officiis beatae illum eaque ad nihil consequuntur tenetur, eius velit omnis tempora maxime in fuga similique reiciendis eum, molestiae.</p>
</main>

das:

<header>
    <nav>
        <!-- <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
    </nav>
</header>
<main class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolorem, optio officiis beatae illum eaque ad nihil consequuntur tenetur, eius velit omnis tempora maxime in fuga similique reiciendis eum, molestiae.</p>
</main>

Update Image Size

Ebenfalls eine nette Sache ist das setzen von Bildgrößen an img-Tags. Mit dem Befehl Emmet: Update Image Size kann das width und height Attribut gesetzt oder aktualisiert werden:

<img src="bild.jpg" alt="" />

Cursor auf das Bildelement setzen, Befehl ausführen und wenn die Verknüpfung stimmt kommt das dabei raus:

<img src="bild.jpg" alt="" width="250" height="175" />

Weitere Funktionen

Natürlich gibt es noch weitaus mehr Funktionen, die darf aber jeder für sich selbst entdecken oder unter Emmet Actions ansehen.

Abschluss

Emmet bietet neben den bereits gezeigten Funktionen und Schreibweisen noch weit aus mehr, wie der ^-Operator auf den ich nicht eingegangen bin. Aber für den Start sollte das reichen 😉

Wer alles etwas genauer ansehen will geht einfach auf Emmet Syntax und klickt sich durch. Emmet ist zwar nicht neu, aber eine Erwähnung wert. Ist man erstmal an dem Punkt wo man flüssig Emmet schreibt, schreibt man HTML mit Turbo Boost!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.