Das Unternehmen Github bewirbt den Atom Editor als gelungenen Kompromiss zwischen Vi, Emacs, Sublime und Textmate. Über die gute Anbindung ans hauseigene VCS hofft man auf neue Nutzer.

Als Github im Juni 2014 Atom [1] ankündigte, stöhnten viele Kommentatoren: Braucht die Welt wirklich noch einen Editor? Die Github-Macher jedenfalls glauben das. Sublime Text [2] und Textmate [3] seien zwar komfortabel, aber zu wenig anpassbar. Emacs und Vi ließen sich zwar extrem modifizieren, seien aber für Einsteiger wenig komfortabel. Ein weiterer Grund für Atom, den die Macher nicht ausdrücklich nennen: Dank guter Github-Anbindung dürfte der Editor der Softwareplattform neue Nutzer bescheren.

Die Github-Macher wissen recht genau, wie die Open-Source-Welt tickt, und machen bislang nichts verkehrt – das gilt auch für Atom. Projekte wie Vi und Emacs funktionieren nur deshalb gut, weil sie offen sind und über eine große Community verfügen. Daher gehe Github mit Atom, der unter einer MIT-Lizenz steht, ein langfristiges Engagement ein, lassen die Macher wissen. Das bedeutet nicht, das Github den Editor nicht irgendwann forkt, um eine Enterprise-Variante anzubieten – doch bei Version 1.0, die im Juni 2015 erschien, war dies noch nicht der Fall.

Atom-Modell

Mit dem Editor sollen Entwickler plattformübergreifende Desktop- und Webapps entwickeln. Die Software bringt dabei Grammatiken für verschiedene Programmiersprachen mit, von Javascript über Perl und Python bis hin zu C/C++ oder Java. Letztlich handelt es sich bei der Software um eine spezialisierte Variante des Browsers Chromium, die Fenster sind nichts anderes als lokal gerenderte Webseiten. Die darin angezeigten Inhalte dürfen dabei auf das API von Node.js zugreifen.

Der Editor besteht aus einem überschaubaren Kern (“Atom Core”), die meisten anderen Komponenten liegen hingegen als Pakete vor, die der integrierte Atom Package Manager (APM) verwaltet. Kern und Pakete laufen dabei in einer Umgebung namens Electron [4], vormals “Atom Shell”. Diese kümmert sich um automatische Updates, bringt einen Windows-Installer mit, fertigt Crash-Reports an und liefert Benachrichtigungen aus. Diese Funktionen erreichen Sie über Javascript-APIs.

Der Einfachheit halber verwenden und empfehlen die Entwickler für die Arbeit mit Atom Coffeescript anstelle von Javascript sowie Less als Ersatz für CSS. Allerdings ist es möglich, den Editor mit Javascript und CSS auszubauen.

Steuerpult

Nach der Installation (siehe Kasten “Atom installieren”), die ruhig etwas weniger aufwendig ausfallen dürfte, landen Sie auf einer grafischen Oberfläche (Abbildung 1). Diese besteht aus verschiedenen Bereichen, als “Panes” bezeichnet, die Sie bei Bedarf flexibel vergrößern und verkleinern oder auf Wunsch neu anordnen. Die einzelne Datei, an der Sie arbeiten, heißt im Atom-Jargon “Buffer”.

Abbildung 1: Der Editor Atom besteht aus verschiedenen flexibel verschiebbaren Bereichen, den sogenannten Panes.

$ sudo apt-get install build-essential git libgnome-keyring-dev fakeroot gconf-service libnss3
$ curl -sL https://deb.nodesource.com/setup | sudo bash -
$ sudo apt-get install -y nodejs
$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
$ git clone https://github.com/atom/atom
$ cd atom
$ git fetch -p
$ git checkout $(git describe --tags `git rev-list --tags --max-count=1`)

Im linken Bereich des Hauptfensters sehen Sie den Verzeichnisbaum für das aktuelle Projekt, ins große Feld in der Mitte gehört der Code. Über [F11] gelangen Sie in den Vollbildmodus; die Einstellungen öffnet Atom als zusätzlichen Reiter, sobald Sie diese über [Strg]+[,] oder Edit | Preferences aufrufen.

Wissen Sie nicht genau, was als Nächstes zu tun ist, hilft der Editor über [Strg]+[Umschalt]+[P] mit einer Liste sämtliche Befehle weiter. Im Internet gibt es zudem ein hilfreiches Flight Manual [5], das bislang nur auf Englisch vorliegt.

Im Reaktor

