HTML5 Editor: Brackets

Hier eine kleine Empfehlung für HTML5 Entwicklung: Brackets

Brackets ist ein Open-Source Editor der von Adobe entwickelt und vorrangetrieben wird. Das eigentlich interessante daran ist, dass der Editor komplett in Javascript geschrieben wurde, und daher wunderbar einfach erweiterbar ist. Eine ausführliche API Doku und ein kleines Tutorial für Plugins ist ebenso schon vorhanden.

Bevor man nun aber den dicken Download-Button clickt: dieses “Extract” war für mich eher unnützes Beiwerk. Damit kann man PSDs in die Adbobe Cloud hochladen um dann Style-Informationen herauszuziehen. Grundsätzlich eine nette Idee, wenn man viel mit PSDs arbeitet und sowieso schon einen Adobe-Account hat. Ich habe mich für die schlankere Version von Brackets ohne Extract entschieden.

Plugins

Durch die einfache Plugin-API gibt es schon wirklich viele Erweiterungen, bisher gefunden und als nützlich befundene Plugins für mich wären:

Emmet

Beautify

Quick Search

Brackets Snippets

Response for Brackets <- cool!

Keybindings

Die default Keybindings sind etwas gewöhnungsbedürftig, aber seit kurzem kann man diese auch ganz einfach ohne Plugin anpassen. Die keys dafür kann man sich in der Command.js anschauen, meine keymap.js schaut bisher so aus:

{
	"documentation": "...",
	"overrides": {
			"Ctrl-Alt-Down" : "edit.duplicate",
			"Alt-Down" : "edit.lineDown",
			"Alt-Up" : "edit.lineUp",
			"Ctrl-Shift-R" : "navigate.quickOpen",
			"Ctrl-O" : "navigate.jumptoDefinition",
			"Ctrl-Shift-C" : "edit.lineComment",
			"Ctrl-D" : "edit.deletelines",
			"Ctrl-Up" : "edit.addCursorToPrevLine",
			"Ctrl-Down" : "edit.addCursorToNextLine"
	}
}

Der gemeine Eclipse User wird sich damit etwas heimischer fühlen :-)

Ich nutze den Editor wirklich gerne, er reagiert schnell, und die vielen kleinen Innovationen wie das inline-editieren von verlinkten CSS Dateien, ohne die Datei tatsächlich öffnen zu müssen oder auch die Live-Vorschau machen das ganze zu einem netten und runden Paket.

Last posts

Tags