Ich bin seit langer Zeit grosser Fan des Editors Sublime Text. Doch vor einiger Zeit habe ich mich etwas intensiver mit Brackets beschäftigt und habe damit meinen neuen Lieblingseditor gefunden. Zumindest was WEB Projekte mit HTML, CSS und Java Script betrifft, hat Brackets so einige Features, die man bei anderen Editoren vergeblich sucht.

Ich möchte euch in diesen Artikel diesen Editor und seine Features vorstellen – vielleicht bekommt auch ihr Lust euch dieses Produkt näher anzusehen. Die gute Nachricht gleich zu Beginn – Brackets ist völlig kostenlos.

Wenn du Web- Developer oder Designer bist, dann solltest auch du einen Blick auf diesen Editor werfen.

Wenn ihr euch nach diesem Artikel noch näher mit diesem Editor beschäftigen wollt, dann habe ich für euch einen Online Kurs vorbereitet, den ich im Sommer online stellen werde. Wenn du dich zu meinem Kurs Newsletter anmeldest, dann werde ich dich rechtzeitig informieren, wenn der Kurs online ist. Als besonderen Bonus können die ersten 50 Abonnenten zu diesem Newsletter den Kurs völlig kostenlos genießen.

So nun genug der Vorworte – los gehts mit Brackets.

Was ist Brackets

Das Projekt wurde im Jahr 2012 von Adobe als Open Source Projekt gestartet und wurde von Adobe selbst eine Zeit lang als „Edge Code“ angeboten, welches spezielle Anbindungen an Adobe Produkte beinhalten sollte. Allerdings wurde dieses Projekt vor einiger Zeit fallen gelassen und die speziellen Funktionen (wie etwa Photoshop Extract und Edge Inspect) als Erweiterung in Brackets eingebunden, die weiterhin von Adobe betreut werden.

Der Editor selbst ist mittels Web Technologie, sprich HTML, CSS und JavaScript geschrieben, wodurch es möglich ist mit Kenntnis dieser Technologien Brackets selbst zu erweitern oder anzupassen.

Brackets kann man auf der Projektseite http://brackets.io/ herunterladen:

Features von Brackets

Was macht aber Brackets so besonders für mich? Es sind einfach Features, die ideal für die Arbeit als Web Developer / Web Designer sind. Ich möchte euch im folgenden die für mich wichtigsten vorstellen um euch einen Überblick zu verschaffen, was Brackets so alles kann.

Gleich mal zu Beginn – Brackets bietet die üblichen Funktionen die zum Bearbeiten von Inhalten notwendig sind. Wenn man mit Dateien arbeiten möchte, dann hat man auf der linken Seite eine Spalte, in der alle geöffneten Dateien sichtbar sind. Man kann hier auch einen kompletten Projekt Ordner öffnen, sich die Datei ansehen, die man bearbeiten möchte und diese dann mit einem Doppelklick öffnen. Diese erscheint dann im oberen Bereich der linken Spalte als geöffnete Datei. Wenn diese Spalte stört, dann kann diese auch verkleinert oder unsichtbar gemacht werden.

Zum Editieren im Code bietet Brackets die Funktionen, die man von einem modernen Code Editor erwartet. Somit ist zum Beispiel das Löschen oder Duplizieren von Zeilen mit einem Shortcut möglich. Lediglich manche Funktionen bereiten Usern mit nicht englischem Keyboard Probleme. So hatte ich keine Möglichkeit mit meinem MAC und deutscher Tastatur Codezeilen ein oder auszurücken, den CMD [ bzw. CMD ] kann man hier nicht so einfach eingeben.
ALT CMD 5 oder ALT CMD 6 sind nämlich mit anderen Funktionen belegt. Allerdings stellt das (wenn man weiss wie) auch kein grosses Problem dar, denn das Key Mapping lässt sich in der Datei keymap.json selbst leicht anpassen und so kann ich jetzt mit CMD 5 und CMD 6 die Funktionen ausführen.

Einige nette Features, die nicht jeder Editor selbstverständlich beinhaltet, aber zum Beispiel Sublime User zu schätzen wissen, sind die Multicursor oder die Block/Column Select Funktionen.

Wird Brackets neu installiert, dann bekommt man das Code Fenster mit weissem Hintergrund angezeigt (siehe Bild oben). Wem das aber nicht gefällt, der kann sich leicht neue Themes hinzufügen. So habe ich mein Brackets auf dunklen Hintergrund (JetBrains Dracula) umgestellt.

