ct.0217.134-136.qxp 22.12.

16 10:55 Seite 134

Praxis | Editor Atom einrichten

Textmaschine nach Ma
Editor Atom einrichten, anpassen und erweitern

Atom ist wie ein Lego-Baukasten:

Whrend des Betriebs baut und
gestaltet man sich seinen eigenen
mageschneiderten Editor mit
mehr als 5000 Erweiterungen und
1700 Themes.

Von Moritz Sauer

tom ist ein Editor fr Windows,

macOS und Linux, der sich vor allem
an Software-Entwickler richtet. Er wurde
von den Betreibern der Filehosting-Plattform GitHub ins Leben gerufen als Editor,
der hackbar bis zum Kern, aber zugnglich vom ersten Tag an sein sollte. Atom
nimmt starke Anleihen bei Sublime
Text[1]. Anders als das Vorbild steht Atom
aber als Open Source und kostenlos zur
Verfgung.
134

Einen guten berblick ber den

Funktionsumfang von Atom verschaffen
Sie sich mit der Kommando-Palette (Command Palette), die Sie per Men mit Packages\Command Palette oder per Tastaturkommando mit Strg+Umschalt+P
ffnen. Die Palette zeigt per Volltextsuche
nicht nur die Befehle, sondern auch ihre
Tastaturkommandos an, sodass Sie fast
vllig auf die Maus verzichten knnen.
Mit Atoms ausblendbarer Baumansicht behalten Sie immer alle Dateien im
Projektordner im Blick. Die Fuzzy-Suche
findet Dokumente auch in greren Projekten schnell wieder. Weil Atom unscharf
sucht, mssen Sie sich nicht einmal an
den genauen Dateinamen erinnern. Bei
seiner Herkunft verwundert es nicht, dass
Atom auch eng mit GitHub verzahnt ist
und zum Beispiel ermglicht, die GitHubVersion einer Datei zu ffnen.

Dokumente ffnet Atom standardmig in Tabs. Zustzlich kann das Programm Dateien aber auch in sogenannten
Panes anzeigen also nebeneinander oder
untereinander. Das ist praktisch, wenn Sie
zum Beispiel neben Ihrem Code die Dokumentation ffnen oder zwei Dokumente vergleichen mchten.
Eine Funktion, die sich Atom beim
Editor Sublime Text abgeschaut hat, sind
multiple Cursor. Damit positionieren Sie
den Cursor an verschiedenen Stellen im
Dokument simultan. Tippen Sie anschlieend auf der Tastatur Zeichen ein,
fgt Atom sie an allen Cursor-Stellen
gleichzeitig ein. Das ist zum Beispiel
dann praktisch, wenn Ihnen auffllt, dass
Sie einen Variablennamen an mehreren
Stellen falsch geschrieben haben. Am
einfachsten positionieren Sie mehrere
Cursor, indem Sie die Strg-Taste festct 2017, Heft 2

ct.0217.134-136.qxp 22.12.16 10:55 Seite 135

Editor Atom einrichten | Praxis

halten und an die gewnschten Positionen klicken.

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

Pakete en masse
Mehr als 5000 Erweiterungen und 1700
Themes hlt die Atom-Website bereit.
Auch die bereits erwhnte Kommandopalette ist eine Erweiterung die aber
wegen ihrer Ntzlichkeit zum Standardumfang dazugehrt. Weitere dieser sogenannten Packages und Themes installieren und aktualisieren Sie unkompliziert
ber den Paketmanager, den Sie per Men
ber File\Settings oder ber den Tastaturbefehl Strg+Komma ansteuern.
Atom listet dort unter Packages alle
bereits installierten Erweiterungen auf,
die Designs finden sich unter Themes.
Bietet eine Erweiterung oder ein Theme
weitere Einstellungsmglichkeiten, so finden Sie sie hier. Unter Install erschliet
Atom die von der Community beigesteuerten Pakete per Volltextsuche. Mit einem
Klick knnen Sie sie dort direkt aus dem
Repository auf der Atom-Website herunterladen und installieren.
Um Ihnen den Einstieg zu erleichtern,
stellen wir Ihnen hier eine Auswahl bewhrter Erweiterungen vor, die uns bei
unserer tglichen Arbeit helfen. Die Erweiterung Minimap etwa erleichtert die
Orientierung in greren Listings. Sie
blendet zu jeder Zeit eine verkleinerte
Code-bersicht ein (siehe die Abbildung
S. 134) . Dabei hebt Minimap den Bereich
hervor, in dem man gerade arbeitet. Sublime Text lsst auch hier gren.
Emmet beschleunigt den Arbeitsfluss
in HTML- und CSS-Dokumenten und vermindert Tippfehler. Statt mhselig
HTML-Tags einzutippen, erledigen Sie die
Arbeit mittels kleiner Formeln, die Sie
schnell draufhaben. Um zum Beispiel eine
Navigation mit fnf <li>- und <a>- Elementen anzulegen, reicht die folgende
Zeile in einem HTML-Dokument mit
einer abschlieender Besttigung ber die
Tabulatortaste:

