Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
  • Apps
Andreas Hecht 23. Januar 2015

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

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

Atom ist ein rela­tiv neu­er, platt­form­über­grei­fen­der Open-Source HTML-Editor. Nach eige­ner Aussage ist Atom der “hack­ba­re Text-Editor für das 21. Jahrhundert”. Wieviel an die­ser Aussage dran ist, wer­den wir in die­sem Beitrag näher beleuch­ten. Auf den ers­ten Blick hat Atom sehr viel gemein­sam mit Sublime Text 2. Jedoch wird auch expli­zit damit gewor­ben, dass alles an Atom anpass­bar ist. Ob die­ser Editor tat­säch­lich so beson­ders ist, und, wen ja, was ihn so beson­ders macht und von ande­ren Editoren unter­schei­det, wird die­ser Artikel auf­zei­gen. Ist Atom tat­säch­lich 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 kon­zi­piert, es gibt ihn für Windows, Mac OS X und auch für Linux. Für alle ande­ren Plattformen außer Mac muss zum Download die Projektseite auf GitHub besucht wer­den. Scrollen Sie auf der GitHub-Seite bit­te her­un­ter bis “Installing”, dort fin­den Sie die Versionen für Windows und Linux.

Nach der Installation zeigt der Editor eine Willkommens-Seite mit den wich­tigs­ten Ressourcen und Tastaturkombinationen an.

atom-nach-installation

Es emp­fiehlt sich nach der Installation gleich die Einstellungen zu besu­chen unter “Atom => Preferences”, um wich­ti­ge Dinge wie Schriftgröße und Schriftart anzu­pas­sen. Auch kann man das Theme hier ändern, denn nicht jeder Entwickler mag dunk­le Themes. Vorinstalliert sind 6 Themes. Die Community bie­tet noch bedeu­tend mehr. Zu beach­ten ist, dass es Themes für das Design des Editors gibt und ande­re Themes für die Syntax. Die Variation für den Editor inklu­diert daher nicht die Syntax, nach einem pas­sen­den Syntax-Theme muss dem­zu­fol­ge geson­dert gesucht wer­den.

Ein wich­ti­ger Schritt ist gewiss auch die Kontrolle der bereits vor­in­stal­lier­ten Packages aka Plugins, um zu schau­en, wel­che Packages even­tu­ell noch zusätz­lich instal­liert wer­den müss­ten. Hier exis­tie­ren bereits eine gan­ze Menge Packages. Mit der Suchfunktion des Editors fin­det man etli­che mehr als auf der Atom-Website. Es soll­te daher kein Problem sein, den Editor an die eige­nen Bedürfnisse anzu­pas­sen.

die-einstellungen-von-atom

Installation von Packages und Themes

Das Installieren von Packages geht denk­bar ein­fach über den Menüpunkt “+ Install”. Hier muss im Gegensatz zu Sublime Text 2 nicht erst ein Plugin instal­liert wer­den, um neue Packages instal­lie­ren zu kön­nen. Das emp­fin­de ich als benut­zer­freund­li­cher, denn so spart man wert­vol­le Zeit.

install-packages

Auch Themes kön­nen auf die glei­che Art und Weise instal­liert wer­den. Um ein Theme oder Package zu instal­lie­ren, gibt man ein­fach – wenn bekannt – den Namen des Themes oder des Packages ein und drückt “Enter”. Jedoch kann man auch nur “Themes” oder ande­re all­ge­mein gehal­te­ne Schlüsselwörter ein­ge­ben und kommt trotz­dem zum Ziel.

package-installation

Allerdings bekam ich (unter Mac OS X) nach der ver­such­ten Installation des Packages “Emmet (vor­mals Zen-Coding)”, eine Fehlermeldung, dass die “Command Line Developer Tools” von Apple feh­len wür­den und Emmet daher nicht instal­liert wer­den kön­ne.

Fehlerausgabe bei der Installation

Nachdem Apples “Command Line Developer Tools” instal­liert wur­den, ist die Installation von Packages und Themes kein Problem mehr und funk­tio­niert rei­bungs­los 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 beein­flusst wer­den. Mir gefiel die farb­li­che Ausgabe und Kennzeichnung des “Bracket Matchers” nicht, die­ser nutz­te nur eine 1 Pixel gedot­te­te Linie zur Kenntlichmachung der zusam­men­ge­hö­ri­gen Klammern und Divs, was für mei­ne Augen rela­tiv schlecht zu erken­nen war. Daher füg­te ich dem Stylesheet noch eini­ge Notierungen hin­zu. Das User-Stylesheet errei­chen Sie übri­gens unter “Atom => Open your Stylesheet”.

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

