Sublime Text 2: Erweiterungen

Sublime Text bietet für den Benutzer jede Menge Erweiterungen.

Nach unserem Blog-Artikel zu den Einstellungen, stellen wir hier nun einige Anpassungsmöglichkeiten vor, die uns das Entwickler-Leben vereinfachen und auch dich bei der Arbeit unterstützen können.

Package Control

Sozusagen die Mutter aller Erweiterungen. Sie wird benötigt, um Sublime Packete, Themes und Farbschemas auf einfachste Art zu verwalten. Package Control kann mit Hilfe der Installationsanleitung ganz einfach hinzugefügt werden. Nach erfolgreicher installation am besten Sublime neustarten. Nun kann mit Hilfe der Tastenkombination ctrl+shift+p bzw. über das Menü Tools > Command Palette der Eintrag Package Control: Install Package ausgewählt werden und die entsprechende Erweiterung gesucht und installiert werden.

Theme – Soda

Das Soda Theme ist ein weit verbreitetes, einfaches Theme. Es gibt es den Varianten hell und dunkel. Wir verwenden hier die dunkle Variante. Nach dem Installieren mittels Package Control, den Editor neu starten und in den Einstellungen folgende Zeilen hinzufügen.

"theme": "Soda Dark.sublime-theme",
"soda_folder_icons": true

Farbschema – Tomorrow Night Eighties

Das Tomorrow Farbschema gefällt mir dank des vielseitig einsetzbaren Möglichkeiten sehr gut. Es gibt das Farbschema für eine Vielzahl von Anwendungen und trifft mit seiner Schlichtheit mein Geschmack. Das Farbschema steht in fünf Varianten zur Verfügung. Ich verwende für meine tägliche Arbeit Tomorrow Night Eighties. Zum installieren, wie gewohnt via Package Control suchen und anschliessend folgende Zeile in den Einstellungen ergänzen.

"color_scheme": "Packages/Tomorrow Color Schemes/Tomorrow-Night-Eighties.tmTheme"

SCSS Syntax

Die SASS Syntax Highlighting Erweiterung SCSS ermöglicht Sublime deine SASS Dateien schön darzustellen. Zusätzliche Unterstützung beim Programmieren bieten die SCSS Snippets. So wird z.B. durch Eingabe von + und drücken von tab automatisch @import an die entsprechende Stelle eingefügt. Zusätzliche Snippets findest du auf der Projektseite.

Apache​Conf Syntax

Syntax Highlighting für Apache Konfigurationsdateien wie .htaccess, .htpasswd, .htdocs. ApacheConf.tmLanguage auf Github

Bracket​Highlighter

Die Erweiterung BracketHighlighter zeigt die Klammer, den Tag oder die Hochkommas, bezogen auf die aktuelle Cursorposition im Gutter an. Dies ist sehr hilfreich, um bei längeren Code-Blöcken die zugehörige Klammer zu finden. Zudem bietet die Erweiterung weitere nützliche Funktionalitäten, welche mittels ctrl+shift+p ausgeführt werden können.

Emmet

Emmet ist ebenfalls bekannt unter dem Namen Zen Coding und entfaltet sich beim Schreiben von HTML und anderen Tag-Basierten Sprachen. Hierbei handelt es sich um einen Parser, welcher mit Hilfe von Text-Snippets, Tags mit zugehörigen Attributen und sogar Inhalten ausgeben kann. So wird z.B. in einem HTML Dokument durch die Eingabe von .row>.column.large-4*3 + tab folgende Ausgabe erzeugt:

<div class="row">
    <div class="column large-4"></div>
    <div class="column large-4"></div>
    <div class="column large-4"></div>
</div>

Der Cursor springt dabei direkt zwischen den ersten div und man kann mittels tab zum zweiten springen. So kann man auf einfachste Art und Weise eine HTML Grundstruktur zusammenbauen. Die Snippets erinnern sehr stark an CSS-Selektoren welche unter JavaScript verwendet werden um sich im DOM zu bewegen. Diese Tatsache macht das erlernen der entsprechenden Snippets zum Kinderspiel.

Genauere Informationen findet man in der Emmet Dokumentation und im Emmet Cheatsheet. Ausprobieren lohnt sich!

All Autocomplete

All Autocomplete sucht nicht nur in der aktiven Datei nach bereits verwendeten Wörtern und schlägt diese beim schreiben vor, sondern in allen momentan geöffneten Dateien. Somit können lästige Schreibfehler besser vermieden werden und ist sehr nützlich bei häufiger Wiederholung von Funktions- und Variablennamen.

DocBlockr

Mit Hilfe von DocBlockr können ganz einfach Kommentar-Blöcke eingefügt werden. Es bedient sich hierbei der üblich verwendeten Dokumentationssyntax der geöffneten Datei. Momentan werden die Programmiersprachen JavaScript, PHP, ActionScript, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ und Rust unterstützt. Um z.B. ein neuer Kommentarblock in PHP einzufügen kann mittels Eingabe von /** + tab folgender Block an dessen Stelle eingefügt werden:

/**
  * 
  */

Wenn man nun das gleiche vor einer bereits definierten Funktion ausführen, passiert folgendes dabei.