</ul>
</nav>

Anschlieend springt Emmet bei jedem

erneuten Druck auf die Tabulatortaste
zwischen die Anfhrungszeichen und den
Platz fr den Linktext von Zeile zu Zeile.
Auch CSS-Auszeichnungen tippen Sie
mit Emmet flinker ein als je zuvor. So wird
aus fz3em schnell font-size: 3em; oder aus
bg#000 die Zeile background: #000;. Die
Krzel mssen Sie nicht auswendig lernen.
Die meisten CSS-Kurzbefehle bestehen
aus zwei Anfangsbuchstaben. Aus lh wird
line-height, aus c macht Emmet color und
aus mt entsteht margin-top. Kombinieren
Sie die Kurzbefehle mit Werten, ist die
CSS-Anweisung in der Regel perfekt.
Konsistente Einrckungen mit Tabulatoren oder Leerzeichen strukturieren
den Code und machen ihn besser lesbar.
Mit der Erweiterung atom-beautify wenden Sie schnell individuelle Formatierungsregeln auf das offene Dokument
oder markierte Bereiche an. Alternativ
hbscht Beautify On Save den Code beim
Speichern auf. Regeln fr die Formatierungen legen Sie dafr in der SettingsDatei .jsbeautifyrc fest. So knnen Sie in
einem Team projektbergreifend Regeln
festlegen, teilen und gemeinsam nutzen.

Schnell mal ein paar Dateien umbenennen oder den Server hochfahren einige Dinge lassen sich besser oder berhaupt nur von der Kommmandozeile aus
erledigen. Dank der Erweiterung platformio-ide-terminal mssen Sie nicht einmal
dafr Atom verlassen. Auch mehrere Terminal-Fenster sind damit kein Problem.
Ein paar Erweiterungen fr Entwickler im Schnelldurchlauf: split-diff hebt
beim Vergleich zweier Dokumente die
Unterschiede hervor. Pigments zeigt Farbangaben in Quelltexten in ihrer Farbe an.
Und jshint validiert JavaScript-Code beim
gleichnamigen Webdienst.
Dieser Artikel kann nur eine kleine
Auswahl aus dem riesigen Fundus an
Add-ons vorschlagen, das Angebot ist gewaltig. Sie sollten es aber nicht bertreiben mit den Erweiterungen, denn
jede hat das Potenzial, Atom auszubremsen. Lsst sich Atom beim Start zu viel
Zeit, knnen Sie mit der standardmig
installierten Erweiterung Timecop nachschauen, welche der Erweiterungen dafr verantwortlich sind. Sie zeigt die
packages an, die beim Start von Atom die
meiste Zeit fressen.

Browser-Kern
Eine herausragende Eigenheit von Atom
ist seine Anpassbarkeit, auch ber Erweiterungen hinaus. Das hat mit dem Innenleben des Editors zu tun. Atom basiert auf

nav>ul>li*5>a

Emmet verwandelt das in den folgenden

Code:
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>

ct 2017, Heft 2

Schaltzentrale: Mit der Command Palette hat man immer die

Kommandos und die zugehrigen Tastenkombinationen im Blick.

135

ct.0217.134-136.qxp 22.12.16 10:55 Seite 136

Praxis | Editor Atom einrichten

Hilfreich beim Code-Vergleich: die Fenster-neben-Fenster-Ansicht

dem Framework Electron, das wiederum

auf dem Web-Browser Chromium und
dem JavaScript-Framework Node.js aufsetzt (um genau zu sein, ist Electron aus
der Arbeit an Atom entstanden). Im Inneren von Atom verrichtet also ein Browser
seine Arbeit, der einen Blick hinter die
Fassade des Programms ermglicht. Dazu
ffnen Sie die von Chrome bekannten
Entwickler-Tools mit Strg+Alt+I.
Dass Atom im Kern ein Browser ist,
hat eine Reihe von ntzlichen Nebeneffekten. So kann Atom Bilder in gngigen
Formaten direkt anzeigen. Wie bei
HTML-Webseiten steuert zudem CSS bei
Atom die Gestaltung der Oberflche. Die
CSS-Eigenschaften der Bedienoberflche
knnen Sie direkt beeinflussen, indem
Sie ber das Men File\Stylesheet ihr
Stylesheet aufrufen.
In das sich ffnende Less-Dokument
tippen Sie jetzt einfach gewohnte CSS-Angaben oder Sie nutzen die dynamische
Stylesheet-Sprache Less selbst. Geben Sie
in das Dokument zum Beispiel die folgenden CSS-Angaben ein, verwandelt sich
der Cursor in ein blinkendes grnes
Rechteck:
atom-text-editor::shadow .cursor {
border: 1px solid green;
background: green;
}

