Open Source – Code-Editor Brackets

Brackets war der Bruder und Nachfolger von Adobe Edge Code. Edge Code war die kommerzielle Version, Brackets ist ein Open Source-Code-Editor, aber mit demselben Funktionsumfang und »läuft auf ’nem Bierdeckel“ (Windows, Mac und Unix).

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.

Adobe hat den Support für Brackets bereits im September 2021 eingestellt, aber das Projekt wird auf Github weitergeführt. Auch wenn das Brackets-Team Microsoft Visual Studio Code als Nachfolger empfiehlt: Die Live-Vorschau von Brackets ist nicht so leicht zu übertreffen. Wer sich allerdings auf Javascript und Node.js konzentriert, wird eher zu Visual Studio Code tendieren.

Adobe hat Brackets also eingestellt – was nun? Kann man den Editor weiter benutzen? Ja, denn das Projekt wird auf Github weitergeführt. Weil Brackets mit HTML, Javascript und CSS programmiert ist, würde es noch lange funktionieren, denn HTML, Javascript und CSS sind backwards compatible – so wie alte Webseiten.

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.

1 / 3

Welche CSS-Regeln sind für den HTML-Block definiert?

2 / 3

Suchen bzw. Ersetzen zeigt alle Fundstellen an.

3 / 3

Schönes kleines Feature: Die Farbe zu einem RGB- oder Hex-Wert anzeigen.

2 / 3

Brackets-Plugins

3 / 3

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.

Einen Schritt weiter als das Gro der freien 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.
Mit dem Cursor über eine Farbnotation hovern – 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.

Arbeiten ohne Rauf- und Runterladen

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 Editor 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.

Splitview im Code-Editor

Das Editorfenster läßt sich teilen, sowohl wagerecht als auch senkrecht. Damit lassen sich nicht nur einfach Dateien miteinander vergleichen, sondern das ist ausgesprochen praktisch, um die CSS-Datei oder eine Javascript-Datei zu bearbeiten, während die 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.

{
   "fonts.fontSize": "12px",
   "fonts.fontFamily": "'SourceCodePro-Medium', 'MS Gothic', monospace",
   "brackets-eslint.gutterMarks": true,
   "brackets-eslint.useLocalESLint": false,
   "brackets.linkfile.droparea": true
}

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 mit Brackets

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.

Plugins für Brackets: EMMET

Sublime Text ist ein beliebter hochgerüsteter Text-Editor, der mit dem Emmet-Plugin für außerordentlich effizientes Coding sorgt. Das Emmet-Plugin gibt es auch für Brackets. Damit bekommt Bracket z.B. ein Wrapping – mehrere Code-Zeilen markieren und ein div-Tag rundherum legen – und Shortkeys wie BBEdit.

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 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, intuitiv und bietet eine steile Lernkurve.