Hat man eine Datei einmal gespeichert und Brackets kennt die Datei Endung wird der Code natürlich mit passendem Code Highlighting dargestellt. Dabei beschränkt sich der Editor nicht nur auf Sprachen wie HTML, CSS und JavaScript – er kennt eine Vielzahl verschiedener Sprachen. Die Farben lassen sich natürlich auch mittels der Themes anpassen.

Die Code Fenster lassen sich übrigens horizontal oder vertikal teilen, um 2 Dateien gleichzeitig sichtbar geöffnet zu haben.

Soweit einmal zu den Standard Funktionen, die man eigentlich von einem guten Code Editor heute als Selbstverständlichkeit erwartet. Was aber macht jetzt Brackets so besonders?

Live Vorschau

Gerade wenn man in Webseiten HTML und CSS Code editiert, ist es manchmal mühsam, wenn man nach jeder kleinen Änderung speichern und ein Reload beim Browser machen muss, um diese zu sehen. Mit der Live Vorschau kann man in Brackets den Code einer Seite ändern und sieht diese Änderungen in Echtzeit im Browser. Dabei ist es egal, ob der veränderte Bereich HTML oder CSS Code ist.

Selektiert man in einer HTML oder CSS Datei einen Code Teil, dann wird dieser im Browser sogar hervorgehoben dargestellt.

Um diese Funktionen umzusetzen, verwendet Brackets einen eingebauten Node.js Server.

Quick Edit – CSS Regeln im HTML Dokument bearbeiten

Diese Funktion ist für Web Developer besonders hilfreich. Normalerweise lagert man HTML Code in eigenen Dateien aus und verwendet dann im HTML Code die entsprechenden Klassen oder IDs. Möchte man die CSS Regeln ändern muss man immer in die CSS Datei wechseln, die entsprechenden Zeilen suchen und dann dort ändern.

Bei Brackets ist das wesentlich einfacher. Hier muss man nur den Cursor an die entsprechende Stelle, also zum Beispiel zu einem Buchstaben der Klasse oder der ID stellen und dann CMD–E oder CTRL–E drücken und schon kann man die entsprechende CSS Regel bearbeiten. Der folgende Screenshot verdeutlich, wie dies aussieht.

Gibt es mehr als eine Regel, dann wird rechts eine Liste der Regeln dargestellt und man kann im CSS Code an die entsprechende Stelle springen. Das ganze funktioniert natürlich auch, wenn die Regeln in unterschiedlichen Dateien stehen.

Besonders einfach ist es eine neue Regel hinzuzufügen. Es wird auch wie vorhin schon der Cursor an die entsprechende Stelle gestellt und die Quick Edit Funktion mit CTRL–E oder CMD–E aufgerufen. Wird keine Regel gefunden, dann wird die Möglichkeit angeboten mit „Neue Regel“ eine hinzuzufügen. Dabei wird eine Auswahl an vorhandenen CSS Dateien dargestellt, die nur mehr selektiert werden muss und schon kann man in dieser Datei die gewünschten Zeilen einfügen. Die Auswahl „Neue Regel“ gibt es übrigens auch, wenn schon eine vorhanden ist – siehe Screenshot oben.

Quick Edit im CSS – Eigenschaften komfortabel anpassen

Editiert man direkt eine CSS Datei, so hat diese Quick Edit Funktion noch andere Features. Wendet man diese Funktion innerhalb eines Farbcodes an, dann wird eine Auswahlmöglichkeit für Farben geöffnet.

Besonders praktisch finde ich die Liste der im CSS bereits verwendeten Farben, die im Bild auf der rechten Seite zu sehen ist.

Aber nicht nur mit Farben kann die Quick Edit Funktion umgehen, es lassen sich auch leicht transition Parameter wie cubic-bezier oder steps bearbeiten.

Schnell Dokumentation

Weiss man einmal nicht genau, wie eine CSS Regel zu schreiben ist, so kann einem die Quick Dokumentation sehr hilfreich sein. Einfach an der entsprechenden Stelle CTRL–K oder CMD–K eingeben und schon erscheint ein Hilfetext, der einem wertvolle Hinweise gibt. Damit erspart man sich das oft mühsame suchen in externen Dokumentationen.

Image View

Normalerweise ist man es gewohnt mit einem Code Editor nur Text Dateien ansehen zu können. Brackets kann allerdings auch mit Bildern umgehen. Selektiert man ein Bild, so wird dieses im Code Fenster dargestellt. Eine kleine aber sehr hilfreiche Funktion um bei der Auswahl von Bildern nicht die Umgebung wechseln zu müssen.

JS Lint

Die integrierte JSLint Funktion führt eine Überprüfung des Java Script Codes durch und weisst auf eventuelle Fehler mit einem kleinen Icon rechts unten hin. Bei Bedarf kann man sich genauere Infos zu den Fehlern anzeigen lassen. Mittels Erweiterungen gibt es die selbe Funktion auch für HTML und CSS.

