Adobe Brackets – Code Editor mit Live-Vorschau

Als Webdesigner kennt man das Problem.  Da tippt man mit dem Code Editor seiner Wahl stundenlang Zeilen herunter und muss immer mal wieder umständlich per Upload oder virtuellen Oberflächen überprüfen ob ein Script, ein Stylessheet oder ähnliches funktioniert, wie man es sich vorgestellt hat.

Aus dem Hause von Adobe kommt nun dagegen eine neue, nicht uninteressante Lösung mit dem Namen: Adobe Brackets.

Der Code im Fokus

Ziel von Brackets ist es nicht, wie bei etwa anderen Code Editoren, möglichst viele Funktionen und einer überladenen Anzahl Schaltflächen zu überzeugen, sondern den eigentlichen Programmcode im Fokus zu stellen.

In einem ersten Test klappte das auch schon ganz gut. Die Oberfläche wirkt sehr sauber und aufgeräumt und das Programm wirkt sehr angenehm für die Augen. Ideal also für längere, arbeitsintensive Stunden.

Live File Preview

Doch die saubere Oberfläche ist nicht das Einzige, was sich die Entwickler von Adobe ausgedacht haben um dieses Stück Software von Anfang an attraktiv zu machen.

Eines der, für mich überzeugendsten, Features ist der sogenannte „Live File Preview““-Modus, der die Arbeit für Programmierer erheblich erleichtern soll.

Dieser Modus ist im eigentlichen Sinne nichts weiter als eine Art Vorschaumodus für das, was man grade schreibt. Und zwar direkt im Browser. Dadurch wird die Arbeit, wie bereits erwähnt, mit beispielsweise einem Stylesheet erheblich vereinfacht.

Man kann sich das vorstellen, als würde man Live auf der Oberfläche der Webseite arbeiten. Jede Veränderung im Code wird ohne Verzögerung übernommen.

Quick Edit

Der „Quick Edit“-Modus ist ein weiteres interessantes Feature.

Da Webprojekte meist aus vielen Dateien bestehen, die dann in Tabs geöffnet sind, zwischen denen man umständlich hin und her wechseln muss.

Das ist meist sehr umständlich und deswegen lassen sich per STRG + E bzw. CMD + E die relevanten CSS Klassen eines ausgewählten DIV-Elements öffnen. Das geschieht ganz automatisch, denn Brackets findet die passenden Klassen in anderen Dateien und zeigt diese neben dem Element an und das ganz ohne die HTML Datei verlassen zu müssen.

Das funktioniert auch mit Javascript, wo sämtliche aufgerufenen Funktionen in einem Inline-Editor dargestellt werden.

Unvollständig – Adobe bittet um Hilfe

Leider ist das Programm noch nicht ganz fertig oder ausgereift. Aus diesem Grund bittet Adobe um Hilfe bei der Entwicklung.

Doch das ist nicht allzu schwer. Adobe Brackets selber besteht nämlich aus HTML, CSS und Javascript, wodurch sich das Programm von jemanden, der sich damit etwas auskennt, komplett umschreiben ließe. Außerdem ist der Code Editor unter einer Open Source Lizenz veröffentlicht worden.

Für Ideen oder Anregungen kann man sich außerdem auf der öffentlichen Trello Seite nützlich machen.

Download

Neugierig geworden? Adobe Brackets kann man sich in der aktuellsten Sprint-Version auf GitHub runterladen.

Weitere Infos gibt es auf der offiziellen Adobe Brackets Webseite.