Anzeige
Inline-Editing und Echtzeitvorschau mit Brackets
Inline-Editing und Echtzeitvorschau mit Brackets (Bild: Adobe)

Adobe Brackets Code-Editor fürs Web mit Live-Vorschau und Quick Edit

Adobe hat mit Brackets einen recht interessanten Code-Editor für Webentwickler als Open Source veröffentlicht. Brackets ist komplett in HTML, CSS und Javascript geschrieben und dadurch mit Webtechnik erweiterbar, bietet von Hause aus aber interessante Funktionen wie eine Live-Vorschau im Browser und Quick Edit.

Anzeige

Mit dem Open-Source-Projekt Brackets will Adobe die Entwicklung einer neuen Generation von Code-Editor anstoßen. Die Idee: Webentwickler sind am besten darin, einen Code-Editor für Webentwickler zu entwickeln. Und so wurde Brackets komplett mit HTML, CSS und Javascript umgesetzt und unter der liberalen MIT-Lizenz auf Github veröffentlicht. Wer Brackets zum ersten Mal öffnet, schaut direkt in dessen Quellcode, und auch Adobe entwickelt den Brackets-Code direkt in Brackets.

Der schlicht gehaltene Editor bietet dabei einige Funktionen, die vor allem für Webentwickler sehr praktisch sind, darunter eine Live-Vorschau und die Möglichkeit, CSS und Javascript direkt im HTML-Code zu bearbeiten.

Da Brackets mit Webtechnik gebaut wurde, läuft der Code-Editor praktisch überall, zunächst aber konzentriert sich Adobe auf eine Desktopanwendung. Zudem ist aber eine Version geplant, die komplett im Browser läuft und Adobe hat auch schon Ideen, wie Tablets mit Brackets zur Entwicklungsumgebung werden könnten.

Nur du und dein Code

Um Brackets vom Start weg attraktiv zu machen, hat sich Adobe zwei grundlegende Funktionen ausgedacht, die Webentwicklern das Leben erheblich vereinfachen sollen. Sie passen sich in die allgemeine Designidee hinter Brackets ein. Demnach soll der Editor auf Schalter und Menüs verzichten und sich auf die Darstellung des Codes beschränken.

Quick Edit

Webprojekte bestehen meist aus mehreren Dateien, die aber miteinander verknüpft sind. Statt nun für jede Datei ein Tab anzuzeigen, so dass zwischen diesen hin- und hergesprungen werden muss, bietet Brackets eine Funktion namens Quick Edit, die mit der Tastenkombination Strg + e beziehungsweise Cmd + e aufgerufen wird. Brackets blendet dann beispielsweise direkt unter dem gerade angewählten Element den dafür relevanten CSS-Code aus einer anderen Datei ein. Brackets wählt dabei automatisch nur die CSS-Klassen aus, die auf dieses Element im Browser angewendet werden und so direkt verändert werden können, ohne dass dazu der HTML-Code verlassen und zur CSS-Datei gewechselt werden muss.

Das funktioniert ebenso mit Javascript: Wird eine Javascript-Funktion angewählt und Quick Edit geöffnet, so öffnet Brackets einen Inline-Editor, mit dem der Code der Javascript-Funktion eingesehen und verändert werden kann. Beides funktioniert bereits in der als Sprint 10 bezeichneten Version von Brackets, die auf Github für Windows und Max OS X heruntergeladen werden kann.

  • Quick Edit in Brackets
Quick Edit in Brackets

In Zukunft sollen über den Inline-Editor hinaus weitere Werkzeuge per Quick-Edit eingebunden werden. Konkret geht es um visuelle Werkzeuge beispielsweise zur Farbwahl oder Entwurf eines Farbverlaufs. Zudem könnte auf diesem Weg direkt die zugehörige Dokumentation angezeigt werden. Adobe hofft dabei, dass unabhängige Entwickler weitere Inline-Werkzeuge zur Verfügung stellen und verweist auf den bestehenden Code zur Orientierung.

Echtzeitvorschau im Browser

Eine weitere Kernidee, die Adobes Entwickler mit Brackets realisiert haben, ist eine Live-Vorschau im Browser: Statt Code zu ändern, vom Editor in den Browser zu wechseln und dort die Seite neu zu laden, sorgt Brackets dafür, dass Änderungen automatisch und direkt im Browser erscheinen.

Dazu kann Brackets eine Live-Verbindung zum lokal installierten Browser herstellen und bei aktivierter "Live File Preview" Änderungen am CSS-Code in Echtzeit noch beim Tippen im Browser anzeigen, ohne dass zwischendurch gespeichert werden muss.

Derzeit funktioniert die Live-Vorschau nur in Google Chrome, Adobe hofft aber auf Unterstützung anderer Browserhersteller, um sie auch dort möglich zu machen. Das Live-Editieren von HTML und Javascript ist bisher aber nur in Form eines Prototyps umgesetzt worden und funktioniert in der aktuellen Version noch nicht.

Javacript-Code wird im Übrigen automatisch mit JSLint geprüft und dessen Hinweise unter dem Code angezeigt.

Adobe bittet um Mithilfe

Es gibt noch viel zu tun und dabei hofft Adobe nun auf Mithilfe von außen. Dazu hat Adobe Brackets bereits in einer frühen Version als Open Source veröffentlicht. Das Github-Repository wurde bereits seit 1. Mai 2012 geöffnet und seit diesem Zeitpunkt akzeptiert Adobe auch Pull-Request. In der Issue-Liste auf Github wurden zudem einige Einträge als "Starter Bug" markiert. Die Adobe-Entwickler halten diese für gute Einstiegspunkte in den Brackets-Code.

