Sublime Text 3 (ST3) ist die derzeit aktuelle Version eines der am häufigsten verwendeten Texteditoren von Web-Entwicklern und Programmierern. Dieser ist für Mac, Windows und Linux verfügbar und kann kostenlos heruntergeladen und genutzt werden (siehe Download am Ende des Artikels). Die dauerhafte Nutzung benötigt allerdings eine nicht sehr günzstige Lizensierung. Profitieren Sie von ST3 durch einige Tipps und Tricks in diesem Leitfaden für Web-Entwickler. Erfahren Sie mehr über Pakete die man einbinden sollte, nützliche Tastenkombinationen und vieles mehr.

Sublime Text 3: Erste Schritte
SublimeText 3 ist für verschiedene Systeme verfügbar. Derzeit sind das OsX, Ubuntu und Windows. Bei letzterem System kann zwischen der 32-Bit und 64-Bit Version gewählt werden. Wir beziehen uns hier auf die Windowsversionen und die Installation bereits erfolgt sein. Hier steigen wir nach dem ersten Start ein.

1. Benutzereinstellungen

Standardmäßig verwendet ST3 feste Registerkarten die 4 Zeichen lang sind. Dies kann manchmal schwer zu lesen sein. Zu grosse Registerkarten schieben dagegen die Arbeitsfläche zu sehr zur rechten Seite. Ich empfehle allen Entwicklern folgende Einstellungen einzufügen. Gehen sie dazu im Menü zu "Sublime Text 3 => Preferences => Settings – User". Dort dann folgenden Code eingeben:

{
"draw_white_space": "all",
"rulers": [80],
"tab_size": 2,
"translate_tabs_to_spaces": true
}

Diese Einstellung ändert die festen Tabulatoren in variable. Wenn sie weitere Anpassungen ihrer ST3 Umgebung wünschen, finden sie eine komplette Liste der Einstellungsoptionen unter diesem Link (Englisch).

2. Befehlspalette

Über die Befehlspalette von ST3 werden Funktionen bequem per Tastenkomination ausgeführt. Wer effektiv programmieren will, sollte die Maus am besten ignorieren können. Alle gewünschten Befehle können hier selbstständig ergänzt oder geändert werden. Die Befehlspalette kann mit der Maus über "Werkzeug => Befehlspalette" geöffnet werden, schneller geht es mit der Tastenkombination "STRG-Umschalttaste-P".

3. Spalten, Zeilen und Arbeitsflächen

Sie sind ein produktiver Programmierer und arbeiten mit mehreren Dateien gleichzeitig? ST3 erlaubt, wie jeder gute Text-Editor, Dateien nebeneinander zu anzuzeigen. Auf diese Art kann man zum Beispiel vermeiden, nicht zwischen einer HTML-Datei und dem dazugehörigen CSS-Dokument Hin- und Herzuschalten sein.

Um zwei Spalten nebeneinander angezeigt zu bekommen (vertikal), verwenden Sie die Tastenkombination "ALT-SHIFT-2" (PC) oder "WAHL-⌘-2" (Mac). Ersetzen Sie die Taste "2" mit "3" oder "4", um drei oder vier Spalten anzuzeigen. Die Verwendung von "5" erzeugt ein fertiges 4er Gitter.

Um zwei Zeilen angezeigt zu bekommen (horizontal), verwenden Sie die Tastenkombination "SHIFT-ALT-8" (PC) oder "Umschalt-Wahl-⌘-2" (Mac). Ersetzen Sie die Taste "8", mit "9" um drei Zeilen anzuzeigen.

Wenn der Fensterbereich noch weiter geteilt werden soll, kann man in ST3 die "Group" Funktion nutzen. Mit "STRG-K", "SHIFT-STRG-UP" (PC) oder ⌘-K, SHIFT-⌘-UP (Mac), um eine neue Gruppe in einem Teilfenster erstellen.

4.Multiple Cursors

Mehrere Cursor ist eines der Killer-Feature von Sublime Text. Es ermöglicht dem Nutzer, mehrere Stellen gleichzeitig zu bearbeiten und dabei somit Entwicklungszeit zu sparen. Um mehrere Cursor auslösen, setzen Sie den Cursor auf das Wort welches man hervorheben will und drücken Sie "STRG-D", bis Sie alle Wörter, die Sie ausgewählt haben markiert sind. Sie können auch mehrere Cursor mit "CTRL-KLICK" erstellen, an denen Sie einen Cursor haben wollen.

5. Zu einer Zeile springen

Oftmals bekommt man bei einer Fehlerausgabe eine konkrete Zeilenangabe. Um zu einer Zeile in einer Datei zu springen, öffnet man die Funktion "Goto Annything" mit "STRG-P". Dort gibt man ":" grfolgt von einer Zeile an. Bei Zeile 18 wäre dies ":18" und man landet direkt in der Zeile.

6. Markieren eines Textes in einem HTML Tag

Um einen Text innerhalb eines HTML Tags zu markieren, geht man einfach mit dem Cursor in den Bereich und drückt dann die Tasten "STRG-SHIFT-A".

7. Erweiterungen und Plugins

ST3 kommt mit einer Menge an Funktionen, welche nicht von Grund auf integriert sind. Sie können die Funktionalität aber über den "Pakagecontrole" um Erweiterungen bzw. Plugins aus der riesigen ST3 Community erweitern. Der einfachste Weg, diese Pakete zu installieren, ist eben diese Paket-Steuerung zu verwenden. Um die Paket-Steuerung auf ST3 zu installieren, öffnen Sie die ST3 Konsole "Ansicht => Show Console oder STRG + `" und fügen Sie den folgenden Code ein (ohne "):

"import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())"

Wenn die Paket-Steuerung erfolgreich installiert wurde, dann können sie Erweiterungen und Pakete über diese mit "STRG-SHIFT-P" installieren.



8. Empfohlene Erweiterungen und Plugins

Sidebar Enhancements
Dieses Plugin erweitert die Funktionalität der ST3 Seitenleiste um Dateiaktionen, die in der Basisversion sonst nicht zur Verfügung stehen. Auch diese Funktionen können wie oben beschrieben dann über die Befehlspalette genutzt werden.

Emmet
Emmet macht programmieren von HTML mithilfe von Tastenkombinationen auf Basis von CSS-Selektoren viel einfacher. Was das bedeutet? Überzeugen Sie sich selbst in dem folgenden Bild:



Emmet kann aber nicht nur das arbeiten an HTML-Tags, Klassen und IDs vereinfachen. Lorem ipsum Text ist etwas, was Web-Entwickler gerne und Oft verwenden. Oft nutzen diese dafür einen Lorem Ipsum Generator. Mit Emmet aber, geben Sie einfach lorem ein und betätigen Sie die Tab-Taste. Willst du eine bestimmte Anzahl von Füllwörter (wie 100 Worte von Lorem Ipsum)? Verwende einfach "lorem100" statt lorem und benutze wieder die Tab-Taste.

Emmet kann ausserdem auch CSS. So sind zum Beispiel CSS Präfixe immer eine Qual, In Emmet können Sie einfach die Kurzform -bdrs verwenden, um einen border radius einzustellen:

---

Zum Download