senäh

17senäh und so…

Sublime Text 2

Allgemein
12. Aug 2013
Kommentare: 6

Sublime Text Plugins – 15 kleine und große Helferlein

Kategorien: Allgemein | 12. Aug 2013 | Kommentare: 6

Auch wenn ich meiner alten Liebe RubyMine wohl niemals komplett den Rücken kehren werde, ist Sublime Text mittlerweile mein Haupteditor. Lange Zeit ignoriert, in einem Video dann mit durchgehend offener Kinnlade bewundert habe ich vor allem den Speed und die aktive Plugin-Community dahinter lieben gelernt. Und um genau diese soll es in diesem Blogpost gehen: Sublime Text Plugins, die ich einsetze.

Ich bin vergleichsweise geizig beim Installieren von Plugins und versuche all das, was ich nicht wirklich brauche, zu eliminieren. Weniger ist mehr. Allerdings sind doch ein paar nützliche zusammen gekommen.

Vorneweg: es handelt sich hierbei um Plugins für Version 2, da sich die 3 einerseits noch in der Beta befindet und ich andererseits nicht vorhabe, sofort auf die 3er zu wechseln. Eigentlich bin ich da nicht so, was Software-Updates angeht, ganz im Gegenteil. Aber bei einem Werkzeug, dass ich jeden Tag nutze, bei dem ich bestimmte Workflows gewohnt bin, ja, mich sogar darauf verlasse, kann ich Kinderkrankheiten und fehlende Funktionalität durch noch nicht komplett portierte Plugins nicht gebrauchen. Darum also Plugins für Sublime Text 2 (fortan als ST abgekürzt).

Package Control

Die Verwaltung der ST Plugins sollte mMn in der Core-Funktionalität von ST enthalten sein, weswegen das Aufzählen von Package Control eigentlich unnötig ist. Sollte das erste sein, was jeder ST Benutzer installiert.

Allerdings hat Entwickler Will Bond gerade Version 2.0.0 veröffentlicht und im Changelog zugesagt einen Mac Mini und eine Windows-Lizenz zu kaufen, um seine Plugins auch auf anderen Plattformen testen zu können. Da er für seine Plugins keinerlei Geld verlangt, möchte ich jeden unter euch, der ST und damit einhergehend Package Control nutzt, bitten, zu diesem Vorhaben ein paar Euronen beizutragen. Denn ganz nebenbei stemmt er jeden Monat ca. $100 Dollar Hosting-Kosten für Package Control, einfach so.

Tut dem Mann was Gutes und spendet via Paypal, Flattr, Bitcoins oder Gittip, was ihr entbehren könnt. Guter Scheiß gehört belohnt.

Jetzt aber wichtungsfrei einfach dem Alphabet nach weiter.

AdvancedNewFile

Ein Plugin, mit dem sich via Shortcut Dateien an beliebigen Pfaden erstellen lassen. Am unteren Bildschirmrand geht ein Eingabefeld auf, in dem der Benutzer den Namen inkl. komplettem Pfad angeben kann. Hat auch Pfad-Autocompletion via Tab dabei. Nicht existierende Ordner werden angelegt. Außerdem allerhand weitere Features.

AdvancedNewFile im Einsatz

AdvancedNewFile im Einsatz

AutoFileName

Erweitert Autocomplete-Ergebisse an passenden Stellen um Dateinamen, was vor allem für Angaben von Bildpfaden hilfreich ist.

Autocomplete von Bildpfaden

Autocomplete von Bildpfaden

Allerdings ist dieses Plugin mit ein wenig Vorsicht zu genießen, da es mitunter alle anderen Autocompletes überschreibt, was in manchen Sitationen tierisch nerven kann. In der Version für Sublime Text 3 gibt es deswegen die Möglichkeit einen dedizierten Shortcut nur für das Autocompleten von Dateinamen zu vergeben. Dieses Verhalten sieht der Entwickler selbst aber nur als temporären Fix, weswegen hier mit baldiger Verbesserung zu rechnen ist.

BracketHighlighter

Für eine schnellere Code-Übersicht und das Finden von zusammengehörigen Klammern, Tags und Statements eignet sich BracketHighlighter hervorragend. Man achte auf die Hervorhebung der Zeichen selbst und den linken Rand neben der Zeilenanzeige:

Tags in HTML

Tags in HTML

Klammern in JavaScript

Klammern in JavaScript

Klammern und Blöcke in Ruby

Klammern und Blöcke in Ruby

Emmet

Was ehemals Zen Coding hieß, wird unter dem Namen Emmet fortgeführt und dient dazu auf sehr schnelle Weise HTML zu generieren. #nav-wrap>ul>li*4>a.nav-link generiert beispielsweise

1
2
3
4
5
6
7
8
<div id="nav-wrap">
  <ul>
    <li><a href="" class="nav-link"></a></li>
    <li><a href="" class="nav-link"></a></li>
    <li><a href="" class="nav-link"></a></li>
    <li><a href="" class="nav-link"></a></li>
  </ul>
</div>

Ich fand das schon immer praktisch, hatte aber wenig Verwendung dafür, da ich zu selten HTML-Seiten von Null hochziehe. Meist arbeite ich an existierenden Templates.

