Sublime Text – mein liebster Texteditor

Beim Werkeln an deinem Blog wirst du früher oder später mit den HTML- und CSS-Dateien zu tun haben – hier eine zusätzliche Box, da eine andere Farbe… oder vielleicht auch ein komplett selber gecodetes Layout?
Ein guter Texteditor macht dir das Leben hier entschieden leichter! 🙂

Zwar kannst du bei den meisten Blogsystemen die CSS- und HTML-Dateien direkt vom Backend aus bearbeiten… aber Spaß macht das nicht. Da sitzt du nämlich vor einer unübersichtlichen Wüste aus lauter schwarzen Buchstaben auf weißem Grund – urgh.
Texteditoren sind großartig, indem sie deinen Code übersichtlicher darstellen und dir beim Schreiben helfen, beispielsweise indem sie einen geöffneten Tag automatisch auch schließen, sodass du dir diese Tipparbeit sparst.

Ich habe im Laufe der Jahre viele Texteditoren ausprobiert (Notepad++, TextWrangler, Brackets, …), um schließlich bei Sublime Text hängenzubleiben. Und das Tool begeistert mich so, dass ich es dir hier zeigen mag. 😉

Erstmal: was macht einen guten Texteditor aus?

Texteditoren bringen unterschiedliche Features mit, von denen manche nützlicher sind als andere und bei denen es natürlich auch auf den eigenen Geschmack und Arbeitsbereich ankommt, ob man sie nun braucht oder nicht.

Ich habe mal gesammelt, was mir selber wichtig ist:

Farbe für alle: Syntax-Highlighting

Heißt: die unterschiedlichen Bestandteile deines Codes, wie Klassennamen, IDs, Inhaltstext und so weiter werden farblich hervorgehoben. Das erleichtert das Lesen und Zurechtfinden im Code ungemein.

Und noch mehr Farbe: Farbschemata

Unabhängig vom Syntax-Highlighting bin ich ein großer Fan von dunkleren Farbtönen im Editor. Auf Dauer ist mir ein weißer Hintergrund nämlich zu grell, ich bevorzuge beispielsweise ein dunkles Blau als Hintergrund.
In einem guten Editor kannst du dir ein anderes Farbschema einstellen.

*schwupp*  – Zeilen einklappen

Gerade bei langen Dateien kann es unglaublich hilfreich sein, bestimmte Blöcke entsprechend ihrer Verschachtelung einfach einklappen zu können. Gerade nicht benötigte Abschnitte kannst du dadurch wegklappen, um dich besser auf den aktuell wichtigen Bereich zu konzentrieren.

Auto-Vervollständigung

Was ich beim Tippen auf meinem iPhone praktisch finde, will ich auch beim Coden nicht mehr missen: die automatische Vervollständigung von Tags, die unheimlich viel Zeit sparen kann.

Sublime Text läuft darin zu wahrer Höchstform auf, aber dazu unten mehr. 😉

Was kann Sublime Text? Und wie geht’s?

Wie gesagt, vor einiger Zeit wurde mir Sublime Text (kurz: ST) empfohlen und ich habe mir das Programm endlich mal näher angeschaut, nachdem ich es in den letzten Jahren immer nur am Rande wahrgenommen habe.
Und ich bin begeistert!

Sublime Text herunterladen

Sublime Text gibt es sowohl für Windows, als auch für Mac und Linux. Herunterladen kannst du ST hier.

Ich nutze die Version Sublime 2, wobei es bereits Sublime 3 als Beta gibt.

Das Programm ist kostenlos, wobei es sich um eine uneingeschränkteTestversion handelt. Sprich, du hast den vollen Funktionsumfang und kannst es unbegrenzt nutzen, allerdings poppt zwischendurch immer mal wieder ein Fensterchen auf, ob du es denn nicht doch kaufen magst. 70$ kostet Sublime Text derzeit, die Lizenz gilt pro Person (du kannst ST also auf beliebig vielen deiner Rechner nutzen).

Grundeinstellungen in Sublime Text

