Dr. Web testet: Atom, der HTML-Editor „für das 21. Jahrhundert“

Atom ist ein relativ neuer, plattformübergreifender Open-Source HTML-Editor. Nach eigener Aussage ist Atom der „hackbare Text-Editor für das 21. Jahrhundert“. Wieviel an dieser Aussage dran ist, werden wir in diesem Beitrag näher beleuchten. Auf den ersten Blick hat Atom sehr viel gemeinsam mit Sublime Text 2. Jedoch wird auch explizit damit geworben, dass alles an Atom anpassbar ist. Ob dieser Editor tatsächlich so besonders ist, und, wen ja, was ihn so besonders macht und von anderen Editoren unterscheidet, wird dieser Artikel aufzeigen. Ist Atom tatsächlich der Editor für das 21. Jahrhundert?

Atom - der hackbare HTML-Editor für das 21. Jahrhundert

Die Installation von Atom

Der HTML-Editor ist für alle Plattformen konzipiert, es gibt ihn für Windows, Mac OS X und auch für Linux. Für alle anderen Plattformen außer Mac muss zum Download die Projektseite auf GitHub besucht werden. Scrollen Sie auf der GitHub-Seite bitte herunter bis „Installing“, dort finden Sie die Versionen für Windows und Linux.

Nach der Installation zeigt der Editor eine Willkommens-Seite mit den wichtigsten Ressourcen und Tastaturkombinationen an.

atom-nach-installation

Es empfiehlt sich nach der Installation gleich die Einstellungen zu besuchen unter „Atom => Preferences“, um wichtige Dinge wie Schriftgröße und Schriftart anzupassen. Auch kann man das Theme hier ändern, denn nicht jeder Entwickler mag dunkle Themes. Vorinstalliert sind 6 Themes. Die Community bietet noch bedeutend mehr. Zu beachten ist, dass es Themes für das Design des Editors gibt und andere Themes für die Syntax. Die Variation für den Editor inkludiert daher nicht die Syntax, nach einem passenden Syntax-Theme muss demzufolge gesondert gesucht werden.

Ein wichtiger Schritt ist gewiss auch die Kontrolle der bereits vorinstallierten Packages aka Plugins, um zu schauen, welche Packages eventuell noch zusätzlich installiert werden müssten. Hier existieren bereits eine ganze Menge Packages. Mit der Suchfunktion des Editors findet man etliche mehr als auf der Atom-Website. Es sollte daher kein Problem sein, den Editor an die eigenen Bedürfnisse anzupassen.

die-einstellungen-von-atom

Installation von Packages und Themes

Das Installieren von Packages geht denkbar einfach über den Menüpunkt „+ Install“. Hier muss im Gegensatz zu Sublime Text 2 nicht erst ein Plugin installiert werden, um neue Packages installieren zu können. Das empfinde ich als benutzerfreundlicher, denn so spart man wertvolle Zeit.

install-packages

Auch Themes können auf die gleiche Art und Weise installiert werden. Um ein Theme oder Package zu installieren, gibt man einfach – wenn bekannt – den Namen des Themes oder des Packages ein und drückt „Enter“. Jedoch kann man auch nur „Themes“ oder andere allgemein gehaltene Schlüsselwörter eingeben und kommt trotzdem zum Ziel.

package-installation

Allerdings bekam ich (unter Mac OS X) nach der versuchten Installation des Packages „Emmet (vormals Zen-Coding)“, eine Fehlermeldung, dass die „Command Line Developer Tools“ von Apple fehlen würden und Emmet daher nicht installiert werden könne.

Fehlerausgabe bei der Installation

Nachdem Apples „Command Line Developer Tools“ installiert wurden, ist die Installation von Packages und Themes kein Problem mehr und funktioniert reibungslos und zügig.

erfolgreiche-package-installation

Empfehlenswerte Packages für den Anfang

Die Anpassung von Atom mittels CSS

Über das Stylesheet kann die Ansicht des Atom-Editors leicht beeinflusst werden. Mir gefiel die farbliche Ausgabe und Kennzeichnung des „Bracket Matchers“ nicht, dieser nutzte nur eine 1 Pixel gedottete Linie zur Kenntlichmachung der zusammengehörigen Klammern und Divs, was für meine Augen relativ schlecht zu erkennen war. Daher fügte ich dem Stylesheet noch einige Notierungen hinzu. Das User-Stylesheet erreichen Sie übrigens unter „Atom => Open your Stylesheet“.

Einige Zeilen CSS sorgen für eine bessere Markierung des Bracket Matchers

Diese wenigen Zeilen CSS bewirken eine wesentlich deutlichere Markierung des Bracket Matchers.

Der mit dem neuen CSS beeinflusste Bracket Matcher

Da auch der Quellcode von Atom über die GitHub-Seite des Projekts zugänglich ist, dürfte für versierte Programmierer grundsätzlich alles anpassbar sein. Weniger versierte Menschen können jedoch durch Packages, Themes und eventuell durch die CSS-Anpassung den Editor ebenfalls nach Ihren Bedürfnissen gestalten.

Die Besonderheiten des Atom HTML-Editors

