Open Source – Code-Editor Brackets

Brackets ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Brackets eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen und verwaltet es auf Github.

Brackets ist der Bruder und gleichzeitig Nachfolger von Adobe Edge Code. Edge Code war die kommerzielle Version, Brackets ist ein Open Source-Code-Editor, aber mit demselben Funktionsumfang.

Brackets ist klein und leicht mit rund 115 MB. Weil Brackets in HTML, CSS und Javascript programmiert ist, hängen Plugins zur Erweiterung von Brackets tief und der Code-Editor hatte bereits früh eine ansehnliche Liste von Plugins, die aus Brackets heraus direkt installiert werden.

Die Erweiterungen wurden auch in die Updates von Adobe Edge gepackt. Während Brackets neue Funktionen und Erweiterungen schneller mitbringt, war Adobe Edge besser in die Adobe Cloud integriert. Das war’s auch schon mit dem Unterschied zwischen Brackets und Adobe Edge. Im November 2014 hat Adobe die Weiterentwicklung von Edge eingestellt, um sich besser auf Brackets zu konzentrieren.

code-editor-brackets
Syntax-Highlighting, Auto-Complete und Code-Hinting sind heute selbstverständlich für Code-Editoren. Was kann Brackets darüber hinaus?

Schöne Funktionen in Brackets

  • Ein Klick in ein öffnendes HTML-Tag, und Brackets zeigt das dazugehörige schließende Tag.
  • Mit cmd e / ctrl e zeigt Brackets die CSS-Regeln für einen HTML-Block an.
  • Wie der famose BBEdit hat Brackets eine Live-Vorschau (zurzeit nur Chrome, weitere Browser sollen folgen), aber die Verbindung zwischen Quellcode und Vorschau ist enger als die eingebaute Webkit-Vorschau bei BBedit. Ein Klick in ein HTML-Tag, und Brackets unterlegt die HTML-Vorschau des Blocks farbig, ähnlich wie wir es von den Developer-Tools der Browser kennen. Die Live-Vorschau funktioniert aber nur bei reinen HTML-Seiten. Bei Server Side Includes und PHP gibt es keinen Preview.
Welche CSS-Regeln sind für den HTML-Block definiert?
Welche CSS-Regeln sind für den HTML-Block definiert?
Suchen bzw. Ersetzen zeigt alle Fundstellen an.
Suchen bzw. Ersetzen zeigt alle Fundstellen an.
Schönes kleines Feature: Die Farbe zu einem RGB- oder Hex-Wert anzeigen.
Schönes kleines Feature: Die Farbe zu einem RGB- oder Hex-Wert anzeigen.
Brackets-Plugins
Brackets-Plugins
HTML-Code markieren und in der Live-Vorschau sofort erkennen.
HTML-Code markieren und in der Live-Vorschau sofort erkennen.

Arbeitsablauf mit Brackets

Bei einfachen HTML-Projekten – doch, die gibt es noch – wird der Ordner mit den Projektdateien vom Server auf den lokalen Rechner geladen. Mit Ordner öffnen lädt Brackets alle Dateien des Projekts. Die linke dunkle Leiste ist in zwei Bereiche unterteilt: Oben die aktuell geöffneten Dateien, darunter der Projektordner mit allen Dateien und Unterverzeichnissen. Wie in allen Adobe-Projekten ist die Schrift winzig und das Grau auf Grau erschließt sich nur Adleraugen.

brackets-bilder-einfuegen

Ein Klick auf ein Bild zeigt das Bild im Editorfenster mitsamt Pixel-Abmessungen und Dateigröße.

Einen Schritt weiter als das Gro der Programm-Editoren geht Brackets beim Einsetzen von img-Tags: Sobald das src-Attribut und die Hochkommas gesetzt sind, bietet das Auto-Complete die Dateien des Projekts an. Unterordner erkenne ich am schließenden Schrägstrich, anklicken, dann werden die Dateien des Unterordners angezeigt. Bild aussuchen und schon habe ich die URL zum Bild. Um width und height korrekt zu setzen, reicht ein Klick in die URL. Ein kleines Fenster über der URL zeigt das Bild mitsamt Pixel-Abmessungen.

Cursor über eine Farbnotation – sei es Hex, HSL oder RGB: Dann zeigt Brackets die Farbe in einem kleinen Fensterchen. Für Farbnamen gibt es ein Auto-Complete, nett, auch wenn nicht alle Farbnamen in der Liste stehen.