Das Farbschema änderst du über Preferences → Color Scheme.
Zusätzlich zu den mitgelieferten Schemata kannst du dir über die Erweiterung Colorsublime jede Menge weitere herunterladen.

Wenn du möchtest, kannst du dir den Arbeitsbereich in bis zu vier Fenster aufteilen, sodass du entsprechend viele Dateien gleichzeitig nebeneinander geöffnet siehst. Das geht über View → Layout, wo du zwischen verschiedenen Varianten wählen kannst (mehrere Spalten, Zeilen oder ein Grid).

Zumindest auf dem Mac hatte ich das Problem, dass weitere Dateien in einem neuen Sublime-Fenster geöffnet wurden anstatt einfach in einem Tab.
Um das zu ändern, rufst du Preferences → Settings – User auf und ergänzt in der sich öffnenden Config-Datei Folgendes nach Zeile 2:

"open_files_in_new_window": false,

Plugins für Sublime Text

Von Hause aus ist ST schon ordentlich, zu Bestform läuft es aber erst durch Plugins auf. Ich kenne keinen Texteditor, für den es so viele Erweiterungen gibt wie für Sublime Text.

Schritt 1: Package Control installieren

Damit du Plugins hinzufügen kannst, musst du als erstes den Paketmanager „Package Control“ installieren: ruf dafür diese Seite auf und wähle je nach Version ggf. den Tab „Sublime Text 2“ aus. Kopiere den Code.

In ST wählst du jetzt View → Show Console. Am unteren Fensterrand  erscheint daraufhin eine Eingabezeile – dort packst du den eben kopierten Code hinein und drückst Enter.

Jetzt bist du bereit zum Hinzufügen neuer Plugins! 🙂

Schritt 2: nach einem Plugin suchen

Drücke [Cmd] + [Shift] + [P] (auf dem Mac) bzw. [Cmd] + [Shift] + [P] (unter WIndows), um die Kommando-Palette aufzurufen. Dieses Fensterchen ist quasi dein Tor zur ST-Erlebniswelt. 😉

In einer ruhigen Minute solltest du hier einfach mal stöbern, was es alles an Möglichkeiten gibt.

Tippe jetzt aber mal ein „i“ ein, um schnell zum entsprechenden Buchstaben zu springen, wähle aus der Liste den Punkt „Package Control: Install Package“ aus und bestätige mit Enter.

Es öffnet sich ein ähnliches aussehendes Fensterchen, in dem dich eine unglaublich lange Liste von Plugins erwartet:

Diese Menge kann einen erstmal erschlagen. 😉
Um dir den Start zu erleichtern, verrate ich dir jetzt mein Lieblingsplugin:

Mein absolutes Lieblingsplugin: Emmet

Emmet vervollständigt deine HTML- und CSS-Tags. Sprich, du tippst zum Beispiel „a {“ ein – und die schließende Klammer } wird automatisch gesetzt.

Richtig genial wird das Ganze aber erst dadurch, dass Emmet mit jeder Menge Kurzbefehle daherkommt, die dir wahnsinnig viel Schreibarbeit abnehmen: wenn du in deinem Stylesheet zum Beispiel einfach nur „pt10“ eintippst und danach die Tab-Taste drückst, wird daraus padding-top: 10px;.
Dieses Tabben ist der Wahnsinn!
Auch beim Schreiben von HTML hilft Emmet damit – ein „.wrapper“, gefolgt von einem Tab, generiert gleich das ganze Konstrukt <div class="wrapper"></div>. Sogar verschachtelte Elemente kannst du mit Emmet fix anlegen: eine Liste mit 3 Listelementen generierst du nämlich ganz elegant über ul>li*3.

Ganz ehrlich – ich frage mich mittlerweile, wie viel Lebenszeit ich wohl mit dem stupiden Tippen von Code verplempert habe, bloß weil ich keinen Editor mit so einem Feature hatte! 😉

Eine Übersicht über alle Emmet-Tricks findest du im Emmet Cheat Sheet.

Arbeiten in Sublime Text – Tricks & hilfreiche Shortcuts

