Sublime Text 3 – GutterColor richtig installieren

Früher war ich eher der Meinung, man müsse im Editor alles selbst machen, um ein richtiger Entwickler zu sein. Ein Editor darf einen nicht unterstützen und was nicht alles. So arbeitete ich lange Zeit mit Notepad2, welches nichts anderes brachte, als Syntax Highlighting. Seit 2½ Jahren arbeite ich jetzt mit Sublime Text, wenn auch mittlerweile in Version 3. Dass man diesen sehr gut erweitern kann, ist mittlerweile bekannt, doch die Perlen findet man nur mit Suchen.

Oben im Beitragsbild, welches zugegebenermaßen ziemlich sinnlosen Code zeigt, sehr ihr worum es geht. GutterColor zeigt euch in CSS-, SCSS-, SASS-, Stylus- oder LESS-Dateien die verwendete Farbe in der jeweiligen Zeile an. Ein durchaus praktisches Feature, um die Übersicht zu behalten. 10 Minuten installiert, wollte ich es gar nicht mehr hergeben. Allerdings war es dank des hellen Themes gar nicht so einfach zum laufen zu bekommen. Daher will ich das mal eben verbloggen.

Voraussetzungen für die GutterColor Installation

Um das ganze jetzt und in Zukunft einfacher zu machen, solltet ihr vorher Package Control installieren, sofern das nicht bereits geschehen ist. Dies ist zwar für den Betrieb von GutterColor nicht nötig, macht aber künftige Installationen von Erweiterungen um ein Vielfaches einfacher. Package Control für Sublime Text 3 (welches übrigens von GutterColor vorausgesetzt wird), könnt ihr ganz leicht über die Konsole installieren oder indem ihr es euch herunterladet und in das Packages-Verzeichnis kopiert. Wie beides geht, steht auf der offiziellen Seite von Package Control.

Was allerdings wirklich benötigt wird, um GutterColor zu betreiben ist ImageMagick. Dieses erstellt aus den Hex-Codes oder RGB-Codes die jeweiligen Farben in Form von kleinen Bildchen. Die Installationsdateien für ImageMagick findet ihr (Überraschung) auf der offiziellen ImageMagick-Website :D Ist die Installation durch gelaufen, könnt ihr Sublime Text wieder starten. Gegebenenfalls muss vorher der Rechner neu gestartet werden.

GutterColor installieren

Wenn Package Control richtig installiert ist, ist die Installation von GutterColor jetzt sehr einfach. Geht im Menü auf Tools > Command Palette… (Alternativ STRG+SHIFT+P) und gebt »install« in das Feld ein. Dann einfach auf ENTER drücken und es kommt nach einer kurzen Ladezeit eine Liste von verfügbaren Packages. Wenn ihr dann in dem neuen Feld »GutterColor« eingebt und ENTER drückt, dann installiert sich GutterColor auch schon. Unten in der Status-Leiste sieht man, wie weit die Installation fortgeschritten ist.
Jetzt muss Sublime-Text nochmal neu gestartet werden und danach muss man GutterColor nur noch konfigurieren. Hierfür geht ihr im Menü auf Preferences > Package Settings > GutterColor > Settings – User und tragt folgendes in die Datei ein:

{ 
  "convert_path" : "convert.exe" 
}

Das reicht bei Windows vollkommen aus. Linux oder Mac müssten hier den gesamten Pfad angeben, also lasst euch nicht irritieren. Je nachdem ob ihr ein helles oder ein dunkles Theme nutzt, seid ihr jetzt fertig. Bei dunklen Themes funktioniert das Plugin (meistens) problemlos, sobald mal aber ein helles Theme nutzt, wie das IDLE-Theme, so wird man nur dunkle Grauabstufungen sehen.

GutterColor-Probleme beheben

Sofern ihr nur schwarze Kästen neben den Zeilennummern eurer Stylesheets sehrt, habt ihr ImageMagick falsch verlinkt oder die Settings-Datei hat einen Fehler. Wenn ihr schwarze Kreise seht, ist euer Theme nicht dafür ausgelegt. Hierfür brauchen wir ein weiteres Plugin für Sublime Text 3. Dies ist der PackageResourceViewer und er lässt sich ebenso wie GutterColor über Package Control installieren. Nach einem Neustart ist er dann auch verwendbar.

Nun öffnet ihr erneut die Command Palette und gebt PackageResourceViewer ein und wählt »PackageResourceViewer: Open Resource«. Eine weitere Liste taucht auf und ihr wählt »Color Scheme – Default« und dort dann euer Theme. Bei mir war es wie gesagt IDLE. Daraufhin öffnet sich eine XML-Datei, welche ihr bearbeiten müsst. Jetzt scrollt ihr an das Ende bis zu der Zeile, in der </array> steht und fügt davor folgenden Code ein.

<dict>
  <key>name</key>
  <string>Gutter Color</string>
  <key>scope</key>
  <string>gutter_color</string>
  <key>settings</key>
  <dict>
    <key>background</key>
    <string>#FFFFFF</string>
    <key>foreground</key>
    <string>#FFFFFF</string>
  </dict>
</dict>

Speichert die Datei, startet Sublime Text ein letztes Mal neu und voilà die Farben werden neben den Zeilennummern angezeigt. Warum der Entwickler des Plugins helle Themes nicht bedacht hat, ist mir ein absolutes Rätsel, aber wenn man eh schon Entwickler ist, kann man wohl auch einfach mal selbst an einem Plugin rumbasteln… Wie dem auch sei, das hat das Problem bei mir glücklicherweise behoben und jetzt wird alles so angezeigt, wie man es sich vorstellt.