Der Atom Editor - Eine Anleitung in Deutsch

Es gibt viele Gründe, warum man sich für den Atom Editor als HTML- und Programmmiereditor entscheiden kann.

Der Atom Editor ist quelloffene Software und damit sowohl für private als auch kommerzielle Zwecke kostenlos nutzbar. Atom läuft unter den Betriebssystemen Windows (32 und 64 bit), Linux und OS X. Interessant also auch für Leute die mehrere Betriebssysteme parallel nutzen oder es möglicherweise einmal wechseln wollen.

Atom selber ist nur die Kernanwendung. Die enthält bereits alles nötige. Besonders interessant wird der Atom Editor durch die mehr als 9000 vorhandenen Packages, die sich in Atom selber kinderleicht installieren lassen. Damit läßt sich der Funktionsumfang fast beliebig erweitern.

Der Atom Editor ist außerordentlich flexibel konfigurierbar. Sowohl die Tastaturbelegung als auch das Erscheinungsbild von Atom lassen sich an die eigenen Bedürfnisse anpassen. Für die Optik gibt es diverse vorgefertigte Themes, die man installieren kann. Und diese kann man selber auch noch individualisieren. Die dazugehörigen Konfigurationsdateien sind in der CoffeeScript Object Notation gespeichert und relativ simpel editierbar.

Atom arbeitet hervorragend mit GitHub zusammen.

Eine tabellarische Übersicht der Leistungsmerkmale des Atom Editors finden Sie hier:

Tabellarische Übersicht der Eigenschaften verschiedener HTML-Editoren

zurück zum Inhaltsverzeichnis

Was ist Atom IO?

Die Homepage von Atom ist "https://atom.io/".
Das "IO" gehört nicht zum Namen des Atom Editors, sondern ist nur die Top-Level-Domain.
Atom ist ein leistungsfähiger Text- und Programmiereditor.
Jeder, der auf der Suche nach einem Programmiereditor ist, sollte ihn ausprobieren.
Atom ist kinderleicht installierbar.

Ist Atom eine IDE?

Der Atom Editor ist kein(e) Integrated Desktop Environment.
Er ist "nur" ein Text- und Programmiereditor, der sich aber um viele Funktionen erweitern läßt.

zurück zum Inhaltsverzeichnis

Hier kann man sich den Atom Editor herunterladen: Homepage von Atom

Anschließend die Installationsdatei starten und der Rest ist selbsterklärend.

zurück zum Inhaltsverzeichnis

Wenn Sie den Atom Editor zum ersten Mal starten, sieht er ziemlich spartanisch aus. Das täuscht aber. Die enorme Leistungsfähigkeit wird sich Ihnen bei der Arbeit mit diesem hervorragenden Programmiereditor erschließen. Die Sprache der Menüs ist auf englisch voreingestellt, läßt sich aber unter anderem auf deutsch ändern.

So sieht Atom nach dem ersten Start aus:

Ansonsten gibt es vorläufig nichts weiter zu tun. Denn die wichtigsten (Core)Packages sind schon automatisch installiert und die Standardeinstellungen sind so gut vorkonfiguriert, das man die am besten erst mal beibehält. Alles andere ergibt sich beim arbeiten mit Atom.

zurück zum Inhaltsverzeichnis

Der Atom Editor ist nach der Installation mit englischsprachigen Menüs versehen. Von Haus aus läßt sich die Sprache nicht ändern. Es ist erforderlich sich ein Package zu installieren. Danach kann man Atom unter anderem auf deutsch umstellen.

Das funktioniert folgendermassen:

Unter dem Menüpunkt: "File" klickt man auf "Settings".

Danach sollte Atom so aussehen:

Hier klickt man auf "Install" und in das oben erscheinende Suchfeld gibt man "atom-i18n" ein.

Jetzt bietet sich einem das folgende Bild:

Durch klicken auf "Install" wird das Package installiert. Ob man sich die reguläre oder die beta Version von "atom-i18n" installiert bleibt jedem selbst überlassen. Ich persönlich bin kein Freund von beta Versionen.

Die Installation dauert etwas. Man sollte warten bis der Bildschirm so aussieht:

Wenn er so aussieht, ist das Package erfolgreich installiert worden, und die deutsche Sprache, wie man an dem Screenshot erkennen kann, eingestellt.

Bei Ihnen wird das wahrscheinlich nicht der Fall sein. Sie gehen dann auf Settings, das an der Stelle von "Einstellungen" bei Ihnen dann steht, und können anschließend unter anderem deutsch als Sprache auswählen. Danach erscheint ein kleines Fenster in dem Sie aufgefordert werden, Atom zu "reloaden" also neu zu starten. Nach diesem Neustart steht die ausgewählte Übersetzung zur Verfügung.

Bei mir war eine Sprachauswahl und ein Neustart nicht erforderlich, weil ich das Package zum Zweck dieser Dokumentation schon einmal installiert und wieder deinstalliert habe. Offensichtlich hat sich Atom das irgendwo gemerkt. Bei meiner Erstinstallation war aber eine Spracheinstellung und anschließender Neustart nötig.