Das im Vergleich zu Veteranen wie Vim recht junge Projekt bringt einige hilfreiche Features mit: Eine oder mehrere Codezeilen rücken Sie nach rechts ein, indem Sie diese markieren und [Tab] verwenden. Über [Shift]+[Tab] wandert der Block nach links. Auch eine Autovervollständigung haben die Entwickler implementiert. Mit dem Paket Autocomplete-plus bauen Sie diese Funktion aus. Es bietet zudem die Möglichkeit, die Tastenkombinationen zu ändern, die beim Einsatz der Funktion vorgegeben sind.

Rufen Sie die Settings über [Strg]+[,] auf und setzen Sie unter Editor Settings ein Häkchen bei Soft Wrap, so bricht der Editor am Bildschirmrand um. Ein weiteres Häkchen bei Soft Wrap At Preferred Line Length bricht den Code nach entsprechend vielen Zeichen um. Eine sichtbare Linie markiert die Grenze für den Umbruch, die in der Vorgabe bei 80 Zeichen liegt. Dies ändern Sie gegebenenfalls in der Zeile Preferred Line Length.

Aktivieren Sie die Option Soft Tabs, dann wandelt die Software automatisch Tabulatoren in Leerzeichen um. Deren Anzahl legen Sie über Tab Length fest. Beim Folding geht es darum, die Struktur des Codes zu vereinfachen, indem der Editor den Code unterhalb einer Methode, Anweisung oder Funktion einklappt. Das ließe sich besser lösen: Die kleinen Dreiecke lassen sich mitunter schwer treffen und der Editor springt dann plötzlich in eine andere Codepassage.

Schwächen und Stärken

Das junge Tool weist auch noch ein paar weitere Mankos auf. Das auffälligste: Atom verschluckt sich aktuell noch an Dateien, deren Größe 2 MByte überschreitet – die Entwickler arbeiten an einer Lösung. Permanent arbeiten sie außerdem daran, den eher gemächlichen Start des Editors und die Reaktionsgeschwindigkeit der grafischen Oberfläche zu beschleunigen. Die reagierte im Test mitunter etwas träge, was aber auch an der sie umgebenden virtuellen Maschine liegen kann. Besser klappt hingegen, wen wundert es, die integrierte Codeverwaltung. So stellt [Strg]+[Alt]+[Z] die letzte gute Version einer Datei wieder her; das Kommando entspricht den Zeilen aus Listing 2.

$ git checkout HEAD -- Pfad
$ git reset HEAD -- Pfad

Möchten Sie wissen, welche Ihrer Dateien Git nicht verwaltet, drücken Sie [Strg]+[Umschalt]+[B], was einem git status entspricht. Das Paket language-git hebt die Nachrichten zu den Aktionen Commit, Merge und Rebase hervor. Über das Paket git-diff erhält der Editor die Fähigkeit, veränderte Zeilen grafisch hervorzuheben. Suchen Sie auf Github nach Informationen zu einer Datei, die Sie aktuell bearbeiten, helfen ebenfalls eine Reihe von Kürzeln (siehe Tabelle “Github-Kürzel”).

Flexibel bis zum Kern

Ein weiteres Plus liegt in der Möglichkeit, die Software weitgehend zu modifizieren. Ein Package Generator erzeugt bei Bedarf ein Grundgerüst für ein Paket, das im Test klassischerweise hello-world heißt. Es macht nichts weiter, als ein kleines Fenster mit der Nachricht anzuzeigen (Abbildung 2).

hello-world holt ein unspektakuläres Fenster mit den entsprechenden Worten in den Editor.” width=”300″ height=”65″ /> Abbildung 2: Das Paket hello-world holt ein unspektakuläres Fenster mit den entsprechenden Worten in den Editor.

Starten Sie über [Strg]+[Umschalt]+[P] die Suche für Befehle und rufen Sie Package Generator: Generate Package auf. Der dabei erzeugte Boilerplate-Code landet im Verzeichnis github/Projekt, wobei das Projekt im Beispiel hello-world heißt. Zugleich erscheint der erzeugte Baum von Verzeichnissen in der Ansicht links, Abbildung 3 zeigt das Grundgerüst des hello-world-Pakets. Die darin sichtbare vorletzte Datei von unten heißt package.json. Sie enthält verschiedene Meta-Informationen zum Paket (Abbildung 4), darunter die Versionsnummer sowie den Pfad zu den ausführbaren Dateien im Unterverzeichnis lib.

Abbildung 3: In der Ansicht links sehen Sie die Struktur des automatisch erzeugten Pakets. Rechts: Der Code, der sich um die Logik des Programms kümmert.

