Emmet Snippets in Sublime erstellen und ändern

Emmet

Ich bin ein großer Fan von Emmet und könnte mir gar nicht mehr vorstellen ohne diesem Plugin zu arbeiten. Für jene, die Emmet nicht kennen: In dem gif über diesem Absatz sieht man ein Beispiel dafür, was mit Emmet möglich ist. (Installation über Package Control: Install Packages > Emmet).

Es gibt also Snippets, mit denen man HTML (und CSS) generieren kann. Beispielsweise erzeugt ! + Tab das HTML Grundgerüst.

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

    </body>
</html>

Das ist schön und gut, aber daran gefällt mir nicht, dass im lang-Attribut "en" und nicht "de" steht und in vielen Fällen reicht mir nicht einfach nur das Grundgerüst, sondern ich brauche auch eine Möglichkeit CSS zu schreiben. Deswegen habe ich versucht herauszufinden, wie man eigene Snippets erstellen kann.

Eine Liste der Snippets und was sie erzeugen

Auf GitHub findet man eine .json-Datei mit einigen Einstellungen, allen Snippets und Abkürzungen. Da sieht man nicht nur was möglich ist, sondern auch wie die einzelnen Befehle aufgebaut sind. Nach kurzer Recherche habe ich herausgefunden wie das ! Snippet funktioniert und gleich darauf meine eigenen Anpassungen durchgeführt.

Über das Sublime Menü kommt man zu der Datei, in der man eigene Snippets definieren oder bestehende überschreiben kann (Sublime Text > Preferences > Package Settings > Emmet > Settings - User). Diese Datei strukturiert man genauso wie die .json-Datei auf GitHub.

Weiters gibt es auf der Emmet Website eine Liste mit sonstigen möglichen Einstellungen.

Eigene Snippets erstellen

Zum leichteren Verständnis gebe ich jetzt nur ein simples Beispiel dafür, wie man ein Snippet erstellen kann. Die Snippets und Einstellungen, die mein oben erwähntes "Problem" lösen, findet man auf meiner GitHub Page.

Das Snippet header erzeugt <header></header>. Es wäre doch aber schön, wenn es gleichzeitig auch eine h1 und eine Navigation generiert. Die Emmet User Settings-Datei (Sublime Text > Preferences > Package Settings > Emmet > Settings – User) habe ich dafür so aufgebaut:

{
    "snippets": {
        "html": {
            "abbreviations": {
                "header+": "header>nav>ul.menu>li*3>a"
            }
        }
    }
}

Ich habe also ein neues HTML-Snippet angelegt, das mit dem Befehl header+ generiert wird. Wenn man header+ eingibt und Tab drückt, bekommt man folgendes HTML:

<header>
    <nav>
        <ul class="menu">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>

Im abbreviations Objekt kann man beliebig viele Snippets hinzufügen oder überschreiben.

"html": {
    "abbreviations": {
        "header+": "header>nav>ul.menu>li*3>a",
        "sm-icons": "ul.socialmedia-icons>li.icon.icon-*3>a"
    }
}

Mein Problem mit dem lang-Attribut konnte ich so lösen, dass ich in der gleichen Datei, in der ich das Snippet erstellt habe, eine Variable überschrieben habe.

{
    "snippets": {
        "variables": {
            "lang": "de"
        },

        "html": {
...

Die Default-Snippets in Emmet sind sehr durchdacht und umfangreich. Muss man aber trotzdem Änderungen oder Ergänzungen machen, ist das auch kein Problem, wenn man weiß wo man nachsehen muss.

Links in diesem Beitrag

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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