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.

zurück zum Inhaltsverzeichnis

2. 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

3. 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

4. Die wichtigsten Packages

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

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

5. 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!
ctrl-lMarkiert die ganze Zeile.-
ctrl-shift-dDupliziert die ganze Zeile.-
ctrl-shift-kLöscht die ganze Zeile.-
---
ctrl-clickAktiviert 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 Dokumnet.-

zurück zum Inhaltsverzeichnis

6. 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: 10.04.2021