Zudem wurde auf Trello das komplette Backlog mit allen Ideen veröffentlicht, die Adobe für Brackets bisher gesammelt hat. Für Einsteiger geeignete Aufgaben sind hier als "Starter Feature" markiert.

Erweiterbar

Nicht alle Ideen für Brackets müssen direkt in den Editor integriert werden. Ein Erweiterungs-API bietet die Möglichkeit, den Editor um zusätzliche Funktionen zu ergänzen, die unabhängig von Brackets entwickelt werden können. So entstanden bereits Erweiterungen, die unter anderem die Dokumentation aus dem Mozilla Developer Network sowie JSHint und CSSLint integrieren.

Brackets steht in der Version "Sprint 10" unter github.com/adobe/brackets/downloads zum Download bereit.


eye home zur Startseite
moriaana 28. Sep 2012

http://ace.ajax.org/ Braucht übrigens JavaScript ;-)

chromax 28. Sep 2012

;-) Dir ist schon klar das dein Quellcode sowieso im Web landet am Ende und ihn jeder...

wolfi86 27. Jun 2012

Light table wurde erst kürzlich über Kickstarter finanziert. Diese IDE verfolgt ähnliche...

attitudinized 27. Jun 2012

Wozu? Das css für schriften und Farben wirst du doch auch so verändern können?

posixpascal 27. Jun 2012

Ich habe mir Brackets nun ein Wenig angesehen, leider ist es nicht mehr als ein...

Kommentieren



Anzeige

  1. Professional IT Consultant Automotive Marketing und Sales (m/w)
    T-Systems International GmbH, Leinfelden-Echterdingen
  2. Technischer Redakteur (m/w)
    über Hanseatisches Personalkontor Stuttgart, Crailsheim
  3. Mitarbeiter/in im Bereich IT Helpdesk für den 1st-Level-Support
    Bosch Communication Center Magdeburg GmbH, Berlin
  4. IT-Service Designer/in
    Landesbetrieb IT.Niedersachsen, Hannover

Detailsuche



Anzeige
Blu-ray-Angebote
  1. VORBESTELLBAR: X-Men Apocalypse [Blu-ray]
    19,99€ (Vorbesteller-Preisgarantie)
  2. TIPP: Der Hobbit: Die Schlacht der fünf Heere [3D Blu-ray]
    9,99€
  3. VORBESTELLBAR: Warcraft: The Beginning (+ Blu-ray)
    32,99€

Weitere Angebote


Folgen Sie uns
       


  1. Bezahlsystem

    Apple will Pay zügig in Europa ausweiten

  2. Überwachung

    Aufregung um Intermediate-Zertifikat für Bluecoat

  3. Virtual Reality

    Googles Daydream benötigt neues Smartphone

  4. Cortex-A73 Artemis

    ARMs neuer High-End-CPU-Kern für 2017

  5. Tony Fadell

    iPod-Erfinder baut Elektro-Gokarts für Kinder

  6. Riesiges Produktionsgebäude

    Ende Juli wird die Tesla Gigafactory eröffnet

  7. Maas kontra Dobrindt

    Bundesjustizminister verweigert autonomen Autos Sonderrechte

  8. Section Control

    Bremsen vor Blitzern soll nicht mehr vor Bußgeld schützen

  9. Beam

    ISS-Modul erfolgreich aufgeblasen

  10. Arbeitsbedingungen

    Apple-Store-Mitarbeiterin gewährt Blick hinter die Kulissen



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Formel E: Monaco-Feeling beim E-Prix in Berlin-Mitte
Formel E
Monaco-Feeling beim E-Prix in Berlin-Mitte
  1. Hewlett Packard Enterprise "IT wird beim Autorennen immer wichtiger"
  2. Roborace Roboterrennwagen fahren mit Nvidia-Computer
  3. Elektromobilität BMW und Nissan wollen in die Formel E

Moto G4 Plus im Hands on: Lenovos sonderbare Entscheidung
Moto G4 Plus im Hands on
Lenovos sonderbare Entscheidung
  1. Lenovo Moto G4 kann doch mit mehr Speicher bestellt werden
  2. Android-Smartphone Lenovos neues Moto G gibt es gleich zweimal
  3. Motorola Aktionspreise für aktuelle Moto-Smartphones

Business-Notebooks im Überblick: Voll ausgestattet, dockingtauglich und trotzdem klein
Business-Notebooks im Überblick
Voll ausgestattet, dockingtauglich und trotzdem klein
  1. Elitebook 1030 G1 HPs Core-M-Notebook soll 13 Stunden durchhalten
  2. Windows 7 und 8.1 Microsoft verlängert den Skylake-Support
  3. Intel Authenticate Fingerabdruck und Bluetooth-Smartphone entsperren PC

  1. Re: Die Automobilindustrie am laufen halten...

    Muhaha | 10:40

  2. Re: Logikfehler?

    Eheran | 10:40

  3. Re: Warum Haftung ändern, wer soll denn haften...

    chefin | 10:39

  4. Re: lowcarb funktioniert auch .. (ganz ohne Sport)

    opodeldox | 10:38

  5. Re: Find ich gut...

    JanZmus | 10:38


  1. 10:31

  2. 10:27

  3. 08:45

  4. 08:15

  5. 07:44

  6. 07:24

  7. 07:10

  8. 12:45


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel