Schneller entwickeln mit Sublime Text und Gists

Wer Webseiten oder Software entwickelt, weiß, dass sich Abläufe und Codefragmente oftmals wiederholen. Als Entwickler tut man gut daran, diese Wiederholungen zu eliminieren.

Der erste Schritt hat zunächst gar nichts mit dem Editor oder der Art der Entwicklung zu tun. Der erste Schritt sollte immer das Überdenken des Codes sein. Wiederhole ich ständig Teile des Codes, sollte ich mich stets fragen, ob dieser Teil nicht in einer Methode/Funktion oder wie auch immer ausgelagert werden kann.

Je mehr Wiederholungen ich habe, desto aufgeblasener wird der Code und desto schwerer wird es, ihn zu warten. Wenn ich dann eine Änderung machen muss, muss ich sie wohlmöglich etliche Male vornehmen und vergesse ich nur eine Stelle, kann das unvorhergesehene Folgen nach sich ziehen.

Gut, genug der Predigten. Manchmal wiederholt man sich einfach, ob man will oder nicht. Das kann z.B. der Fall sein, wenn ich ein neues Projekt beginne. Da brauche ich zunächst mal das HTML5-Grundgerüst, diese eine JavaScript-Funktion oder die persönliche CSS-Vorlage.

Der pfiffige Entwickler legt sich deshalb kleine Vorlagen, Codestückchen s.g. Snippets an.

Snippets

Solche Snippets kann man auf verschiedenste Arten und Weisen verwalten. Als Textdateien, die irgendwo liegen. Mit Programmen, in denen man Snippets organisieren kann. Sublime Text bietet aber auch von Haus aus die Möglichkeit an, Snippets anzulegen.

Sublime Text Snippets

Diese Snippets haben einen großen Vorteil, man kann sie zum einen auf Tastaturkürzel legen oder das Autocomplete benutzen. Zum Anderen können diese Snippets Platzhalter enthalten, auf die man via Tab springen kann.

Der große Nachteil: Diese Snippets liegen irgendwo im Userverzeichnis von Sublime Text. Man hat keine wirklich gute Übersicht über sie und man kann sie nur mit Mühe synchronisieren.

Ich möchte aber, dass mir meine Snippets immer zur Verfügung stehen, egal wo ich bin und theoretisch auch egal, welchen Editor ich benutze.

GitHub Snippets

GitHub hat ein eigenes System für Snippets, die sich dort Gists nennen. Jeder, der einen GitHub-Account hat, kann auch Gists anlegen und verwalten.

Nachdem ich zahlreiche andere Methoden ausprobiert habe, bin ich bei den Gists hängen geblieben.

Der größte Vorteil ist, dass ich diese Gists von überall jederzeit abrufen kann, sofern ich denn einen Browser und Netz zur Verfügung habe. Einfach bei GitHub anmelden und schon habe ich Zugriff auf meine Gists.

Neben eigenen Gists, kann ich auch die öffentlichen Gists anderer Benutzer ansehen. Suche ich also nach einem Codesnippet für ein bestimmtes Problem, bekomme ich zahlreiche Varianten zur Auswahl. Ähnlich wie bei GitHub selber, kann ich mir Gists merken indem ich auf den Stern klicke. Ich kann sie aber auch - wie bei einem Repository - forken, also einen eigenen Ableger davon erstellen.

Wenn ich mein Codesnippet nicht mit anderen teilen will, kann ich es übrigens auch als privates Snippet anlegen, dann können andere Benutzer nicht darauf zugreifen.

Sublime Text Gists

Wie wir wissen gibt es für jedes nur erdenkliche Szenario ein Sublime-Text-Plugin. Ja, für wirklich JEDES Szenario, keine Widerrede! ;)

Es gibt also auch ein Plugin für Gists: https://github.com/condemil/Gist

Voraussetzung hierfür ist natürlich ein GitHub-Account, denn sonst können wir keine Gists anlegen. Um das Plugin nutzen zu können muss man zunächst ein Access Token anlegen. In der Beschreibung des Plugins ist Schritt für Schritt beschrieben, wie man das macht.

Einrichtung

Hat man so ein Token erstellt, muss man dieses noch in die Konfiguration von Sublime Text einfügen. Dazu wählt man unter: Sublime Text > Preferences > Package Settings > Gist > Settings User aus. Und trägt dort das Token ein:

{
    "token": "1234567890"
}

Benutzung

Die Benutzung des Plugins funktioniert ganz sublimelike mittels Tastenkürzel oder cmd+shift+p. Einfach gist eingeben und man bekommt alle möglichen Funktionen angezeigt. Hier kann man Gists anlegen (privat und öffentlich), bereits angelegte Gists als neue Datei hinzufügen oder in die gerade geöffnete Datei kopieren.

Wählt man beispielsweise Insert Gist aus, bekommt man nun eine Liste der eigenen Gists und der mit einem Stern versehenen angezeigt. Die Auswahl kann man durch Tippen einschränken und/oder mit den Pfeiltasten navigieren.

Anlegen von Gists

Das Anlegen von Gists kann entweder direkt aus Sublime Text heraus erfolgen, oder aber über die Weboberfläche. Ich bevorzuge die erste Variante.

Ich versuche meine Gists immer möglichst eindeutig zu benennen, dazu habe ich mir einen kleinen Syntax überlegt: Ich beginne immer mit der „Sprache“ der Gists in eckigen Klammern, also z.b.
[html], [sh], [scss] so kann ich später beim Suchen schnell erkennen, was ich vor mir habe und meine Suche ggf. auf eine Sprache einschränken.

Teilen

Teilen ist toll! Deshalb sind meisten meiner Gists auch öffentlich zugänglich. Vielleicht hast Du ja auch ein paar Snippets, die für andere interessant sein könnten, dann poste doch einen Link zu deinem Gist in die Kommentare oder schick mir einen Link via Twitter.