/**
 * [doSomething description]
 * @param  [type] $arg1 [description]
 * @param  [type] $arg2 [description]
 * @param  [type] $arg3 [description]
 * @return [type]       [description]
 */
function doSomething($arg1, $arg2, $arg3) {
    return $returnValue;
}

Und jetzt kann man mittels tab zwischen den einzelnen Werten zwischen den [] hin und her springen, um diese zu ergänzen. Somit kann die Dokumentation relativ einfach während der Programmierung mitgeführt werden.

Für weitere Informationen zur Benützung der Erweiterung empfehle ich ein Besuch auf deren Github Seite.

SublimeCodeIntel

Die Erweiterung SublimeCodeIntel bietet Codevervollständigung mit inline Hilfe für Sublime Text. Die Erweiterung erkennt momentan die Programmiersprachen: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit und PHP. Sobald ihr den Namen der Funktion bzw. des Tags beginnt, erscheint ein kleines Fenster über dem Cursor und zeigt sowohl die Datentypen der Argumente als auch eine kurze Beschreibung ihrer Bedeutung. Ihr könnt die Hilfe auch via ctrl+click in der Statuszeile nachlesen oder mittels ctrl+shift+space erneut anzeigen lassen. Die Erweiterung zeigt zudem Dokumentations-Kommentare welche mit Hilfe der zuvor vorgestellten Erweiterung DocBlockr eingefügt wurden.

Git und GitGutter

Wenn ihr mit Git arbeitet und im Sublime mal kurz euer Repository anfragen möchtet empfehle ich die Erweiterung Sublime-Text-Git. Mit ihr erhaltet ihr Informationen zum Repository in der Statuszeile und lassen sich via ctrl+shift+p einfache git-Funktionen direkt im Sublime ausführen. Im Wiki der Erweiterung erhaltet ihr genauere Informationen zu den Befehlen.

GitGutter reichert den Gutter mit Symbolen zum Status der aktuellen Datei im Vergleich zum drunter liegenden Commit an.

SFTP

Die SFTP Erweiterung kostet zwar $20.-, ist es aber allemal Wert. Sie ermöglicht es lokale Dateien beim Speichern via sftp, ftp oder ftps zu synchronisieren. Dabei kann unter anderem festgelegt werden, ob jeweils gewarnt werden soll, wenn die entfernt gelegene Datei neueren Datums ist oder ob beim öffnen die entfernt gelegene Datei zuerst heruntergeladen werden soll. Zudem hat man über ctrl+shift+p die Möglichkeit das Remote Verzeichnis zu durchforsten, Dateirechte zu verändern, Dateien umzubenennen oder zu löschen. Dazu wird ganz einfach im Root-Verzeichnis eine sftp-config.json Datei mit folgendem Inhalt angelegt.

{
    // sftp, ftp or ftps
    "type": "ftp",

    "save_before_upload": true,
    "upload_on_save": true,
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": true,

    "host": "domainname.ch",
    "user": "username",
    "password": "password",
    //"port": "22",

    "remote_path": "/path/on/remote/server",
    "ignore_regexes": [
        ".sublime-(project|workspace)", "sftp-config(-altd?)?.json",
        "sftp-settings.json", "/venv/", ".svn", ".hg", ".git", "Icon",
        ".bzr", "_darcs", "CVS", ".DS_Store", "Thumbs.db", "desktop.ini", "config.rb", "/.sass-cache/"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",

    //"extra_list_connections": 0,

    "connect_timeout": 30
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],

    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
}

Alternativ dazu kann man mit der rechten Maustaste > SFTP/FTP > Map Remote… auf ein Ordner in der Seitenleiste klicken. Dabei wird eine neue, leere Config-Datei erzeugt. Wichtig ist hierbei, dass der Rechtsklick auf das Root-Verzeichnis gemacht wird. Weitere Informationen zu den Optionen finden sich in der SFTP Hilfe Aufgrund dieser Config-Datei werden nun beim Ändern und Hinzufügen von Dateien und Verzeichnisen im lokalen Verzeichnis automatisch auch auf dem entfernt gelegenen Verzeichnis durchgeführt. Umbenennen, Verschieben und Löschen sollten über das Kontext-Menü > SFTP/FTP der jeweiligen Datei durchgeführt werden, um diese auf dem FTP ebenfalls durchzuführen.

Beim arbeiten mit SASS hat man meist lokal ein Watcher-Prozess, welcher bei Änderungen an den SASS Files die CSS Dateien neu generiert. Damit die SFTP Erweiterung nun weiss, das diese Datei verändert wurde, kann mittels Kontext-Menü > SFTP/FTP > Monitor File (Upload on External Save) die Datei manuell überwacht werden. Achtung: Die Datei muss im Editor geöffnet bleiben, ansonsten wird sie nicht mehr überwacht.

Fazit

Wie ihr seht, sind Sublime Text fast keine Grenzen gesetzt und das ganze läuft selbst mit einigen installierten Erweiterungen gewohnt performant. Welche Erweiterungen benützt du, um deine Arbeit zu erleichtern?

  • #Erweiterungen
  • #Programme
  • #Sublime Text
  • #Tools

Kommentare

Leider hats noch niemanden interessiert. Dich vielleicht?

Kommentar schreiben

Ähnliche Beiträge

Zur Übersicht

Mit der Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Weitere Informationen