GutterColor für Sublime 3: Geniales Plugin zeigt dir CSS-Farben direkt im Quelltext an

GutterColor im Einsatz. (Screenshot: t3n)
Manchmal kann es von Vorteil sein, als Webworker sofort zu sehen, welcher Farbwert in welcher Klasse verwendet wird. Und genau das macht GutterColor. Für jedes CSS-Attribut, das mit einem Hex-Farbwert ausgestattet wird, sieht man live einen Punkt in der jeweiligen Farbe.
Installation von ImageMagick
Um GutterColor verwenden zu können, müsst ihr zuerst ImageMagick
installieren. Solltet ihr Windows verwenden, könnt ihr dieses Tutorial nutzen.
Um ImageMagick
auf Mac OS installieren zu können, benötigt ihr einen Downloader. Ich habe homebrew
benutzt:
brew install imagemagick
Solltet ihr kein homebrew
installiert haben, könnt ihr euch den Installer auch mit ruby
ziehen:
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
Ihr habt jetzt also homebrew
installiert und könnt es verwenden. Nutzt folgenden Befehl, um im nächsten Schritt ImageMagick
zu installieren:
brew install imagemagick
Nach ein paar Minuten habt ihr das erledigt und seid bereit, GutterColor zu installieren. Ruft hierzu den Packackge-Mangager mit ⇧+⌘+P (Mac) beziehungsweise Strg+⇧+P (Windows) auf und führt den Install-Befehl aus. Sucht dann nach „GutterColor“. Wartet, bis die Installation abgeschlossen ist und wechselt in die Console, um den convert
-Pfad von ImageMagick
zu finden. Der Befehl
which convert
Liefert euch den Pfad zurück. Ihn tragt ihr dann in eure GutterColor-Preference-Datei ein, die dann so ausehen sollte:
{
"convert_path" : "/usr/local/bin/convert"
}
Diese Datei könnt ihr übrigens über das Menü „Sublime Text / Preferences / Package Settings / GutterColor / Settings – User“ aufrufen. Et voilà: Ihr könnt jetzt Farbwerte in eurem Gutter anzeigen lassen.
Fazit: Sicher hilfreich, aber noch ausbaufähig
GutterColor unterstützt CSS-, SASS-, Stylus- und LESS-Syntax und zeigt bei der Eingabe von Hex-Werten die jeweilige Farbe im Gutter an. Soweit so gut. Leider funktioniert GutterColor nicht mehr, wenn ihr Farbwerte ausschreibt. Beispiel: „red“ liefert in der CSS-Syntax keinen Farbwert im Gutter zurück. Das selbe gilt auch für rgba()
-Werte. Etliche Anwender dürften sich über eine zukünftige Implementierung freuen.
Schade auch, dass ein falscher Hex-Wert auch in einer Farbe resultiert, GutterColor interpretiert hier nur die ersten sechs Zeichen – Abhilfe schafft hier nur das eigene Syntax-Highlighting, dass einen Fehler anzeigen sollte.
Werdet ihr dieses Plugin einsetzen?
via wesbos.com