© manfredxy, 123RF

Githubs Open-Source-Texteditor Atom beherrscht jetzt das Server Language Protocol. Nach der Protokoll-Injektion erstrahlt Atom als reaktive IDE für Typescript, PHP, Python und weitere Programmiersprachen.

Bei den Simpsons verdankt Radioactive Man seine übernatürlichen Kräfte einem Atombombentest. Der Editor Atom [1] möchte hingegen ab Version 1.21 mit einer neuen IDE Superkräfte erlangen. An dieser hat neben Github unter anderem Facebook maßgeblich mitgearbeitet. Wer sich die entsprechenden Atom-Pakete installiert, dem hilft die IDE: Sie liefert beim Eintippen des Codes Vorschläge zur Syntaxvervollständigung, vereinfacht die Diagnose des Programmcodes mit Hilfe von Programmschnipseln oder hebt schlicht Syntaxfehler hervor.

Der Artikel prüft die Einsatztauglichkeit der IDE für die statisch getypte Javascript-Obermenge Typescript [2] sowie die Skriptsprachen PHP [3] und Python [4] anhand der Betaversion 1.22.

Abbildung 1: Was man Atom nicht ansieht – der erweiterbare Editor basiert auf HTML und Javascript.

Nach der Installation (siehe Kasten “Atoms IDE installieren”) holt der Editor selbst noch weitere von ihm benötigte Atom-Pakete. Den Vorgang schiebt der Nutzer über den Eintrag »Install« unter dem Menüpunkt »Edit | Preferences« an, das Textfeld aus Abbildung 2 hilft dabei. Mit dem Paket »atom-ide-ui« landet das globale Userinterface der IDE im Editor, die Pakete »ide-typescript«, »ide-php« sowie »ide-python« kümmern sich um die im Artikel getesteten sprachspezifischen Anbindungen.

Language-Server-Protokoll

Atom implementiert – analog zu IDEs wie Eclipse und Emacs – das Language-Server-Protokoll (LSP, [5]), um die Dienste eines Programmiersprachen-Servers zu nutzen. Die Idee des LSP: Indem es die IDE-Features in einen eigenen Server auslagert, bedienen sich die Dienste unterschiedlicher IDEs daran.

Abbildung 2: Pakete über die Auswahlliste installieren, hier mit Atoms dunklem Theme.

Das erspart nicht nur eine Mehrfachimplementierung: Der Editor-Entwickler kann den Language-Server auch wechseln, ohne am Programmcode des Editors zu basteln. Ist der Language-Server zudem in der Sprache implementiert, die er auch bedient, profitieren Funktionen wie »eval()« [6] oder »token_get_all()« [7] davon, was den Entwicklungsaufwand stark reduziert.

Tabelle 1 schlüsselt nach Funktionen auf, wie umfassend die Language-Server für PHP [8], Python [9] und Typescript [10] sowie Atoms IDE als LSP-Client das Protokoll implementieren.

Abbildung 3 veranschaulicht ein paar Einsatzmöglichkeiten, die die Urheber für das Protokoll im Sinne hatten. Als Benutzer agiert dabei ein Tool, beispielsweise die links im Bild angezeigte IDE. Sie redet mit dem Server in Json und sendet ihm zunächst den Quellcode und sukzessive die Änderungen des IDE-Benutzers. Der Server antwortet mit einer Meldung, sobald er auf einen Fehler trifft. Zudem liefert er auf Anfrage der IDE Codeschnipsel im Stile eines HTTP-Servers.

Abbildung 3: Kommunikation zwischen IDE und Language-Server.

Start und Betrieb der Language-Server übernimmt im Übrigen Atom selber. Im Einzelfall (Listing 1) fordert er den Nutzer dazu auf, Softwarepakete nachzuinstallieren oder erledigt dies gleich selbst.

01 sudo apt-get update
02 sudo apt-get install php7-cli python-pip
03 sudo pip install python-language-server
04 wget https://github.com/atom/atom/releases/download/v1.22.0-beta1/atom-amd64.deb
05 sudo dpkg -i atom-amd64.deb
06 atom-beta

Code Completion

Im Test arbeiteten Language-Server und IDE verzögerungsfrei zusammen. Das zeigte sich besonders bei der Code Completion. Sie unterbreitet beim Tippen Vorschläge, um Schlüsselwörter, Klassen-, Methoden-, Funktions-, Variablen- und Eigenschaftsnamen zu vervollständigen. Dabei berücksichtigt sie auch den Gültigkeitsbereich (Scope) an der Stelle der Code-Eingabe. Gibt der Nutzer etwa »this.« ein, bietet ihm die Code Completion wie in Abbildung 4 die Properties »angularclasslogo«, »name«, »url« und »appstate« der Klasse »AppComponent« sowie ihre einzige Methode »ngOnInit()« an.

Abbildung 4: Die Code Completion berücksichtigt auch den Scope.

