Von Judith: Workflow-Optimierung für Sublime Text – Die besten Plugins

Wer auf der Suche nach einem neuen Code-Editor ist, der wird schnell über Sublime Text stolpern. Dieser Editor ist unter uns Webdesignern sehr beliebt. Er verfügt über eine Standardlizenz, bei der ab und an Werbung eingeblendet wird. Wenn dich die Werbeanzeigen stören, kannst du für einen kleinen Obolus eine Lizenz erwerben. Dann ist der Editor nicht nur werbefrei, du unterstützt damit auch die Entwickler.

Ein großer Vorteil von Sublime und anderen Code-Editoren ist, dass sie eine große Community im Rücken haben. Es werden viele verschiedene Plugins und Themes angeboten, die dir deinen Arbeitsalltag verschönern und vereinfachen.

Wir haben unsere Kollegen gefragt, was ihre Lieblings-Sublime-Plugins sind und möchten dir im Folgenden die Ergebnisse präsentieren:

1. Package Control
2. Emmet
3. HTML Beautify
4. SCSS
5. FileDiffs
6. Color Highlighter
7. Alignment
8. BracketHighlighter
9. A File Icon
10. JavaScript & NodeJS Snippets
11. GitGutter

Die beliebtesten Sublime Plugins im Detail

Package Control

Package Control ist der Manager deiner Plugins! Mit dem Tool kannst du ganz komfortabel Plugins installieren und managen. Du wirst dich schnell an Package Control gewöhnen und schon nach kurzer Zeit deinen Workflow steigern können. Der große Vorteil: Du musst nicht mehr auf irgendwelche Internetseiten gehen, die Plugins herunterladen und anschließend installieren. Du bleibst die ganze Zeit im Programm und wirst nicht abgelenkt.

Emmet

The Flash – mit dem Tool codest du wie der Blitz! Kurz ein paar Zeichen aufgeschrieben und mit der Tabulator-Taste bestätigt. Zack, hast du mal eben das Gerüst für die Website gebaut.

Es kann gut sein, dass dich die vielen Funktionen am Anfang etwas überfordern. Aber kein Grund zur Sorge! Wir haben dir ein Cheatsheet rausgesucht, das von Emmet selbst erstellt wurde.

HTML Beautify

Nichts ist bei der Fehlersuche nerviger als ein unsauber eingerückter Code. Da macht HTML Beautify das Leben in so mancher Situation deutlich einfacher! Das Plugin rückt für dich den Code zurecht. So sparst du dir am Ende einige Minuten bei der Suche eines fehlerhaft geschlossenen Tags.

SCSS

SCSS hilft dir, die Syntax im SCSS in der richtigen Farbkodierung darzustellen, wie du es zum Beispiel aus SASS oder CSS kennst.

FileDiffs

Mit FileDiffs findest du Fehler oder Differenzen im Code schneller. Stell dir vor, du hast ein Backup einer funktionierenden Version, aber aktuell läuft nichts mehr. Dann hilft es dir vielleicht, die Backup-Datei mit der aktuellen Datei zu vergleichen, um zu sehen, welche Zeilen du entfernt und welche du hinzugefügt hast.

Color Highlighter

Wenn du Farben in Hex-Zahlen anlegst, dann fällt es dir vielleicht manchmal schwer, im laufenden Coding die Farben schnell richtig zuzuordnen. Mit dem Color Highlighter genügt ein Klick auf die Hex-, RGB-, HSL- und HSV-Zahlen und du bekommst die richtige Farbe und vieles mehr direkt angezeigt.

Alignment

Auch in CSS schnell richtig einrücken? Hier hilft dir Alignment! Kurz alles markiert und dann STRG + ALT + A (Windows) oder CMD + CTRL + A (Mac Os) drücken. Nun ist wieder alles richtig angeordnet. Wie du Alignment einrichtest, erfährst du in diesem Guide von Scott Granneman.

BracketHighlighter

Mit diesem Tool kannst du die Elemente schneller finden, die falsch geschlossen worden sind. Tipp: Für BracketHighlighter ist es sinnvoll, direkt in den Settings folgende Einstellung einzuschalten: „content_highlight_bar“: true. Dadurch bekommst du kleine Zeichen seitlich neben deinen Zeilennummern sowie eine „Highlight Linie” zwischen den Tags angezeigt.

A file Icon

Im Arbeitsflow vergisst man manchmal, welche Datei gerade offen ist und in welcher Sprache sie geschrieben wurde. A file Icon bietet Abhilfe für dieses Problem. Das Plugin setzt in den Projektbaum ein Icon für den Dateityp.

JavaScript und NodeJS Snippets

The Flash für JavaScript! Mit diesem Tool kannst du deinen Coding-Fluss für JavaScript und NodeJs beschleunigen. Du schreibst oft die gleichen Funktionen? Dann hilft dir das Tool durch das Verwenden von Kürzeln, die du schnell zu deinen gewünschten Funktionen expandieren kannst.

Weitere hilfreiche Plugins und Tipps für Sublime

Wer eine andere Farbkombination bevorzugt, der sollte sich das Plugin Color Sublime einmal genauer ansehen. Das Tool bietet dir einige weitere Farbpaletten für das Interface von Sublime an.

Wer gerne die Pixelwerte hochschiebt, wie zum Beispiel in den F12-Tools von Chrome oder Mozilla Firefox, der kann mit STRG+Pfeiltaste hoch / runter in einzelnen Schritten verschieben.

Wir hoffen, dass dir dieser etwas andere Blogeintrag gefallen hat. Lass es uns in den Kommentaren wissen!