Emmet in Sublime Text

written by devangelist on Oktober 19, 2014 in Allgemein and HTML and HTML5 and Sublime Text with 2 comments

Egal, welcher Texteditor gerade verwendet wird – die Chance, dass es für diesen ein Emmet Plugin gibt, ist ziemlich groß. Wenn das der Fall sein sollte, dann wird dieses Werkzeug für das eine oder andere “Yeah, geil!” sorgen.

Emmet in SublimeText installieren

Um Emmet in SublimeText zu installieren muss als aller erstes Package Control für SublimeText installiert werden. Der auf der Webseite gefundene Code muss dafür einfach in die Console von SublimeText (ctrl+`oder View > ShowConsole) eingefügt werden.

Nach einem Neustart von SublimeText kann Emmet über das Package Control – ctrl+shift+p (Windows, Linux) oder cmd+shift+p (OS X) – mit dem Befehl install package installiert werden.

Einführung in Emmet

Jeder Entwickler weiß, dass das Tippen von HTML Code viel unnötige Zeit in Anspruch nimmt. Das muss aber eigentlich gar nicht sein, denn Emmet hilft mit Snippets und Abbreviations (Abkürzungen) das Schreiben von HTML und CSS Code deutlich zu beschleunigen:

div.container

Einmal auf die Tab-Taste:

<div class="container"></div>

Diese Abkürzung geht mit .container noch etwas kürzer – da Emmet implizit von einem div-Element ausgeht.

Damit lassen sich alle möglichen Konstrukte bilden: Von children bis siblings, von Nummerierungen bis zu eigenen Attributen. Beispielsweise kann mittels einer html:5 oder ! Abkürzung ein komplettes HTML5 Dokument erzeugt werden:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Es gibt noch viele weitere Abkürzungen. Um ein paar Beispiele zu nennen:

Abkürzung Ergebnis
            script:src
        
            <script src=""></script>
        
            link:rss
        
            <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
        
            input:hidden
        
            <input type="hidden" name="">
        
            table+
        
<table>
    <tr>
        <td></td>
    </tr>
</table>
        
            select+
        
<select name="" id="">
    <option value=""></option>
</select>
        


Child/Parent/Sibling-Elemente mit Emmet

Mit Emmet ist es ein Kinderspiel, beispielsweise Unterelemente für eine Liste zu erzeugen:

ul>li*3

Wird zu:

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

Während das &gt-Zeichen angibt, dass es sich um Kind-Elemente handelt, kann mit einer *3 Abkürzung das Ergebnis um ein vielfaches dupliziert werden. Der aktuelle Counter kann über $ abgefragt werden, wenn dieser denn benötigt wird:

ul>li.itemClass$*3

Wird zu:

<ul>
    <li class="itemClass1"></li>
    <li class="itemClass2"></li>
    <li class="itemClass3"></li>
</ul>

Auf das Parent-Element zu erreichen, wird ein ^ verwendet:

div>ul>li*3^div.container

Wird zu

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="container"></div>
</div>

Mit einem + können Elemente auf der Selben Ebene hinzugefügt werden:

div>label+button

Wird zu:

<div>
    <label for=""></label>
    <button></button>
</div>

Custom Text / Attributes in Emmet

Mittels {} kann ein beliebiger Text angegeben werden:

div>label{Name:}+input+button{Absenden}

Wird zu:

<div>
    <label for="">Name:</label>
    <input type="text">
    <button></button>
</div>

Und ebenfalls eigene Attribute sind problemlos mit [for="name"] möglich:

form>label[for="name"]{Name:}+input#name+button{Absenden}

Wird zu:

<form action="">
    <label for="name">Name:</label>
    <input type="text" id="name">
    <button>Absenden</button>
</form>

Gruppierungen

Wenn Konstrukte – beispielsweise mit vielen Child/Parent Angaben – zu komplex werden, können diese mit Klammern gruppiert werden:

div>(ul>li*3)+h2+(ul>li*4)

Wird zu:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h2></h2>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Enter Abbreviation

Wenn mehrere Zeilen im Editor markiert sind, können diese mittels ctrl+alt+enter (Enter Abbreviation) innerhalb von anderen Elementen gewrapped werden. Dies macht beispielsweise bei einer Navigation Sinn:

Home
About
Contact

ctrl+alt+enter

div>ul>li*>a[title=$#]{$#}

Ergibt:

<div>
    <ul>
        <li><a href="" title="Home">Home</a></li>
        <li><a href="" title="About">About</a></li>
        <li><a href="" title="Contact">Contact</a></li>
    </ul>
</div>

Wie bereits zuvor erwähnt werden mit * die Elemente wiederholt, mit $# hingegen das aktuelle der markierten Elemente eingefügt.

Alles in allem

Selbst eine komplette HTML5 Seite, wie das folgende Beispiel zeigt, kann über die gezeigten Abkürzungen und Snippets erzeugt werden:

Sublime Text - Emmet Plugin

html:5>(header>nav>ul>li*4>a)+(.content>article*2>h1+p>lorem15^aside.sidebar)+(footer>p{Copyright 2014})+script:src

Wird zu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <article>
            <h1></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque assumenda id adipisci amet earum, tenetur?</p>
            <aside class="sidebar"></aside>
        </article>
        <article>
            <h1></h1>
            <p>Dolorem odio ab dicta minus, qui molestias! Asperiores delectus sint debitis illum numquam tempore veritatis.</p>
            <aside class="sidebar"></aside>
        </article>
    </div>
    <footer>
        <p>Copyright 2014</p>
    </footer>
    <script src=""></script>
</body>
</html>

Wie das Cheat-Sheet zeigt, bietet Emmet noch viele weitere Abkürzungen.

Was hast Du mit Emmet so für Tricks auf Lager? Zeig es in den Kommentaren :)

Emmet in Sublime Text: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkte, 2 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.