18.03.2014, 14:07 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

In diesem Artikel zeigen wir dir ein nützliches Plugin für Sublime Text in der dritten Version: GutterColor. Damit könnt ihr euch Farben aus euren CSS-Attributen direkt in eurem „Gutter“ anzeigen lassen, was für besseren Überblick sorgt.

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