Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

GutterColor im Einsatz. (Screenshot: t3n)

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.

gutter-colour
Klickt auf das Bild, um euch die GutterColor-Animation anzusehen. (Grafik: wesbos.com)

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

Bitte beachte unsere Community-Richtlinien

9 Reaktionen
Jens

@Mario

Dein Verhalten ist einfach lächerlich. Kaum kommt nur eine kritische Anmerkung, gehst du in einen Defensiv- und Rechtfertigungsmodus. Das ist für einen professionellen Autor einfach unangemessen, ist aber ein schönes Beispiel dafür, wie und wohin sich T3N schon seit längerem entwickelt.

Zum Thema an sich: die Diskussion, ob IDE oder Editor ist müßig. Du preist das Plugin generell als "genial" an, was eine gewisse Einzigartigkeit impliziert. Fakt ist, dass es solch eine Funktion in anderen Programmen schon gibt und damit die Genialität eher zweifelhaft. Zudem scheint der Funktionsumfang mehr als beschränkt zu sein (kein rgba!?)... was daran nun noch genial sein soll!?

Kurzum: Mehr Sachlichkeit würde dir in jedem Sinne gut tun.

Ron

@Janschitz: Die Aussage ergibt keinen Sinn. Ich kann sehr wohl Äpfel den Birnen vorziehen. Es kommt auf den Anwendungsfall an. IDE vs. Editor eben. So wie ich es geschrieben habe.

Ich kann sehr wohl ST3 und PS nebeneinander verwenden. Eben jedes für seine Stärke nutzen. (Wie beschrieben).

Was Du meinste ist, dass man einen Golden Delicious nicht einem Pink Lady vorziehen sollte. Wegen beschriebener Features.

Sei es nun drum. Jeder wie es er es mag.

Dieses war ein ST3 Artikel, also gut das ST3 dieses Plugin nun hat und man es nutzen kann. Kann es auch mehrere Farben einer Zeile anzeigen? Was ist das Maximum?

Christian Baer

@Janschitz
ich kenne Sublime nicht wirklich gut, was sind denn da so die Killer-Features? Man kann dort mehrere Zeilen und Variablen gleichzeitig bearbeiten, richtig?

Mario Janschitz

Im Text geht es aber um einen Editor und nicht um eine IDE. Deswegen ist für mich der Einwurf von Christian Baer nicht sinnig. Genauso wenig wie dein Kommentar, denn nur weil PhpStorm über eine Kleinigkeit seit etlichen Versionen verfügt -- aber anderweitig Schwächen hat, die ST3 eben nicht hat -- bedeutet das noch lange nicht, dass man PhpStorm ST3 vorziehen sollte. Apfel/Birne.

Ron

@Janschitz: PhpStorm kann das eben schon seit etlichen Versionen.

Es ist ganz einfach. Eine IDE nutzt man zum professionellen Entwickeln von WebApps und einen Editor nutzt man zum schnellen editieren von Dateien mit bewußtem Verzicht auf die Annehmlichkeiten die eine IDE einem bietet.

Beides hat seine Berechtigung.

Die letzte Frage ist unlogisch, da man ja auch nicht fragt worin man den Vorteil eines Autos gegenüber eines Fahrads sieht, mal abgesehen von der Auto-Funktiononalität.

Mario Janschitz

Hallo Chrisitan Baer.
Du vergleichst Editor mit IDE. Davon abgesehen bietet Sublime Text einige Vorteile – gerade bei Scriptingsprachen – die PhpStorm nicht bietet, ich kann daher deine Aussage nicht ganz nachvollziehen. Wo siehst du Vorteile gegenüber Sublime Text, außer der IDE-Funktionalität?

André Kirchner

Ich muss schon sagen. Oben schreibst du noch geniales Plugin, dann fällt das Fazit ob der Beschränkungen doch eher flach aus. Ich stimme meinem Vorredner zu, Python kann sowas auch ohne ImageMagick und wäre damit noch um einiges effizienter. Und den LookUp für Farbnamen und RegEx für rgb und rgba sind auch kein Hexenwerk. Die 2 Tage Programmierarbeit hätte ich vor Veröffentlichung noch investiert um ein wirklich geniales Plugin zu liefern. So kann man nur sagen "fast fertig".

Oink

Kenn ich von PHPStorm und ist manchmal sehr hilfreich. Das man dafür ImageMagick brauch ist mir völlig schleierhaft. Python sollte doch vollkommen ausreichend sein um sowas umsetzen zu können.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst