Pascal Kremp

Sublime Text 2 Tutorial: So richtest du es richtig ein!

10 minutes

Vor wenigen Tagen hatte ich das Vergnügen den Texteditor Sublime Text 2 auf meinem Windows Rechner neu zu installieren. Dieser Satz soll keines Wegs negativ behaftet sein. Das Installieren und vor allem Einrichten von Sublime Text 2 ist super einfach. In diesem Beitrag, zeige ich dir auf, was du auf keinen Fall vergessen darfst, wenn du zu Sublime Text 2 wechselst oder auf der Suche nach Erweiterungen bist. Ich empfehle einige Packages (Erweiterungen), die auf keinen Fall für einen Web Developer im Jahre 2012 fehlen dürfen.


An dieser Stelle muss ich vorwarnen! Da ich fast mein gesamtes Sublime Text 2 wissen in diesem Beitrag wiedergebe, ist dieser Beitrag länger geworden. Ich kann dir nur empfehlen alles durchzulesen.

Warum überhaupt Sublime Text 2?

Sublime Text 2 rockt einfach! Geschwindigkeit, Erweiterungen, Einfachheit, (Retina Support!!!) und jede menge “Nerdy Moves” sind damit möglich! Mit der Geschwindigkeit ist keines Wegs nur die Geschwindigkeit des Programmes gemeint. Durch ST2 bin ich und auch du in der Lage schneller zu programmieren und zu arbeiten. Ich übertreibe sicher nicht, wenn ich sage mehr als 3x so schnell wie mit anderen Editoren!

Die Installation

Sublime Text 2 bietet mehrere Builds zum installieren an. Ich bin ein Fan des Dev Builds.

These are the in-progress versions of Sublime Text 2, and they are updated more frequently. Feel free to use them, but keep in mind you will be running less tested code, and you’ll be seeing many more update notification prompts.

Heruntergeladen kann man diese Version auf der “Dev Builds”-Seite. Die Standardversion hier.

Ich spare mir jetzt eine Bilderserie, wie man ein Programm auf Windows oder Mac installiert.

Wer sich unter Linux zuhause fühlt, sollte sich eventuell diese Installations Anleitung für Sublime Text 2 von René Pohland ansehen.

Shortcuts

Wenn du wirklich schneller Arbeiten möchtest, musst du anfangen die Maus liegen zu lassen. Daher empfehle ich dir folgende Seiten um dir wichtige Shortcuts des Texteditors reinzuprügeln:

Funktionen, die man nicht auslassen sollte

Bevor ich zum spannenden Teil, die Erweiterungen (Packages), übergehe, möchte ich aufzeigen, was ST2 noch so bietet. Die folgenden Fähigkeiten gehen leider oftmals etwas unter. Daher möchte ich auf diese wertvollen Features direkt am Anfang verweisen.

Auskommentieren

I’m lovin it! CMD+Shift+7 (CMD+/) oder unter Windows STRG+Shift+Raute kommentiert den ausgewählen Bereich aus. Wenn also mal ein paar Zeilen Code stören, einfach markieren und auskommentieren.

Mehrfachauswahl

Wer kennt es nicht, dass man öfters mal in einem Quelltext mehrere Zeilen ändern muss und dabei immer das gleiche. Mit ST2 änderst du nur noch einmal und damit auch alle ausgewählten Stellen.

Eine Möglichkeit ist es mit gedrückter CMD- oder STRG-Taste und der Maus auf die Stellen zu klicken, die du bearbeiten willst. Danach blinkt nicht nur ein Cursor, sondern auch an den Stellen, die du angeklickt hast.

Mit STRG+Alt+hoch/runter oder unter Mac ctrl+shift+hoch/runter kannst du dann Zeilenweise einen weiteren Curser an der gleichen Stelle hinzufügen.

Probiere dieses Feature auf jeden Fall mehrfach aus und versuch es mit in dein Repertoir zu übernehmen. Es wird dir Unmengen an Zeit sparen!

Auch wichtig!

CMD+D bzw. STRG+D markiert das ausgewählte Wort. Dabei ist kurz gesagt, dass Bindestriche Wörter trennen und Unterstriche nicht! Nachdem du mit dem Shortcut ein Wort ausgewählt hast, kannst du durch erneutes drücken das nächste Wort im Quelltext auch markieren. Du erkennst den Vorteil? Beispielsweise möchtest du einen Variablennamen, den du öfters verwendet hast, nachträglich ändern….

Zeilen sortieren

Mit F5 am Mac bzw. F9 unter Windows kannst du ausgewählte Zeilen nach dem Alphabet sortieren. Ich nutze es um CSS-Eigenschaften zu sortieren. Bietet mir die Möglichkeit nachträglich schneller über meinen Code zu sausen.

