Eigene Snippets in Sublime Text 2 anlegen

Code Snippets vereinfachen das Leben von uns Webdesignern und Programmierern. Daher ist es nur von Vorteil, wenn der Texteditor unserer Wahl auch diese Funktionalität mit sich bringt. Sublime Text 2 bietet genau das an und es können ganz einfach eigene Codeschnipsel erstellt und gespeichert werden. Wie das nun genau geht, erkläre ich in diesem Artikel.

Schnipp, schnapp, Schnipsel ab

Nach der Syntax für unser erstes Snippet müssen wir nicht lange suchen. Der Entwickler hat sich das schlau ausgedacht und den Eintrag zum Erstellen eines neuen Schnipsels direkt im Menu verankert. Über Tools ⇒ New Snippet… öffnet sich sogleich eine neue Datei. Dort steht für den Anfang alles drin, was wir wissen müssen. Schaut dann so aus:

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

In der Entwicklerdokumentation findet sich nochmals eine ausführliche Beschreibung mit zusätzlichen Variablen und das Abbild eines Grundgerüsts:

<snippet>
    <content><![CDATA[Type your snippet here]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>xyzzy</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.python</scope>
    <!-- Optional: Description to show in the menu -->
    <description>My Fancy Snippet</description>
</snippet>

Hallo Welt, ich bin ein Snippet

Nun machen wir uns mal daran, unser erstes Snippet zu erstellen. Hierzu nehmen wir uns einfach ein nettes “Hallo Welt!” zur Hand. Um das Ganze etwas zu beschleunigen, hier das fertige Snippet:

<snippet>
	<content><![CDATA[<html>
<head>
	<title>Hallo Welt!</title>
</head>
<body>
<h1>Hallo Welt!</h1>
</body>
</html>
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>hallo-welt</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>text.html</scope>
</snippet>

Dieses speichert ihr in “Sublime Text 2 Verzeichnis\Data\Packages” ab. Ihr könnt euch mit der Zeit auch einen eigenen Ordner anlegen und alles strukturieren. Oder ihr legt die Snippets in den Ordner der zugehörigen Syntax.

Das obige Code Beispiel ist eigentlich selbsterklärend. Trotzdem noch zwei kleine Anmerkungen. Der Inhalt in “content” muss immer mit “<![CDATA[]]>” umschlossen werden. Der “tabTrigger” lässt sich individuell festlegen und die “scope” Angabe legt fest, bei welcher Programmiersprache dieses Snippet funktioniert.

Zum Testen des Snippets öffnen wir mit Strg + N ein neues Dokument und ändern die Syntax über Strg + Shift +P. Dort tippen wir “Syntax HTML” ein und wählen den Eintrag aus. Anschließend schreiben wir in die Datei “hallo-welt” und bestätigen das mit der “Tab”-Taste. Nun sollte ein HTML5 Grundgerüst mit Hallo Welt erscheinen.

Was kann man damit noch alles anfangen?

Mit der Snippetfunktion lassen sich nicht nur kleinere Codes speichern und schnell und einfach einfügen. Beispielsweise kann so was auch für längere Scripte verwendet werden. Ein Beispiel wäre für CSS eine normalise.css.

<snippet>
	<content><![CDATA[
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
[...]
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>normalise</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.css</scope>
</snippet>

Nun braucht man nur noch “normalise” und “Tab” einzugeben und fertig ist der Browser-Reset. Wie ihr seht, lassen sich mit eigenen Snippets viele tolle Dinge machen. Es spart Zeit, erleichtert die Arbeit und macht wirklich Spaß. Probiert es selbst einmal aus.

Weitere Artikel zu Sublime Text 2


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

1 Kommentar

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Norman · · #

    Mittlerweile geht das mit Snippets.me und deren Distributor ziemlich easy. Man legt dann in dem Snippets-Ding nur noch einen Tab-Trigger für jedes Snippet fest und voilà wird das Ding automatisch in Sublime eingefügt. I love.