zurück zum Inhaltsverzeichnis

Die folgenden Packages sollte man meines erachtens direkt nach der Installation von Atom hinzufügen, weil sie sehr hilfreich sind.

Das erste relativ simple und trotzdem hilfreiche Package, was man als HTML-Entwickler installieren sollte, ist ein Package das nachdem man einen öffnenden HTML Tag geschrieben hat einen passenden schließenden automatisch hinzufügt.

Sie schreiben also zum Beispiel: <p> und das Package ergänzt diesen automtisch um: </p>.

Allein diese Kleinigkeit empfinde ich zumindest schon als eine große Arbeitserleichterung, die die Produktivität steigert.

Das funktioniert aber nur, wenn man den Tag über die Tastatur eingibt.
Mausschubser bleiben außen vor.

Es gibt mehrere Packages für Atom, die das leisten. Ich empfehle Ihnen das "auto-close-html2 package" zu wählen.

Das macht zuverlässig das, was es soll, ist leicht und sinnvoll konfigurierbar und wird weiter entwickelt.

Andere gleichartige Packages enthalten teilweise Bugs und/oder werden nicht mehr gepflegt.

Nach der Installation sollten Sie die Konfiguration an Ihre Bedürfnisse anpassen. Die Grundkonfiguration sollte man etwas abändern.

Meine persönliche Konfiguration sieht folgendermassen aus:

Atom Editor auto-close-html2 Konfiguration Screenshot:

Zur Erläuterung:

1. Add Slash To Self Close Tag
   Das ist in der Grundkonfiguration aktiviert und macht, wozu man dieses Package installiert hat. Entsprechend lässt man diese Einstellung, wie sie ist.
2. Enabled File Types
   Hier stehen die Dateiendungen bei denen auto-close-html2 aktiv wird. Voreingestellt ist nur "html". Andere Dateiendungen können beliebig hinzugefügt werden, müssen aber durch ein Komma voneinander separiert werden.
   Meine neues Projekt schreibe ich mit php. Entsprechend habe ich php als Dateinamenserweiterung hinzugefügt.
3. Insert White Space On Close
   Ist dieser Punkt aktiviert, wird nach dem hinzugefügten slash (Schrägstrich) des schließenden Tags ein Leerzeichen hinzugefügt. Das ist die XML konforme Schreibweise für schliessende Tags. Da meine Dateien nicht XML konform sein müssen, ist das bei mir nicht aktiv.
4. Self Close Tags
   Bei den unter diesem Punkt aufgeführten Tags werden keine schließenden Tags automatisch hinzugefügt. Die voreingestellten Tags sind single tags, bei denen kein schliessendes Tag erforderlich ist. Auch diese Liste läßt sich analog zu "Enabled File Types" editieren.
5. Slash Trigger Auto Close
   Diesen Punkt habe ich deaktiviert. Ist er aktiv, bewirkt er, dass nach jedem Slash den man schreibt ein > Zeichen automatisch hinzugefügt wird.

Link zur Homepage:

auto-close-html2 package

zurück zum Inhaltsverzeichnis

Ein muss für HTML-Entwickler ist das "Emmet" Package. Wie immer, wenn man etwas neues ausprobiert, ist es anfangs gewöhnungsbedürftig. Aber wenn man es eine Weile genutzt hat, möchte man es nicht mehr missen.

Das interessanteste Feature ist das Abbreviation (Abbreviation (englisch) = Abkürzung (deutsch)) Feature. Damit geben Sie bestimmte HTML- und/oder CSS Befehle in abgekürzter Form ein. Die Tastenkombinatin: STRG+E wandelt sie in die Langform um.

Emmet enthält noch viele andere hilfreiche Tools, die einem viel Schreibarbeit abnehmen. Emmet selber läßt sich auch wieder individuell an die eigenen Bedürfnisse anpassen.

Das "Emmet" Package steht auch viele andere HTML-Editoren zur Verfügung.

Link zur Homepage:

Emmet — the essential toolkit for web-developers

Am schnellsten findet man sich mit Emmet zurecht, indem man sich das cheat sheet dazu anschaut und ein paar Sachen erst mal ausprobiert.

Link zum Emmet Cheat Sheet:

Emmet Documentation - Cheat Sheet

Ergänzend dazu: Englischsprachige Video von Brad Traversy, das näher auf Emmet eingeht.

Hier ist ein weiteres englischsprachige Video von Brad Traversy das 10 weitere Atom Packages (inklusive Emmet) zeigt und wie man sie installiert und einrichtet.

zurück zum Inhaltsverzeichnis

Im folgenden finden Sie eine Liste der aus meiner Sicht wichtigsten und vor allen Dingen hilfreichsten Shortcuts für den Atom Editor.

zurück zum Inhaltsverzeichnis

Dieses Video ist ein kleines Werbevideo zur Vorstellung von Atom 1.0 von 2015.
Der Informationsgehalt ist gering, aber es ist (finde ich) sehr originell gemacht und läßt einen schmunzeln. Ich finde es sehr sehenswert!

zurück zum Inhaltsverzeichnis