Der Atom Editor - Eine Anleitung in Deutsch

Einstieg in HTML und CSS von Peter Müller*

1. Warum Atom als Editor?

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 fast beliebig 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

2. Häufig gestellte Fragen zu Atom

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

3. Installation von Atom

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

4. Atom Editor einrichten

Wenn Sie den Atom Editor zum ersten Mal starten, sieht er ziemlich spartanisch aus. Die Sprache der Menüs ist englisch.

Und die Sprache der Menüs läßt sich auch nicht ändern. Das ist (fast) das einzige Manko, das mir bisher bei Atom aufgefallen ist.

Wer also unbedingt einen Editor, dessen Benutzeroberfläche in deutsch oder einer anderen Sprache erscheint, haben möchte, wird sich einen anderen Editor suchen müssen.

Ansonsten gibt es 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.

Ergänzend kann man sich das folgende englischsprachigen Video anschauen, in dem allgemein erläutert wird, wie man Atom an seine eigenen Bedürfnisse anpassen kann.


How to Set up Atom 1.0 with your Preferences
Englischsprachiges Video in dem gut erklärt wird, wie man Atom konfigurieren kann.

zurück zum Inhaltsverzeichnis

5. Die wichtigsten Packages

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

5.1 Auto-Close-Html2

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:

Atom Editor auto-close-html2 package

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

5.2 Emmet

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.


Emmet For Faster HTML & CSS Workflow
Englischsprachiges Video zu Emmet das zeigt, wie man diese Package nutzen kann, um seine Produktivität bei der Entwicklung von HTML-Seiten zu steigern.

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


10 Essential Atom Editor Packages & Setup
Englischsprachiges Video zur Installation und Einrichtung von 10 wichtigen Atom Packages.

zurück zum Inhaltsverzeichnis

6. Die wichtigsten Shortcuts

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

Atom Editor Shortcuts
ShortcutFunktionKommentar
Ctrl-Shift-PListet alle Atom Kommandos inklusiver zugehöriger Shortcuts auf (sofern vorhanden).Der einzige Shortcut den man sich wirklich merken sollte!
Pos 1Springt an den Anfang der Zeile.Funktioniert nicht nur bei Atom, sondern bei fast allen Programmen.
EndeSpringt an das Ende der Zeile.Funktioniert nicht nur bei Atom, sondern bei fast allen Programmen.
Ctrl-LMarkiert die ganze Zeile.-
Ctrl-Shift-DDupliziert die ganze Zeile.-
Ctrl-Shift-KLöscht die ganze Zeile.-
Alt + Linke MaustasteAktiviert spaltenweises markieren.Das Sublime-Style-Column-Selection Package muss installiert sein!
Ctrl + Linke MaustasteAktiviert die Multi-Cursor-Funktion.Hat man den Cursor versehentlich einmal falsch gesetzt, klickt man (ohne die ctrl-Taste loszulassen) noch mal an die gleiche Stelle. Der Cursor wird an dieser Stelle wieder entfernt!
Alt-F3Markiert alle gleichen Wörter im gesamten Dokument.-

zurück zum Inhaltsverzeichnis

7. Introducing Atom 1.0! (Video)

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!


Introducing Atom 1.0!
Englischsprachiges Video zur Vorstellung von Atom 1.0 im Jahr 2015.

zurück zum Inhaltsverzeichnis

Das könnte Sie auch interessieren:

Content-Management-Systeme

Wird die Website größer, sollte man auf ein CMS umsteigen.
Welche es gibt und was Sie können erfahren Sie hier!

FTP PROGRAMME

Um Ihre Seiten auf den Webserver hochzuladen, brauchen Sie ein FTP Programm.
Hier stelle ich Ihnen eine Auswahl vor!

HOMEPAGE BEKANNT MACHEN

Informieren Sie sich,
wie man eine Homepage auch ohne Suchmaschinenoptimierung bekannt machen kann!


Die Datei wurde zuletzt aktualisiert am: 22.08.2021