Der absolute Killer ist allerdings die Erweiterung dieses Prinzips auf CSS. Ein paar Beispiele (links die Abkürzung, rechts das Ergebnis via Tab-Trigger):

  • mt20: margin-top:20px;
  • w100%: width:100%;
  • m0-a: margin:0 auto;
  • db: display:block;
  • ta:c: text-align:center;

Alle Möglichkeiten sind im Emmet Cheat Sheet aufgeführt. Durch die Fuzzy Search von ST beim Autocomplete kann man sogar die gelegentlich notwendigen Doppelpunkte weglassen. Wirklich eine epische Zeiterparnis, die ich jedem, aber wirklich jedem empfehle, der halbwegs regelmäßig mit CSS hantiert.

Expand Selection to Quotes

In ST gibt es ⇧⌘Space für die kontextbezogene Erweiterung der Auswahl. Die ist allerdings vergleichsweise dumm und absolut kein Vergleich zu dem, was RubyMine drauf hat. Zwar steht in Sublime Text der Großteil dessen, was RubyMine anstellt, auch funktional zur Verfügung…

Menüeinträge zur Erweiterung der Auswahl

Menüeinträge zur Erweiterung der Auswahl

… die automatische Erweiterung klappt aber in 70% der Fälle nicht so, wie sie soll.

Um für den meiner Meinung nach häufigsten Anwendungsfall Abhilfe zu schaffen, habe ich das Plugin Expand Selection to Quotes installiert. Dadurch kann ich per Shortcut den Inhalt zwischen zwei Anführungszeichen (einfach oder doppelt) auswählen. Bei erneutem Betätigen des Shortcuts werden die Klammern selbst auch mit ausgewählt.

Highlight

Syntax-Highlighting ist was feines, auch für Präsentationen. Wenn man aber nicht gerade auf HTML5-Frameworks setzen sondern good old Keynote oder PowerPoint (hust) verwenden möchte, war das bisher nicht ohne weiteres zu realisieren. Entweder man hat Screenshots eingebunden (skaliert nicht gut) oder für kurze Snippets das Syntax-Highlighting durch händisches Formatieren nachgebaut (dauert ewig). Mit Highlight lässt sich Quelltext im Rich Text Format kopieren und somit in jede RTF-fähige Applikation einfügen.

Die Themes sind dabei relativ beschränkt, was schade ist. Aber besser als nichts. Es gibt auch eine Übersicht der möglichen Farbschemata, die kein Geringerer als der Autor dieser Zeilen selbst beigetragen hat ;)

LiveReload

LiveReload – für die unter euch, die es nicht kennen (shame on you!) – lädt eine Webseite im Browser neu, sobald sich CSS, JS oder das HTML selbst verändern. Beschleunigt die Arbeit beim Entwickeln ungemein. Und natürlich gibt es ein Plugin dafür.

Arbeitet auch wunderbar mit der Chrome-Extension zusammen. Nur zwei Punkte:

  • Wer über file:// statt http://localhost arbeitet, sollte in den Einstellungen der Chrome-Extension den Zugriff auf Datei-URLs zualssen.
  • Wer Probleme in der Kombo mit Sublime Text 2 hat, sollte versuchen in den User-Settings für Live-Reload (im Packages-Ordner unter /User/LiveReload.sublime-settings) folgende Zeile hinzufügen: {“apply_css_live” : false} (siehe Issue dazu).

MarkdownEditing

Für das Schreiben von Markdown benutze ich eigentlich Byword als dediziertes Programm, da es schneller geöffnet und genau dafür gemacht ist. Als ich aber für meinen neuen Blog mit Octopress gearbeitet habe, war es von Vorteil auch innerhalb von ST eine Markdown-Datei in einer halbwegs gescheiten Umgebung verändern zu können. Für jene Umgebung sorgt Brett Terpstra mit seinem Plugin MarkdownEditing.

Mir persönlich ging es nur um das Theme, das z.B. die Textbreite beschränkt, Markdown Syntax-Highlighting anbietet und ein Byword-ähnliches Farbschma bietet. Es gibt allerdings so viel mehr nützliche Funktionen, dass ich nicht abgeneigt bin über kurz oder lang vielleicht komplett auf ST als Schreibumgebung zu wechseln. Mal schauen.

OpenSearchResult

In ST ist alles textbasiert, sowohl die Einstellungen, als auch die globalen Suchergebnisse. In den Suchergebnissen selbst lassen sich relevante Stellen doppelklicken, um die betreffende Datei an der richtigen Stelle zu öffnen. Doppelklick heißt aber Maus benutzen, Maus benutzen heißt meeeh.

Darum das Plugin OpenSearchResult. Mit Ctrl-Enter kann ich fortan ein Suchergebnis öffnen, ohne die Maus zu bedienen.

Zu beachten ist hier, dass ihr in Package Control erst das Repository hinzufügen müsst, da das Plugin nicht out-of-the-box in den installierbaren Packages gelistet wird.

QuickRef