Wenn Sie jetzt Interesse daran verspren

sollten, auf Atom umzusteigen, mchten
Sie mglicherweise weiterhin Ihre ge136

wohnten Tastenkombinationen verwenden. Auch das ist mglich. Die Belegungen fr die Tastenkombinationen, Keybindings genannt, berschreiben Sie einfach
in den Preferences.
Um eine Tastenkombination zu ndern, suchen Sie den dazugehrigen Befehl
am schnellsten ber die Suchmaske
heraus. Die Tastenkombinationen kopieren Sie ber das kleine Icon am Anfang der
Zeile in den Zwischenspeicher. Im nchsten Schritt ffnen Sie die Konfigurationsdatei your keymap file ber den Link
oberhalb des Suchfelds und kopieren den
Zwischenspeicher an das Ende des Dokuments in eine neue Zeile. Anschlieend ndern Sie die Keymap-Datei und speichern
das Dokument ab. Auf diese Weise lassen
sich auch von Erweiterungen vorgegebene
Tastenkombinationen berschreiben.

Normale Schreibmaschine
Atom eignet sich nicht nur hervorragend
als Code-Editor, sondern auch als ganz
normales Textwerkzeug, zum Beispiel fr
Projektdokumentationen und Blog-Beitrge. Schreiben Sie in Deutsch, sollten Sie
zuerst das vorinstallierte spell-checkPackage umstellen. Geben Sie in den Einstellungen der Erweiterung unter Locales de-DE ein, ndert Atom die Rechtschreibprfung.
In den Einstellungen unter Editor
knnen Sie unter Soft Wrap At Preferred
Line Length dafr sorgen, dass Atom
Zeilen lesefreundlich umbricht stan-

dardmig nach 80 Zeichen. Ansonsten

benutzt das Programm die vollstndige
Monitorbreite. Die Erweiterung zen reduziert Atom auf den bei vielen Autoren
beliebten Zen-Modus, der alle ablenkenden Elemente wie Tabs, Seitenleiste oder
Fuzeile ausblendet. Wer sich von seinen
quatschenden Kollegen gestrt fhlt,
installiert das Add-on whitenoise, das
Umgebungsgerusche mit Rauschen
berdeckt.
Einige Add-ons helfen, ntzliche
Funktionen nachzursten, die man von
anderen Editoren gewohnt ist. wordcount
etwa hilft Ihnen, Ihren Arbeitsfortschritt
im Auge zu behalten, indem es Wrterund Zeichenzahl in der Fuzeile einblendet. highlight-selected hebt alle Vorkommen eines markierten Wortes hervor. Erst
mit simple-drag-drop-text knnen Sie in
Atom Text anfassen und verschieben. Und
open-recent zeigt im File-Men eine Liste
zuletzt geffneter Dateien und Ordner an.
Wer seine Dokumentationen in Markdown verfasst, dem empfiehlt sich markdown-writer mit vielen kleinen Helferlein.
markdown-preview-enhanced ergnzt ein
Vorschaufenster. markdown-pdf schlielich komplettiert die Schreibwerkstatt und
erlaubt aus Atom heraus den direkten
PDF-Export. Dass Atom vornehmlich fr
Entwickler ausgerichtet ist, sieht man am
Fehlen der Druckfunktion das einzige
Feature, das wir gefunden haben, fr das
es keine Ergnzung im Form eines Packages gibt.

Fazit
Wer einen modernen, vielseitigen und uerst wandelbaren Texteditor sucht, den
bedient Atom bestens. Tausende Erweiterungen und Themes erweitern den Funktionsumfang. Die Software ist nicht nur
kostenlos, sondern steht fr alle gngigen
Plattformen zur Verfgung. Auerdem ist
die Zukunft von Atom gesichert, da mit
GitHub eine groe Firma das Produkt
(jo@ct.de) c
vorantreibt.

Literatur
[1] Herbert Braun, Erhaben texten, Wie man den
Editor Sublime Text richtig einsetzt, ct 18/14,
S. 166
[2] Hajo Schulz, Total geladen, Desktop-Anwendungen mit Electron bauen, ct 26/16, S. 174

Dokumentation und Tipps: ct.de/ysuf

ct 2017, Heft 2