Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Einfache Optische Hilfen für besseres Entwickeln in Sublime Text

by
Length:ShortLanguages:

German (Deutsch) translation by Florian Fischer (you can also view the original English article)

Sublime Text bietet tausende Erweiterungen und Einstellungen um ihn zu einem personalisierten Code Editor für jedermann zu machen. Hier zeige ich, wie Du Einstellungen, Plugins, Themes und Farb-Schemata anpassen kannst um Sublime Text für Dich attraktiver zu machen. Das wird nicht nur Deinen Editor schöner machen, es macht Dich zu einem besseren Entwickler.

Einstellungen

Sublime Text bringt schon viele tolle Features mit, die dir die Orientierung im Code erleichtern. Manche dieser Einstellungen sind aber nicht automatisch aktiviert. Hier sind einige ohne die ich nicht mehr leben könnte.

Hinweis: Um Deine Einstellungen zu bearbeiten, gehst Du auf Sublime Text 2 > Preferences > Settings - Default und wählst dann den entsprechenden Eintrag aus .

sublime-settings

Hast Du eine Einstellung gefunden, die Du ändern möchtest, kopiere sie und füge sie in deine User Settings ein. Das verhindert, dass sie überschrieben wird, wenn Du Sublime Text aktualisierst.

sublime-settings-2

Um mehr über die Verwaltung von Einstellungen in Sublime Text zu erfahren, lese Installation and Base Settings

Schriften und Abstände

Die richtige Schriftart und den Zeilenabstand zu wählen ist einer der subjektivsten Wege die Darstellung des Codes anzupassen. Wähle zunächst eine passende Schriftart, vorzugsweise eine proportionale Schriftart. Hier sind ein paar gut geeignete Schriftarten:

Wenn Du Dich für eine Schriftart entschieden hast, stelle sicher, dass sie auf deinem System installiert ist. Füge sie den Einstellungen in Sublime Text hinzu und passe entsprechend die Schriftgröße und den Zeilenabstand an. Dies erreichst Du über folgende Einstellungen:

“font_face”: “Inconsolata";
"font_size": 18;
"line_padding_bottom": 1,
"line_padding_top": 1,

highlight_line

Diese Einstellung sorgt dafür, das die Zeile in der sich der Cursor befindet farbig hervorgehoben ist (abhängig vom Farbschema). Die hervorgehobene Zeile hilft Dir den Fokus der Aufgabe nicht zu verlieren und stellt eine Hilfe bei der Navigation durch den Code dar. Ausserdem ist das eine gute Orientierungshilfe, wenn Du von einem anderen Programm wieder zum Editor wechselst.

"highlight_line": true,

highlight_modified_tabs

Um ungespeicherte Änderungen leichter zu erfassen, sorgt diese Einstellung dafür, dass Tabs von geänderten Dateien farblich hervorgehoben werden.

"highlight_modified_tabs": true,

fade_fold_buttons

Wusstest Du, dass man im Sublime Text Code-Blöcke ein- und ausklappen kann? Ich weiss das, vergesse aber ständig, dass das Feature existiert. Wenn Du diese Einstellung aktivierst, siehst Du immer, das Du den aktuellen Block einklappen kannst.

"fade_fold_buttons": false,

word_wrap

Horizontale Scrollbalken nerven extrem. Wenn Du diese Einstellung aktivierst, bricht der text automatisch um und sie verhindert, dass Du nach links oder rechts scrollen musst,

"word_wrap": true,

bold_folder_labels

Es gibt einige Einstellungen, die eine gute Orientierungshilfe in der Sidebar bieten. Hier sind sie:

"bold_folder_labels": true, /* stellt Ordnernamen in fett dar */

Geöffnete Dateien in der Sidebar anzeigen

Diese Einstellung ist, warum auch immer, nicht in den Einstellungs-Dateien zu finden. Um geöffnete Dateien in der Sidebar anzeigen zu lassen benutze das Menü:

View → Side Bar → Show Open Files

Sidebar ausrichten

Ein kleiner Tipp, der eigentlich keine Einstellung ist. Wie in Excel auch, kannst Du doppelt auf die Grenze zwischen Sidebar und dem eigentlichen Code-Fenster klicken um die Sidebar automatisch so breit werden zu lassen, wie der längste Inhalt.

sublime-visual-sidebar

Plugins

Plugins sind eine echte Bereicherung in Sublime Text. Extrem empfehlenswert dabei ist Package Control um die Plugins zu verwalten.

BracketHighlighter

Bracket highlighter ist ein Plugin um zusammengehörige Klammer-Paare zu finden und hervorzuheben (siehe Screenshot). Ein hilfreiches Werkzeug um Anfang und Ende eines Blocks zu finden. Um welche Art von Klammern es sich handel wird wird dann in der Sidebar angezeigt.

sublime-visual-brackethighlighter-2

Git Gutter

Eins meiner Favoriten. Git gutter ist ein einfaches Plugin, dass im sogenannten Gutter (der Raum zwischen Sidebar und Inhalt) Änderungen im aktuellen git-Projekt darstellt. Also hinzugefügte, veränderte oder entfernte Zeilen.

sublime-visual-gitgutter-2

SublimeLinter

Dieses Plugin hebt Fehler im Code hervor. Mit der umfassenden Dokumentation und einer langen Liste an Code-Syntax-Validatoren ist dieses Plugin eine großartige Lösung um den Code fehlerfrei zu halten.

sublime-visual-sublimelinter-2

Themes und Farb-Schemata

Die mächtigsten Stellschrauben um Sublime Text zu personalisieren sind Themes und Farb-Schemata. Es gibt da draussen hunderte Möglichkeiten und noch viel mehr kommen jede Woche dazu. Ein paar von denen möchte ich hier mal auflisten.

Theme: Soda

Soda ist eines der bekanntesten Themes und ein gutes Beispiel für ein personalisiertes Theme in der Sublime Text Community. Viele Themes basieren auf dem Soda Theme. Soda bietet viele spezielle Einstellungen und Grafiken für Retina Displays. Sowie helle und dunkle Benutzeroberflächen.

sublime-visual-soda-2

Theme: Flatland

Wenn Du fan vom aktuellen flat trend bist, dann ist Flatland eine gute Wahl. Es vereinfacht eben alle Elemente.

Theme: Spacegray

Mein persönlicher Favorit und aktuell angesagt auf Github, Spacegray. Es hat eine einzigartige Farbpalette und ein superminimales UI.

sublime-visual-spacegray

Color Scheme: Solarized

Das allseits bekannte Solarized project ist ebenfalls verfügbar für Sublime Text. Hierbei handelt es sich um ein Projekt, dass den Titel trägt " Originalgetreue Farben für Mensch und Maschine". Ein Theme mit einzigartiger Farbentreue.

Color Scheme: Base16

Base16 ist ein weiteres Farb-Schema mit vielen Möglichkeiten (Momentan verwende ich genau dieses).

Fazit

Man könnte noch über so viele Dinge Worte verlieren. Aber, nicht vergessen, es gibt so viel zu beachten, wenn man Sublime Text personalisieren möchte. Nehmt mich nicht beim Wort, sondern macht Euch auf die Suche bei Github oder in der Package Control und probiert Dinge aus. Wenn Sie für Euch funktionieren, dann fein. Überdenkt euer Setup immer und immer wieder. Wenn es etwas Neues gibt, das Euch das (Entwickler-)Leben erleichtert, dann nutzt es!

Welche Einstellungen, Schriftarten, Plugins, Themes oder Farb-Schemata nutzt Ihr? Schreibt es in die Kommentare und teilt Euer wissen mit anderen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.