QuickRef ist eines der kreativeren Plugins. Nicht nur, weil es entgegen dem Kommerz auf Bitbucket statt Github gehostet ist ;) Mit QuickRef könnt ihr die Kommandos bzw. Shortcuts für jene Kommandos, die ihr euch besonders schwer merken könnt, an einer Stelle sammeln.

QuickRef in der Kommandopalette

QuickRef in der Kommandopalette

Dadurch habt ihr eure Favoriten gesammelt an einer Stelle. Schnell nachgeschlagen, schneller gelernt. Das Tool ist verdammt praktisch, ein Durchlesen der Doku verrät mehr.

SCSS

Kein CSS mehr ohne Preprocessor. Sass bzw. SCSS scheint sich durchzusetzen. ST bietet ein paar Plugins dafür, ich habe mich für dieses hier entschieden. Beliebter ist ein anderes, allerdings haut bei diesem das Syntax-Highlighting nicht so wirklich hin.

SidebarEnhancements

Füttert die vergleichsweise enttäuschende Sidebar mit ein paar sinnvollen Funktionen:

Rechtsklick auf ein Item in der Sidebar

Rechtsklick auf ein Item in der Sidebar

SublimeLinter

Seitdem ich auf ST setze gehen mir immer öfter Syntaxfehler durch die Lappen und fallen mir erst beim Aufruf einer Seite auf. Da wusste RubyMine aggressiver darauf hinzuweisen. Um diesem Misstand etwas entgegen zu wirken gibt es SublimeLinter. Das Plugin packt an die entsprechenden Zeilen ein subtiles, aber ausreichendes Warnzeichen. Je nach Fehlerstufe ein gelbes Warndreieck oder ein rotes Verbotsschild.

SublimeLinter in Aktion

SublimeLinter in Aktion

VAlign

Und noch ein Feature, das ich in RubyMine lieben gelernt habe und in ST schmerzlich vermisse: automatische Code-Formatierung. Kleine Unregelmäßigkeiten bei der Einrückung wurden korrigiert, der Code-Stil einer Datei (oder eines ausgewählten Bereiches) vereinheitlicht.

In ST gibt es mit VAlign die Möglichkeit bestimmte Zeilen vertikal auszurichten. Sinnvoll ist das bei Variablendeklarationen oder einer Auflistung von Objekteigenschaften. Per Shortcut werden die zur aktuellen Zeile gehörenden Code-Fragmente ausgerichtet.

VAlign in JavaScript

VAlign in JavaScript

Fazit

ST überzeugt durch Speed und seine Erweiterbarkeit. Ich bin gespannt, inwiefern sich das mit Version 3 noch weiter verbessert. Bis dahin sollten die hier genannten Plugins dem ein oder anderen den Dev-Alltag versüßen.

Habt ihr noch coole Plugin-Tipps für mich und den Rest der Leserschaft?

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (6)

  1. Feine Liste, kannte einige davon noch nicht :)
     
    Hier noch ein paar nützliche:
    ReadmePlease
    https://github.com/roadhump/ReadmePlease
    Öffnet automatisch die README datei von neu installierten / aktualisierten packages.
    Leider funktioniert das nicht immer :/
     
    MacTerminal
    https://github.com/afterdesign/MacTerminal
    Öffnet den Folder vom aktuellen Dokument im Terminal
     
    GitGutter
    https://github.com/kemayo/sublime-text-2-git
    Markiert noch nicht committed in der Nummernleiste

    • Danke für deine Tipps.

      • ReadmePlease sollte mMn eine Core-Funktionalität von Sublime sein (natürlich deaktivierbar).

      • MacTerminal: habe ich momentan keinen Anwendungsfall für in meinem Workflow. Oft öffne ich Projekte in Sublime und iTerm gleichzeitig, wegen so Watchern wie Compass und LiveReload. Merke ich mir aber auf jeden Fall.

      • GitGutter: das Git-Plugin hatte ich mal installiert, aber für sowas habe ich RubyMine nebenher laufen. Da wird das ganze doch ein bisschen besser visualisiert. Und für so Sachen wie Adds und Commits habe ich TextExpander Schnipsel, mit denen das schon recht fix geht. Vielleicht schaue ich mir das Plugin aber noch mal etwas näher an.
  2. Unter den Must Haves befindet sich bei mir außerdem noch Prefixr, welches automatisch die CSS Präfixe für verschiedene Browser in den Code übernimmt.

  3. Pingback: Lesenswertes 14/08/2013 | Sebastian Booch

  4. Danke für die Liste, da sind einige gute Plugins bei. Ich werde mir auf jeden Fall das AdvancedNewFile installieren, das klingt sehr praktisch Mit dem BracketHighlighter hatte ich in der Vergangenheit leider Probleme, mir stürzte dann ST häufig ab.
    Ich habe übrigens auch eine kleine Liste meiner Plugins verfasst (um mal ganz schamlos Werbung zu machen), vielleicht ist da ja für den einen oder anderen noch etwas Interessantes dabei: http://www.maurice-renck.de/de/blog/top10-sublime-text-plugins/
     

Hinterlasse einen Kommentarsenäh

Pflichtfelder sind mit * markiert.