Diese weni­gen Zeilen CSS bewir­ken eine wesent­lich deut­li­che­re 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äng­lich ist, dürf­te für ver­sier­te Programmierer grund­sätz­lich alles anpass­bar sein. Weniger ver­sier­te Menschen kön­nen jedoch durch Packages, Themes und even­tu­ell durch die CSS-Anpassung den Editor eben­falls nach Ihren Bedürfnissen gestal­ten.

Die Besonderheiten des Atom HTML-Editors

Node.js Unterstützung

Die Node.js Unterstützung macht es ein­fach, auf das Dateisystem und auf Spawn-Subprozesse zuzu­grei­fen, selbst das Starten eines Servers aus dem Editor her­aus ist kein Problem. Wenn Sie eine Bibliothek benö­ti­gen, kön­nen Sie aus den über 50.000 in Nodes Package Repository aus­wäh­len. Die naht­lo­se Integration ermög­licht Ihnen eine freie Mischung aus Node- und Browser-APIs. Das und vie­les mehr erlaubt Ihnen die Integration von Node.js.

node-js-integration

Modulares Design

Atom ist aus über 50 Open-Source-Paketen zusam­men­ge­setzt, die sich um einen mini­ma­len Kerncode legen. Das Ziel der Entwickler ist ein umfas­send anpass­ba­res System und soll die Unterscheidung zwi­schen Benutzer und Entwickler ver­wi­schen. Sollten Sie einen Teilbereich von Atom nicht mögen oder erwei­tert sehen wol­len, so erstel­len Sie (theo­re­tisch) Ihr eige­nes Package. Durch das Hochladen in das Package-Verzeichnis kön­nen Sie es für jeder­mann zugäng­lich machen.

das-modulare-atom-design

Die Grundfunktionen des Atom-Editors

Out-of-theBox bie­tet Atom bereits etli­che, nütz­li­che Features an. Zum Beispiel:

  • einen Dateisystem-Browser
  • einen Fuzzy-Finder für schnel­les Öffnen von Dateien
  • schnel­les, pro­jekt­wei­tes “Suchen und Ersetzen”
  • Multiple Cursors und Selektionen
  • Multiple Fenster (“Panes”)
  • Snippet Unterstützung
  • Code Folding (das Falten von Code-Bereichen)
  • eine kla­re und über­sicht­li­che Oberfläche für die Einstellungen
  • Importfunktion für TextMate (Grammatik und Themes)
  • Unterstützung für das Arbeiten mit Projekten
  • gutes Syntax-Highlightning
  • kla­res, über­sicht­li­ches 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 rich­tig gut, denn er bie­tet nicht nur bereits nach der Installation etli­che nütz­li­che Details. Durch die wirk­lich ein­fa­che Installation von Erweiterungen und Themes kann der Editor unkom­pli­ziert auf eige­ne Bedürfnisse ange­passt und erwei­tert wer­den – ohne das Vorkenntnisse im Umgang mit Git nötig wären. Inwieweit sich der Editor für die Arbeit mit wirk­lich gro­ßen Projekten eig­net, müss­te noch über­prüft wer­den. Für “nor­ma­le” Projekte jedoch ist er her­vor­ra­gend geeig­net.

Links zum Beitrag

Empfehlenswerte Packages

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

7 Kommentare

  1. Sieht auf jeden Fall ziem­lich gut aus, aller­dings habe ich mei­nen abso­lu­ten Lieblingseditor schon gefun­den:
    Brackets! Die Live-Vorschau ist ein­fach wun­der­voll und auch auf dem Mac läuft Brackets flüs­sig und top. Habe bis dahin immer TextWrangerl benutzt, das ist aber für man­che Zwecke ein­fach nicht pas­send.

    LG

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

  3. Danke für den Bericht und die Übersicht. Da wer­de ich am Wochenende gleich mal aus­tes­ten ob das was für mich ist. BG Tobias

  4. Habe es instal­liert und getes­tet. Nett, hat Potential. Den aktu­el­len Stand wür­de ich per­sön­lich gegen Komodo Edit nicht ein­tau­schen.

  5. Danke für den Artikel über den Editor, der inzwi­schen mein Standard gewor­den ist.

    Ein Hinweis viel­leicht noch: Die Fehlermeldung, die bei der Emmet-Installation auf­taucht hat damit zu tun, dass Apple in einer der vor­he­ri­gen OSX-Versionen (prä-Mavericks/Yosemite) das Versionierungstool git aus dem Standard-Lieferumfang vom Betriebssystem ent­fernt hat und die Nutzer es ggf. durch die Installation der Command Line Developer Tools nach­träg­lich hin­zu­fü­gen kön­nen.

  6. erin­nert stark an sub­li­me. gucke ich mir mal an…

Schreibe einen Kommentar zu Dominik Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.