Erweiterungen

Keine Besonderheit in Brackets, aber sicher eines der wertvollsten Features ist die Möglichkeit Erweiterungen zu verwenden. Diese machen aus der recht guten Grundausstattung einen Editor, der damit fast alle persönlichen Wünsche erfüllen kann. Einige dieser Erweiterungen möchte ich euch in diesem Artikel noch vorstellen. Brackets bietet eine recht komfortable Erweiterungsverwaltung an, die einem auch darauf hinweist, wenn es eine neue Version einer Erweiterung gibt. Diese lässt sich dann einfach durch einen Klick updaten.

Emmet

In meinem letzten Artikel habe ich euch Emmet vorgestellt. Damit ist es möglich schneller HTML und CSS Code zu schreiben. Dieses Feature gibt es natürlich auch für Brackets.

https://github.com/sergeche

GIT

Code Verwaltungssysteme sind für die Entwicklung ein wichtiger Bestandteil. Das GIT Plugin bietet umfangreiche Möglichkeiten mit einem GIT Repository umzugehen.

https://github.com/zaggino/brackets-git

Minimap

Als Sublime Text User gewöhnt man sich schnell an die verkleinerte Code Anzeige auf der Seite und rasch im Code an die gewünschte Stelle scrollen zu können. Möchte man diese Funktion auch in Brackets, so findet man die gewünschte Funktion in der Minimal Erweiterung.

https://github.com/zorgzerg

HTML / CSS Lint

Wie schon weiter oben im Artikel erwähnt, bietet Brackets eine eingebaute JS Lint Funktion zum Code Check an. Wer diese Funktion auch für HTML (https://github.com/messman) und CSS (https://github.com/cfjedimaster) Code nutzen möchte, sollte sich die beiden Erweiterungen installieren.

Photoshop Connection (Extract)

Beim Download von Brackets werden 2 verschiedene Versionen angeboten. Eine Version mit Adobe Extract und eine ohne. Diese Erweiterung setzt ein Adobe Abo voraus, bietet aber dann die Möglichkeit ein Photoshop Document in Brackets anzeigen zu lassen und notwendige CSS Regeln direkt in Brackets kopieren zu können.

Edge Inspect

Edge Inspect ist ebenfalls eine Erweiterung von Adobe und bietet die Möglichkeit komfortabel Inhalte auf verschiedenen Browsern oder Geräten gleichzeitig zu anzeigen zu lassen und zu testen.

Diese Übersicht der Erweiterungen stellt nur eine ganz kleine Auswahl der praktischen Funktionen vor, um die Brackets erweitert werden kann. Damit lässt sich die Arbeitsumgebung genauso gut anpassen, wie man es auch von Sublime Text gewohnt war.

Nachdem Erweiterungen durch Nutzung von HTML, CSS und JavaScript relativ einfach zu schreiben sind ist sicher eine reges Wachstum zu erwarten.

Hat Brackets auch Nachteile?

Diese Frage stellt sich bei jedem Produkt, aber wie sieht es mit Brackets aus.
Auf den ersten Blick und während meinen ersten Wochen mit Brackets konnte ich nicht viel feststellen. An manchen Stellen merkt man, dass dieses Produkt noch nicht ganz ausgereift ist und so den einen oder anderen kleinen Fehler hat oder Wunsch offen lässt. Aber es gibt eine recht aktive Community und so denke ich, wird es nur eine Frage der Zeit sein, bis dieses Problem behoben ist.

An manchen Stellen wird berichtet, das Brackets, vor allem bei grossen Dateien langsam ist. Ich selbst konnte dieses Verhalten bis jetzt noch nicht nachvollziehen und bin mit der Performance durchaus zufrieden.

Zusammenfassung

In diesem Artikel habe ich euch die für mich wichtigsten Highlights von Brackets zusammengestellt, die den Editor zum Teil wesentlich von seinen Mitbewerbern unterscheiden. Natürlich kann Brackets noch viel mehr.

Ich bin der Meinung, es lohnt sich auf jeden Fall sich einmal etwas näher mit diesem Editor auseinander zusetzen und ihn auszuprobieren.

Was Brackets genau kann und wie man mit Brackets umgeht, das verrate ich euch in meinem Online Kurs, der im Sommer diesen Jahres startet. Wenn Ihr euch jetzt zu meinem Kurs Newsletter anmeldet, dann werdet rechtzeitig informiert, wenn der Kurs startet. Als besonderen Bonus können die ersten 50 Abonnenten zu diesem Newsletter den Kurs völlig kostenlos genießen.