Snippets

Der Texteditor bietet die Möglichkeit Snippets anzulegen, welche man während des Schreibens des Quelltextes aufrufen kann. Neue Snippets erstellt man unter Tools → New Snippet.

Du erhältst jetzt sofort ein Template. Wichtig ist der zu erkennende, noch auskommentiere Bereich tabTrigger. Denk daran, dass du mit einem Shortcut (CMD+Shift+7) die Zeile einfach entkommentieren kannst!

Im Tag Content steht folgendes:

[code]<![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]>[/code]

Würdest du jetzt das im Tag tabTrigger stehenden Wort im Quelltext eintippen und danach Tab drücken, würde der im Content-Tag stehende Code dein tabTrigger-Wort ersetzen. Natürlich ohne den CDATA-Kram. Leider ist das aber nötig immer zu schreiben. Einfach nicht dran stören lassen!

Nachdem dein Trigger durch drücken von Tab ersetzt wurde, kannst du durch erneutes drücken von Tab zum ersten Platzhalter springen. Jetzt bist du in der Lage das Wort “this” zu ersetzen. Wenn du danach wieder Tab drückst, gelangst du zum zweiten Platzhalter. Spätestens jetzt solltest du erkennen, was dir dieses Feature für eine Arbeit nehmen kann.

Erstelle dir Snippets für wiederkehrende Codezeilen und spare tonnenweise Schreibarbeit. Du solltest dir nicht die offizielle Dokumentation über Snippets entgehen lassen!

Makros

Makros verwende ich persönlich noch nicht so lange. Ich könnte mich allerdings dafür steinigen!  Makros ermöglichen dir deine Tastatureingabe aufzuzeichnen, abzuspeichern und durch einen selbstdefinierten Shortcut auszuführen.

Beispielsweise habe ich mir einen Shortcut (CMD+;) angelegt, mit dem ich am Ende der aktuellen ausgewählten Zeile ein Semikolon hinzufüge. Und ein weiteres, welches genau das gleiche macht aber dann nachträglich eine neue Zeile hinzufügt (CMD+Shift+;).

Um so etwas zu erstellen, musst du unter Tools auf New Makro klicken. Anschließen führst du die Tasten aus, die aufgenommen werden sollen. Wenn du damit fertig bist, stoppst du das Makro an der gleichen Stelle, an der du es gestartet hast.

Danach speicherst du dein Macro (Tools → Save Macro).

Jetzt müssen wir deinem Makro noch einen Shortcut zuweisen. Dazu Preferences → Key Bindings – User.

Keybindings für Sublime Text 2 Macros

Für die Faulen zum kopieren:

[code]
[
{ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” },
{ “keys”: [“n”, “n”], “command”: “advanced_new_file”, “context”: [{ “key”: “setting.command_mode”, “operand”: true }]},
{ “keys”: [“super+,”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/addSemikolonEnd.sublime-macro”}},
{ “keys”: [“super+shift+,”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/addSemikolonEndNewLine.sublime-macro”}},
{ “keys”: [“shift+enter”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/NewLine.sublime-macro”}},
{ “keys”: [“super+shift+c”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/CopyLine.sublime-macro”}},
{ “keys”: [“super+shift+a”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/ClearUpArray.sublime-macro”}}
][/code]

Auf den ersten Blick sieht das nach keiner großen Zeitersparnis aus. Überlegt einfach mal, wie viele Semikolons Ihr am Tag hinzufügt und anschließend eine neue Zeile benötigt.

Tabben like a Boss

Sicher hast du schon mal was von strukturiertem Code gehört und wirst irgendwann eingesehen haben, dass einrücken doch gar nicht so verkehrt ist. Sehr gut! Der Programmiergott bedankt sich dafür und macht es in ST2 möglich gleich mehrere markierte Zeilen einzurücken. Mit Shift+Tab kannst du übrigens “zurückrücken”.

Erweiterungen einrichten

Erweiterungen machen Sublime Text 2 erst zu dem, was es ist. Dabei ist die Installation einfach und das Updaten geschieht automatisch. Man könnte die ganzen Erweiterungen runterladen, entpacken und an die dafür vorgesehene Stelle kopieren. Wir leben allerdings nicht mehr in der Steinzeit und du wirst nun die Kunst der Package Installation via Sublime Package Control erlernen.

Dazu öffnest du Sublime klickst im Menü auf View und öffnest die Konsole (Console) und kopierst folgendes in die Zeile hinein:

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print(‘Please restart Sublime Text to finish installation’)

Nachdem du mit Enter den Befehl ausgeführt hast, musst du ST2 neu starten. Nachzulesen gibt es das natürlich auf der offiziellen Seite von wbond.