Grundsätzlich kannst du ST wie jeden anderen Texteditor verwenden. Wenn du ein paar der Tricks dieses Programms kennst, wirst du aber deutlich schneller arbeiten als beispielsweise in Notepad. 🙂

Ich bin ja ein Fan von Tastenkombinationen, die so viel schneller gehen als die Navigation durch ein Menü. Daher zeige ich dir hier immer den jeweiligen Shortcut, einiges geht aber auch über die Menüleiste.

Das Tabben kennst du ja schon, kommen wir zu den alltäglichen kleinen Aufgaben wie Suchen, Auskommentieren und so weiter.
Da wir neulich im BlogBoard festgestellt haben, wie unglaublich hip wir Blogger doch alle sind, weil wir fast alle Macs benutzen *fg*, gebe ich hier immer den Tastaturbefehl für OS X an. Unter Windows ersetzt du, sofern nicht anders angegeben, [Cmd] einfach durch [Strg].

Suchen & Ersetzen

Beim Suchen und Ersetzen bringt Sublime Text ein paar coole Features mit: über [Cmd] + [Shift ] kannst du ganz normal die gerade geöffnete Datei durchsuchen. Am unteren Fensterrand taucht eine Eingabemaske für deinen Begriff auf.
Drücke aber mal  [Cmd] + [Shift] + [F]. Dann wird der  Block nämlich dreizeilig – du kannst jetzt festlegen, welche Dateien jetzt alle auf einmal durchsucht werden sollen und kannst den Begriff ggf. auch gleich ersetzen.
Über die kleinen Icons links neben der Suchmaske kannst du unter anderem festlegen, ob die Suche case-sensitive sein soll (also zwischen Groß- und Kleinschreibung unterscheiden soll).

Auskommentieren en masse

Manchmal will man einige Abschnitte im Code nicht mehr verwenden, sie aber für später aufheben. Anstatt sie zu löschen, kannst du sie also einfach auskommentieren.
Wenn du mehrere Zeilen auf einmal [Cmd] + [Shift] + [7] bzw. unter Windows [Strg] + [Shift] + [#] – und schon sind sie auskommentiert. 🙂

Zeilen einklappen

Bewege den Mauszeiger auf die Zeilennummer an linken Rand. Dann erscheinen kleine Pfeile, die dir anzeigen, wo du entsprechend der Verschachtelung deines Codes etwas einklappen kannst.

Lorem Ipsum? Dolor sit amet!

Blindtexte wie das berühmte Lorem ipsum… braucht man immer mal wieder. Sublime hat da beim Tabben eine charmante kleine Funktion eingebaut: tippe „lorem“ und drücke dann die Tab-Taste – schon wird ein Blindtext generiert. Sogar die gewünschte Länge kannst du definieren, indem du etwa „lorem10“ + [Tab] eingibst, um einen Blindtext mit 10 Wörtern zu erzeugen.

Noch mehr coole Shortcuts und Funktionen… viiieel mehr… 🙂

Das war natürlich nur ein kleiner Auszug – es gibt so unglaublich viele Tastaturkürzel, dass ich an dieser Stelle der Einfachheit halber einfach mal auf die Shortcuts für OS X sowie auf die Shortcuts für Windows und Linux verweise. 🙂

Und wie verwende ich Sublime Text jetzt für meinen Blog?

Bei einem selbstgehosteten WordPress kannst du ohnehin über FTP auf deine HTML-Dateien und Stylesheets zugreifen und sie direkt im Texteditor deiner Wahl öffnen.
Hier legst du Sublime Text einfach als Standardprogramm fest – fertig.

Etwa bei Blogger geht das nicht – hier kopierst du dir den Code am besten aus dem Browser in den Editor, speicherst die Datei mit der entsprechenden Endung als *.css oder *.html (damit das Syntax-Highlighting weiß, um welche Sprache es sich handelt) und kopierst den fertigen Code am Ende wieder zurück in den Browser.

Mit welchem Texteditor arbeitest du?
Und was ist dir dabei wichtig?