Unter PHP und Python bietet die IDE dem Nutzer auch die Option, Templates für blockbehaftete Schlüsselwörter wie »class«, »if« oder »for« einzuschleusen (Listing 2). Für Python und Typescript berücksichtigen die Language-Server zudem die systemweit installierten Pakete in den Instanz-typischen Verzeichnissen, zu denen etwa »/usr/lib/python« oder »/usr/lib/node_modules« zählen.

01 /**
02  *
03  */
04 class ClassName extends AnotherClass
05 {
06   function __construct(argument)
07   {
08     # Code [...]
09   }
10 }

Gab der Autor im Test »import r« ein, schlug der Language-Server von Python alle installierten und mit »r«-beginnenden Python-Pakete vor, zum Beispiel »random« oder »re«.

Für PHP fehlt ein vergleichbarer Import-Mechanismus für Pakete, also bereitet die Atom-IDE auch keine Vorschläge. Dafür stört der Language-Server von Python den ungeübten Atom-Benutzer mit einer Spracheigenheit: Fortwährend nervt sie mit dem Hinweis, bei Einrückungen doch bitte ein Vielfaches von vier Leerzeichen zu verwenden [11].

Workspace Symbols

Die Workspace Symbols (Abbildung 5) erlauben einen alternativen Blick auf den geöffneten Quellcode. In einer Liste am rechten Rand des Editors erscheinen alphabetisch aufgelistet alle Symbole, also Namen von Paketen, Klassen, Methoden, Konstanten, Eigenschaften und so weiter, die der Code definiert oder einbindet. Klickt der User auf einen Eintrag, springt der Cursor auf die erste Zeile der entsprechenden Stelle.

Hover & Jump to Def

Das Hover-Feature versorgt den IDE-Nutzer mit zusätzlichen Informationen. Bewegt er den Mauszeiger auf Pakete, Klassen, Methoden, Funktionen, Variablen und Properties, zeigt die IDE Meta-Informationen dazu in einem Popup-Fenster an. Für die Packages holt es diese aus der Dokumentation des Quellcodes. Sie offenbaren Datentypen, Methoden-Signaturen, aber auch längere Dokumentationsblöcke für Klassen. Die gleichen Meta-Informationen gibt es auch für Built-in-Funktionen und Objekte.

Abbildung 5: Die Workspace Symbols lassen sich über »View | Outline« erreichen.

Ergänzend zu Hover kommt Jump to Def zum Einsatz. Die Funktion bedient Programmierer, die den kompletten Quellcode zu einem Element brauchen, um den Kontext zu verstehen. Jump to Def zeigt den Quellcode in einem eigenen Editor-Tab an. Um es zu aktivieren, klickt der User bei gedrückter [Strg]-Taste mit der linken Maustaste auf das in Frage stehende Element im Quellcode. Der Cursor verwandelt sich dann in einen Pointer und zeigt die Informationen in besagtem Tab an. Für Built-in-Funktionen steht das Feature aber nicht zur Verfügung.

Wer tiefer in Hover und Jump to Def eintaucht, stellt aber fest, dass er dem Editor die gewünschte Information bisweilen durch eine Kombination aus beiden Features abringen muss.

Find References

Komplementär zu Jump to Def arbeitet »Find references«. Es listet wie in Abbildung 6 sämtliche Codezeilen auf, die das ausgewählte Symbol – im Beispiel die Klasse »AppComponent« – verwenden. Find References macht sich dabei insbesondere bei Änderungen an großen Projekten nützlich.

Diagnostics

Benachrichtigungen über Syntaxfehler und Warnungen des Language-Servers markiert die IDE im Editor, indem sie neben der entsprechenden Zeilennummer ein Symbol anzeigt. Bewegt der User den Mauszeiger über das Symbol, verrät die IDE weitere Details zum Problem.

Abbildung 6: Die Referenzen ruft der Nutzer über »Find references« im Kontextmenü ab.

Eine Zusammenfassung aller aktuellen Meldungen versammelt das Diagnostic-Fenster, das der Nutzer ebenfalls über »View« erreicht. Die Auflistung filtert er im Kopfbereich nach Meldungstyp und auf Wunsch einem regulären Ausdruck. Sie lässt sich zudem auf den aktivierten Editor-Tab beschränken.

Bei der Qualität der Meldungen für PHP bleiben allerdings Wünsche offen: Es dürfen ruhig mehr und sie sollten verständlicher sein. Lobenswert ist, dass die IDE Typescript-Anwender vor nicht erreichbarem Code warnt – etwa nach einer »return«-Anweisung – oder dass sie Python-Nutzern mitteilt, falls ein importiertes Paket im Quellcode nicht zum Einsatz kommt.

Fazit

Die stabile Version 1.21 stattet den Atom-Editor mit bewährten IDE-Features aus. Der Einsatz des Language Server Protocol bringt sie im Prinzip auf Augenhöhe mit Eclipse, Emacs oder vergleichbaren IDEs. Allerdings stellt sich die Frage, warum die Atom-Macher die neu gewonnenen Superkräfte noch nicht standardmäßig einsetzen und die IDE aktivieren, denn auf die besprochenen Features wird trotz kleinerer Mängel wohl kaum ein Entwickler verzichten wollen.