Splitview im Code-Editor

Das Editorfenster läßt sich teilen, sowohl wagerecht als auch senkrecht. Damit lassen sich nicht nur einfach zwei Dateien miteinander vergleichen, sondern das ist ausgesprochen praktisch, um die CSS-Datei oder eine Javascript-Datei zu bearbeiten, während eine HTML-Datei daneben liegt.

Preferences und Brackets-Projekte

Genauso wie Edge hat Brackets so gut wie keine Icon-Leiste und es gibt keine Preferences im klassischen Sinne. Unter Debug > Einstellungsdatei öffnen liegt die Datei brackets.json mit den persönlichen Vorlieben des Users: Schriftgröße, Schrift, Zeilenumbruch usw.

Für individuelle Projekte legt man eine Datei .brackets.json im Root-Ordner des Projekts an.

Um ein neues Projekt anzulegen, muss ein Ordner angelegt und geöffnet werden. Bis alle Tastaturkürzel in Fleisch und Blut übergegangen sind, ist das Menü oder die rechte Maustaste der Dreh- und Angelpunkt von Brackets.

Suchen und Ersetzen

Es gibt zwar ein Suchen und Ersetzen für das gesamte Projekt, aber die Suche ist auf eine einzige Code-Zeile begrenzt. Das könnte man zwar durch einen regulären Ausdruck erweitern – aber was wäre das für eine Friemelei! Schön allerdings, dass Brackets die Suchergebnisse erst unten im Fenster anzeigt, bevor alle Dateien einer ungewollten Ersetzung zum Opfer fallen.

Arbeiten mit dem Code-Editor

Als Alternative zum Herunter- und Zurückladen des Projektordners kann ich eine Datei aus dem FTP-Programm markieren und direkt in Brackets öffnen, ohne die Datei zuerst auf den lokalen Rechner zu laden. Datei speichern und Brackets überträgt die Änderungen auf den Server. Bei schnellen Eingriffen ist das ein effizienter Ablauf. In den meisten FTP-Programmen kann ich einen Editoren zum Öffnen von Dateien in den Voreinstellungen anlegen.

Zu den Erweiterungen zählt FTP-Sync Plus, das sowohl über FTP also auch über SFP die Dateien vom lokalen Rechner mit den Dateien auf dem Server synchronisiert, wenn auch nur in eine Richtung: Geänderte Projektdateien auf den Server übertragen. Das bindet an einen Arbeitsplatz.

Brackets vs BBEdit / Text Wrangler

BBedit ist ein hervorragender Editor für den Mac, aber kostet rund 50$. Die kostenlose Alternative zu BBedit ist TextWrangler, der in weiten Teilen dieselben Funktionen wie BBedit bietet, aber doch leicht eingegrenzt ist.

  • Text Wrangler kommt von Haus aus mit einem integrierten FTP / SFTP -Browser; für Brackets gibt es diverse FTP / SFTP-Erweiterungen. Beide Programme öffnen von Haus aus Dateien direkt auf dem Server und speichern sie wieder, ohne dass die Dateien herunter- und wieder heraufgeladen werden müssen.
  • Brackets bringt Close Tags und das Markieren von öffnendem und dazugehörigen Tag, TextWrangler braucht dazu Plugins.

  • Beide Programme rücken Text ein, bieten ein Multi-File Suchen und Ersetzen.
  • Die Bildvorschau in Brackets ist ein großes Plus. TextWrangler hat zwar eine Bildvorschau, aber ohne die Angabe von Abmessungen und Dateigröße.

Im Vergleich zu TextWrangler schneidet Brackets sehr gut ab, selbst gegenüber dem kommerziellen Code Editor BBEdit (überraschend gut bei einer eingeschworenen BBEdit-Benutzerin). Was mich überzeugt, sind die Code-Completion und das Einsetzen / Anzeigen von Bildern.

Brackets ist robust und hat eine schnelle Folge von Updates – etwa alle drei bis vier Wochen kommt eine neue Version heraus. Jedes Update muss komplett neu geladen und installiert werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Ein Gedanke zu „Open Source – Code-Editor Brackets“

  1. André – 2. März 2015

    „Nov 2014: Edge Code ist jetzt Brackets! Wir beenden die Weiterentwicklung von Edge Code. Steigen Sie mit uns auf Brackets um, eine schlanke Textverarbeitung mit denselben Funktionen und Leistungsmerkmalen wie Edge Code: //brackets.io“

    [https://creative.adobe.com/products/code]