Ab jetzt lernst du deinen neuen Freund CMD+Shift+P oder STRG+Shift+P kennen. Mit diesem Shortcut öffnest du die Command Palette. Diese Funktion dient nicht nur zur Installation von Packages. Dazu aber später mehr.

Führe den oben genannten Shortcut aus und gib folgendes ein: package. Du siehst lauter Funktionen, aber für dich ist jetzt erst mal “Package Control: Install Package” wichtig. Abkürzen kannst du diesen Schritt indem du nach dem ausführen des Shortcuts direkt “install” eingibst. Dann sollte direkt die richtige Funktion ausgewählt sein. Bestätigst du jetzt mit Enter, lädt ST2 ein wenig und liefert dir eine Liste mit Erweiterungen.

Emmet (früher: ZenCoding)

Edit: ZenCoding wurde weiterentwickelt und heißt jetzt Emmet.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing.

Besser hätte ich es nicht ausdrücken können. Bevor ich ein Beispiel liefere, solltest du das Plugin erstmal installieren. Dazu wie oben beschrieben “Package Control: Install Package” ausführen und nach ZenCoding suchen und Enter drücken. Ohne ST2 neustarten zu müssen kannst du jetzt sofort ZenCoding verwenden.

Nehmen wir an, du möchtest folgende Liste erstellen:

[code lang=”html”]
<ul id=”nav” class=”list”>
<li class=”list-item”></li>
<li class=”list-item”></li>
<li class=”list-item”></li>
<li class=”list-item”></li>
<li class=”list-item”></li>
</ul>
[/code]

Wie lange brauchst du dafür ca? Nun probiere folgendes in einem als HTML abgespeichertem Dokument aus.

[code lang=”css”]ul#nav.list>li.list-item*5[/code]

Und anschließend Tab drücken. BÄM!

To better understand how Zen Coding works, watch demo video and read Smashing Magazine tutorial.

Sublime SFTP

Sublime Text 2 SFTP Map to Remote

Mit Sublime SFTP ist man in der Lage aus ST2 heraus die Dateien in einem Projekt mit einem Server zu synchronisieren. Natürlich findet man dieses Package auch über Package Control.

Nachdem du das Package installiert hast und einen Projektordner in den ST2 gezogen hast, kannst du via Rechtsklick auf deinem Projektordner diesen mit  einem Server “mappen”.

Anschließend öffnet sich eine selbsterklärende Config-Datei, welche in deinem Projektordner abgespeichert wird. Diese Datei wird übrigens nicht mit auf den Server geladen. Nachdem dein Ordner “gemapt” wurde, erhälst du bei einem Rechtsklick auf diesen weitere Funktionen. Einfach mal ausprobieren!

Nettuts+ Fetch

Fetch für Sublime Text 2

Fetch von Nettuts+ ermöglicht es Dateien oder ganze Pakete aus dem Netz zu laden und in ein gewünschtes Verzeichnis zu installieren.

Weiter Packages, die ich nutze aufgelistet

Natürlich alle einfach via Package Control zu installieren.

Sonstige Tipps & Tricks

Vorgefertigte Snippet Packages
Ich persönlich bin kein Freund von Packages, die jede Menge Snippets enthalten. Erstellt man ein Snippet selber, so ist der Lerneffekt um ein vielfaches größer. Bei Snippet-Packages läuft man Gefahr, dass man ständig nachschlagen muss, wie denn die Abkürzung für das gewünschte Snippet ist.

Ein Ausflug durch das Menü lohnt sich
Sublime Text 2 ist so simpel, dass man im Gründe das Menü gar nicht braucht. Allerdings sollte man sich einmal alle Menüpunkte und Unterpunkte genau angucken. Das eine oder andere ist mit Sicherheit dabei, was man irgendwann mal benötigt.

Was machen, wenn man vergessen hat, wie ein Shortcut war
CMD +Shift+P drücken, nach dem Package suchen und die “Default Keybindings” öffnen.

Tabben, was das Zeug hält!
Sublime Text 2 hat von Natur aus schon eine Autovervollständigung eingebaut. Es lohnt sich hin und wieder nur die hälfte einzugeben und Tab zu drücken. Meist wird einem eine Liste unter dem Curser angezeigt, die einem aufzeigt, was man meinen könnte. Je früher man sich an das “rumtabben” gewöhnt, desto eher spart man Zeit!

Zusammenfassung

Sublime Text 2 rockt! Und das wirst auch du sehen, wenn du dieser Anleitung gefolgt bist und wenige Stunden mit Sublime gearbeitet hast.

Wenn etwas nicht funktioniert oder du einen nennenswerten Hinweis beisteuern kannst, nutze die Kommentarfunktion und lass es mich wissen!