package.json liegt im Wurzelverzeichnis eines Pakets und enthält Metadaten wie den Pfad zur ausführbaren Datei und die Versionsnummer.” width=”300″ height=”163″ /> Abbildung 4: Die Datei package.json liegt im Wurzelverzeichnis eines Pakets und enthält Metadaten wie den Pfad zur ausführbaren Datei und die Versionsnummer.

Das Letztgenannte sehen Sie weiter oben in Abbildung 3. Es enthält gleich zwei Dateien, hello-world.coffee und hello-world-view.coffee. Während Letztere die Elemente für das grafische Interface arrangiert (Listing 3), zeigt Abbildung 3 auch den Code für die Logik hinter dem Paket. Die Methoden activate, deactivate, serialize und toggle sind per Folding gekürzt, um die Struktur zu verdeutlichen. Listing 4 zeigt den nicht sichtbaren Code.

module.exports =
class HelloWorldView
  constructor: (serializedState) ->
    # Root-Element erzeugen
    @element = document.createElement('div')
    @element.classList.add('hello-world')
    # Nachrichten-Element erzeugen
    message = document.createElement('div')
    message.textContent = "Hallo Welt!"
    message.classList.add('message')
    @element.appendChild(message)
  # Gibt ein Objekt zurück, wenn Nutzer das Paket aktiviert
  serialize: ->
  # Element entfernen
  destroy: ->
    @element.remove()
  getElement: ->
    @element

Der Code in Listing 3 erzeugt zunächst das Root-Element (@element) und ordnet diesem dann das Nachrichten-Element message als Child zu (Zeile 12). Darunter legt der Code fest, wie das Element auf die Aufrufe getElement() und destroy() reagiert.

[...]
  activate: (state) ->
    @helloWorldView = new HelloWorldView(state.helloWorldViewState)
    @modalPanel = atom.workspace.addModalPanel(item: @helloWorldView.getElement(), visible: false)
    # Atom-Events lassen sich über CompositeDisposable einfach aufräumen
    @subscriptions = new CompositeDisposable
    # @toggle()-Methode mit 'hello-world:toggle' verknüpfen
    @subscriptions.add atom.commands.add 'atom-workspace', 'hello-world:toggle': => @toggle()
  deactivate: ->
    @modalPanel.destroy()
    @subscriptions.dispose()
    @helloWorldView.destroy()
  serialize: ->
    helloWorldViewState: @helloWorldView.serialize()
  toggle: ->
    console.log 'HelloWorld was toggled!'
    if @modalPanel.isVisible()
      @modalPanel.hide()
    else
      @modalPanel.show()

Die ersten drei der vier Methoden in Listing 4 gehören in der Regel zu jedem Package. Die Methode activate() erzeugt ein modales Element (ModalPanel) und ordnet es Atoms Arbeitsfläche zu (Zeile 4). Die Methode subscriptions() wiederum ordnet den in Listing 5 definierten Menüeintrag der Methode @toggle() zu (Zeile 11). Die optionale Methode @toggle() (Zeile 22) sorgt dafür, dass unter dem Menüpunkt Packages ein Eintrag für hello-world auftaucht. Klicken Sie in dessen Submenü auf Toggle oder drücken [Alt]+[Strg]+[O], sehen Sie das Fenster aus Abbildung 2 auftauchen oder verschwinden.

Die Details im Menü lassen sich ebenfalls anpassen; Listing 5 zeigt das leicht nachvollziehbare Schema. Es steckt im Ordner menus in der Datei hello-world.cson und erzeugt einen Eintrag für das Kontextmenü und für das Atom-Menü.

'context-menu':
  'atom-text-editor': [
    {
      'label': 'Toggle hello-world'
      'command': 'hello-world:toggle'
    }
  ]
'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'hello-world'
      'submenu': [
        {
          'label': 'Toggle'
          'command': 'hello-world:toggle'
        }
      ]
    ]
  }
]

Daneben besteht die Möglichkeit, den Stil in einer Less-Datei zu ändern (unter styles), ein Tastaturkürzel festzulegen (keymaps) und Spezifikationen für Tests zu erstellen (spec). Mit den Specs testen Sie Funktionen gegen Regressionen [8], wofür die Atom-Macher auf Githubs Javascript-Test-Framework Jasmine [9] setzen.

Fazit

Der Atom Editor macht einen soliden Eindruck, obwohl er einen einfachen Weg bietet, um vieles anzupassen. Nutzern des Editors Sublime Text dürften viele Elemente bekannt vorkommen: Offensichtlich haben sich die Entwickler kräftig bei der proprietären Python-Software bedient. Die Community des Projekts wächst kontinuierlich: Seit Version 1.0 stieg die Zahl der Erweiterungen von 1861 Paketen auf rund 3300. Offensichtlich schließt der Editor eine echte Lücke.