Node.js Unterstützung

Die Node.js Unterstützung macht es einfach, auf das Dateisystem und auf Spawn-Subprozesse zuzugreifen, selbst das Starten eines Servers aus dem Editor heraus ist kein Problem. Wenn Sie eine Bibliothek benötigen, können Sie aus den über 50.000 in Nodes Package Repository auswählen. Die nahtlose Integration ermöglicht Ihnen eine freie Mischung aus Node- und Browser-APIs. Das und vieles mehr erlaubt Ihnen die Integration von Node.js.

node-js-integration

Modulares Design

Atom ist aus über 50 Open-Source-Paketen zusammengesetzt, die sich um einen minimalen Kerncode legen. Das Ziel der Entwickler ist ein umfassend anpassbares System und soll die Unterscheidung zwischen Benutzer und Entwickler verwischen. Sollten Sie einen Teilbereich von Atom nicht mögen oder erweitert sehen wollen, so erstellen Sie (theoretisch) Ihr eigenes Package. Durch das Hochladen in das Package-Verzeichnis können Sie es für jedermann zugänglich machen.

das-modulare-atom-design

Die Grundfunktionen des Atom-Editors

Out-of-theBox bietet Atom bereits etliche, nützliche Features an. Zum Beispiel:

  • einen Dateisystem-Browser
  • einen Fuzzy-Finder für schnelles Öffnen von Dateien
  • schnelles, projektweites „Suchen und Ersetzen“
  • Multiple Cursors und Selektionen
  • Multiple Fenster („Panes“)
  • Snippet Unterstützung
  • Code Folding (das Falten von Code-Bereichen)
  • eine klare und übersichtliche Oberfläche für die Einstellungen
  • Importfunktion für TextMate (Grammatik und Themes)
  • Unterstützung für das Arbeiten mit Projekten
  • gutes Syntax-Highlightning
  • klares, übersichtliches Design
  • einen Entwicklermodus
  • Shell-Kommandos
  • eine Kommando-Palette

Einige zusätzliche Screenshots

Die Entwickleransicht von Atom

atom-entwickler-ansicht

Die Code-Vervollständigung

code-vervollstaendigung

Die Projekt-Einstellungen (Sidebar links – Rechtsklick auf eine Datei)

die-projekt-moeglichkeiten-von-atom

Fazit

Der Atom HTML-Editor gefällt mir richtig gut, denn er bietet nicht nur bereits nach der Installation etliche nützliche Details. Durch die wirklich einfache Installation von Erweiterungen und Themes kann der Editor unkompliziert auf eigene Bedürfnisse angepasst und erweitert werden – ohne das Vorkenntnisse im Umgang mit Git nötig wären. Inwieweit sich der Editor für die Arbeit mit wirklich großen Projekten eignet, müsste noch überprüft werden. Für „normale“ Projekte jedoch ist er hervorragend geeignet.

Links zum Beitrag

Empfehlenswerte Packages

(dpe)

ist freier Journalist, WordPress-Entwickler und Spezialist für WordPress-Sicherheit. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog TechBrain.de schreibt er über das Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
andi
Gast

erinnert stark an sublime. gucke ich mir mal an…

Nils
Gast

Danke für den Artikel über den Editor, der inzwischen mein Standard geworden ist.

Ein Hinweis vielleicht noch: Die Fehlermeldung, die bei der Emmet-Installation auftaucht hat damit zu tun, dass Apple in einer der vorherigen OSX-Versionen (prä-Mavericks/Yosemite) das Versionierungstool git aus dem Standard-Lieferumfang vom Betriebssystem entfernt hat und die Nutzer es ggf. durch die Installation der Command Line Developer Tools nachträglich hinzufügen können.

ati
Gast

Habe es installiert und getestet. Nett, hat Potential. Den aktuellen Stand würde ich persönlich gegen Komodo Edit nicht eintauschen.

Tobias Breyer
Gast

Danke für den Bericht und die Übersicht. Da werde ich am Wochenende gleich mal austesten ob das was für mich ist. BG Tobias

Christian Galster
Gast

Ist wie Sublime Text, nur für Lau. Find ich Super.

Dominik
Gast

Sieht auf jeden Fall ziemlich gut aus, allerdings habe ich meinen absoluten Lieblingseditor schon gefunden:
Brackets! Die Live-Vorschau ist einfach wundervoll und auch auf dem Mac läuft Brackets flüssig und top. Habe bis dahin immer TextWrangerl benutzt, das ist aber für manche Zwecke einfach nicht passend.

LG

trackback

[…] großer Bruder Visual Studio, sondern als “leichte” Variante im Stil von Sublime Text oder Atom. Schon in der Vergangenheit hatte Microsoft solche kleinen Lösungen im Angebot, aber stets […]

trackback

[…] genau will ich? Reicht mir eine statische HTML-Webseite, oder brauche ich ein Content Management System? (Ein CMS erhöht die […]

trackback

[…] die Datei nun mit einem Texteditor oder einer Entwicklungsumgebung wie zum Beispiel Atom, Brackets oder ähnlichen. Kopiere folgendes […]

wpDiscuz