Sublime Text 2 Packages für Webdesigner

Grundlegend bietet Sublime Text 2 schon notwendige Erweiterungen für Webdesigner an. Doch manch einer schreibt nicht mehr schnödes CSS, sondern SASS oder {LESS}. HTML5 und CSS3 sind auch nicht von vornherein verfügbar. Also muss man sich manche Packages nachrüsten. Daher möchte ich einige nützliche Erweiterungen kurz vorstellen.

Was man als Webdesigner so brauchen könnte

HTML5 Package

Die HTML5 Syntax ist nicht gleich von Anfang an dabei. Lediglich HTML 4.01 und HAML. Also muss man sich dieses Paket nachinstallieren. Geht ganz einfach und danach funktioniert HTML5 super.

CSS3 Snippets

CSS selbst ist bereits in Sublime Text 2 verfügbar. Aber natürlich nicht die neuen Angaben der Version 3. Also auch hier muss man nachhelfen. Eine direkte Erweiterung gibt es hier nicht. Allerdings gibt es eine recht gute Snippet-Sammlung. Natürlich kann man sich auch selbst helfen und ein eigenes Snippet erstellen.

LoremIpsum Text

Als Webdesigner braucht man sehr viel Sprachkenntnis oder einfach ein bisschen Text als Filler. Mit dem LoremIpsum Package erspart man sich das Suchen nach einem Generator. Einfach einfügen und fertig.

Bracket Highlighter

Code ist gern mal sehr verschachtelt und das Ende einer Schleife oder eines Containers ist nicht auf den ersten Blick ersichtlich. Hier hilft der “Bracket Highlighter” und markiert farblich den Anfang und das Ende eines Elements.

{LESS}

Mit {LESS} lässt sich CSS sehr viel strukturierter und variabler schreiben und wird daher gern von Webdesignern verwendet. Das richtige Syntax Highlighting darf da natürlich nicht fehlen und die benötigte Variablenunterstützung.

SASS

SASS ist ähnlich wie {LESS}, nur in der Syntax und Art und Weise teilweise noch etwas anders aufgebaut. Die einen schwören auf SASS und die andern wiederum nicht. Das muss jeder selbst für sich entscheiden, was einem eher zusagt.

SublimeServer

Webprojekte landen üblicherweise auf Servern. Daher ist es nicht ganz sinnfrei, in Sublime Text 2 einen lokalen Server zu haben und auf die Ordner und Daten dort zu zugreifen. Mit “SublimeServer” wird genau dieses Feature nachgerüstet.

View In Browser

Beim Programmieren von Webseiten muss man immer wieder zwischen Browser und Editor wechseln. Das Plugin “View in Browser” öffnet einem alles im aktiven Tab im Browser der Wahl. Sollte die Datei noch nicht gespeichert sein, wird eine temporäre Datei im Format .htm angelegt.

JQuery

JQuery ist mehr oder weniger eine eigene Scriptsprache. Daher ist es recht klug, sich dafür ein Package zu suchen. Das Paket kommt mit Snippets und Syntaxhervorhebung daher und greift beflissenen JQuery-Codern unter die Arme.

SublimeStringEncode

HTML Entities, URL encoden/decoden, Regex escaping, Base64 Codierung, das alles braucht man relativ häufig. Mit “SublimeStringEncode” bekommt man eine Erweiterung, die in diese Schreibweisen wandelt und zurück.

Die weite Welt der Packages

Für Webdesigner gibt es noch mehr spezifischere Erweiterungen. Einfach die Suche auf wbond.net verwenden und sich die benötigten Packages von GitHub herunterladen, bzw. "Package Control" verwenden. Auf GitHub selbst kann man ebenfalls suchen. Die meisten Erweiterungen sind auch schon crossplattformfähig und laufen dammit unter Windows, Linux und Mac OS X.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

1 Kommentar

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Yannick · · #

    Schöne Auflistung nützlicher Packages. Das HTML5 Packages kannte ich noch nicht und hab es gleich installiert!