zurück zum Artikel

Teil 3 der Serie erklärt, was zum Erstellen eigener Erweiterungen notwendig ist und welche Möglichkeiten auch bei speziellen Anforderungen offen stehen.

Das Konzept von Visual Studio Code ist die Erweiterbarkeit. Neben vorgefertigten Erweiterungen, die Nutzerinnen und Nutzer nur installieren müssen, lassen sich auch selbst erstellte Erweiterungen als Plug-ins implementieren. Die zwei bisherigen Teile der Serie haben gezeigt, dass Visual Studio Code ein vielseitiger Editor ist. Ursprünglich als reine Unterstützung bei der Webentwicklung gedacht, leistet Visual Studio Code heutzutage deutlich mehr. Einen Großteil seiner Funktionsvielfalt und Flexibilität verdankt der Editor den Erweiterungen. Teil 2 der Artikelserie hat gezeigt, wie der Extension Manager und der Extension-Marktplatz sich nutzen lassen [1], um Erweiterungen zu finden [2], zu installieren und zu verwalten – für vorhandene funktioniert das problemlos.

Wenn für eine spezielle Anforderung keine Erweiterung existiert, lassen sich neue Extensions für Visual Studio Code schreiben. Teil 3 erklärt nun abschließend, was für das Erstellen eigener Erweiterungen notwendig ist und welchen Spielraum sie eröffnen. Im Mittelpunkt stehen dabei das Spektrum der Extensions, ihre Implementierung und Veröffentlichung sowie das Fallbeispiel der Language Server, wenn umfassende Anpassungen an der Unterstützung von Programmiersprachen in Visual Studio geplant sind.

Welche Möglichkeiten Erweiterungen bieten

Visual Studio Code bietet eine ganze Palette an Optionen, wie sich die Entwicklungsumgebung sinnvoll erweitern lässt. Beim Erstellen einer neuen Erweiterung ist es nicht immer leicht, den konkreten Contribution Point oder die passende API zu finden. Unter einem Contribution Point ist eine JSON-Deklaration [6] zu verstehen, die eine Visual-Studio-Code-Erweiterung in der package.json vornehmen muss, um anzuzeigen, dass der betreffende Bereich von VS Code erweitert wird.

Die package.json muss für jede Erweiterung vorliegen und heißt daher Extension Manifest [7]. Darin sind unter anderem Informationen wie der Name und die Versionsnummer der Erweiterung sowie die unterstützten Versionen von VS Code aufgeführt, zudem die verwendete Lizenz. Über die Contribution Points kann sich eine Erweiterung in die Breakpoints, Kommandos, Debugger oder unterstützten Programmiersprachen einklinken. Die VS-Code-API ist ein Satz an JavaScript-APIs, die sich in einer eigenen Erweiterung für VS Code aufrufen lassen [8] – beispielsweise, um einen neuen Befehl zu registrieren. Eine Übersicht aller VS-Code-APIs hält die Dokumentation bereit.

Diese beiden technischen Ankerpunkte sind zentral für die Erweiterungen in VS Code. Mit ihrer Hilfe ist es möglich, Befehle, Konfigurationen oder Tastaturkürzel zu registrieren. Auch das Speichern von Daten im Workspace, das Anzeigen von Benachrichtigungen oder das Aufrufen von Auswahldialogen sind klassische Aufgaben einer Erweiterung. Deren Designelemente wie die Farben von User Interface (UI), Syntaxhervorhebung oder die eingesetzten Datei-Icons lassen sich ebenfalls anpassen.

Language Extensions und Server

Bei den Sprachfunktionen ist zwischen deklarativen und programmatischen Features zu unterscheiden. Beide gehören zur Kategorie der Language Extensions, die Unterstützung für das Editieren von Programmiersprachen und Dialekten in VS Code bieten. Die Sprachfunktionen lassen sich deklarativ erstellen. Dazu gibt es sprachspezifische Konfigurationsdateien, die jeweils eine Sprache oder einen Dialekt wie etwa HTML, CSS und TypeScript abdecken. Diese Form der Erweiterungen hat Zugriff auf die Syntaxhervorhebung, die Vervollständigung von Snippets, das Matching von Klammern und die automatische Einrückung von Code (Indentation). Die programmatischen Sprachfunktionen gehen einen Schritt weiter und ermöglichen Funktionen wie das Autovervollständigen, das Prüfen auf Fehler und die Möglichkeit, zu einer Deklaration zu springen. Oft werden diese Funktionen von Language Servern bereitgestellt.

Sie sind komplexer in der Implementierung, bieten aber auch breitere Einsatzoptionen. Ein Language Server, der das Language Server Protocol nutzt [9], ist im Falle von VS Code ein eigens implementiertes Analyse-Tool, das in einem separaten Prozess läuft. Das Tool ist zudem häufig in der nativen Programmiersprache implementiert, wozu der Language Server Dienste bereitstellt. Ein Language Server, der VS Code die Unterstützung von PHP beibringt, mit Funktionen wie Autovervollständigung, Diagnosefunktionen und Formatierungen, ist beispielsweise schon in der Programmiersprache enthalten.

Darüber hinaus lässt sich die Workbench in VS Code erweitern [10], also das übergeordnete User Interface der Entwicklungsumgebung – Beispiele dafür sind die Titelleiste, die Seitenleiste oder Informationen in der Statusleiste. Auf diese Weise lassen sich neue Kontextmenüs und -aktionen integrieren, ebenso wie das Rendern zusätzlicher Inhalte über die WebView API. Sogenannte Debugger Extensions erlauben es zudem, sich in das Debugging-UI und dessen Funktionalität einzuklinken [11]. Die Erweiterungen für das Debugging gehören zu den umfangreichsten Anpassungen. Wenn es nicht direkt ein eigener Debugger sein muss, bietet die VS-Code-API einen Satz von Aufrufen, um Funktionen auf der Basis des vorhandenen VS-Code-Debuggers zu implementieren. Damit sind unter anderem Automatisierungen realisierbar.

Projektvorbereitungen und „Hallo Erweiterungs-Welt“

Zunächst ist eine installierte Version von VS Code erforderlich. Spätestens für den Test der eigenen Erweiterungen ist die Anwendung essenziell. Node.js und npm beziehungsweise yarn stehen ebenfalls auf der Liste notwendiger Voraussetzungen. VS Code arbeitet bei Erweiterungen mit einem Template, das sich einfach installieren lässt. Damit wird der Einstieg in die Entwicklung von Erweiterungen nach Erfahrung des Autors zum Kinderspiel. Als Generator ist Yeoman im Einsatz, ein Open-Source-Scaffolding-Tool zum Erstellen von Projektvorlagen. Der Generator für VS Code heißt "vscode-generator-code". Über yarn lässt er sich wie folgt installieren:

yarn global add yo generator-code

Anschließend reicht es aus, den Befehl yo code in dem Verzeichnis auszuführen, das die neue Vorlage für die Extension aufnehmen soll. Eine Begrüßung wie in Abbildung 1 weist darauf hin, dass es sich um den Generator für Visual-Studio-Code-Erweiterungen handelt, und sie bietet direkt weitere Optionen an. Eine Erweiterung lässt sich mit TypeScript oder JavaScript implementieren. Zusätzlich ist beispielsweise die Auswahl eines Color Theme, Code Snippets, Language Packs oder ein Notebook Renderer vorhanden.

Eine Erweiterung mit TypeScript dient an dieser Stelle als erstes Beispiel. Nach der Auswahl der gewünschten Vorlage fragt der Generator ein paar typische Informationen wie den Namen der Erweiterung, die Beschreibung und den zukünftig zu nutzenden Paketmanager ab. Danach erstellt er die notwendigen Dateien und Verzeichnisse und stößt den ausgewählten Paketmanager an, um die Abhängigkeiten aufzulösen und zu installieren.

Das erzeugte Projekt lässt sich in VS Code öffnen. Die Entwicklungsumgebung erstellt Standarddateien und einige Tests als Vorlage, die sich anschließend weiterverarbeiten lassen. Das Projekt ist so eingerichtet, dass es sich direkt ausführen und debuggen lässt. In VS Code genügt es, einmal F5 zu drücken, um den Code zu kompilieren und in eine neue VS-Code-Instanz einzubinden. Dieser sogenannte Extension Development Host, den Abbildung 2 darstellt, lädt die neue Erweiterung. Im Beispiel stellt die Erweiterung einen Befehl namens "Hello World" zur Verfügung. Beim Ausführen erscheint rechts unten eine kleine Benachrichtigung. Die Hallo-Welt-Erweiterung funktioniert und lässt sich nun weiterentwickeln sowie debuggen.

CodeLens um Funktionen erweitern

Eine Erweiterung besteht aus zahlreichen Dateien, die das Scaffolding-Template für Erweiterungen erstellt. Im Verzeichnis src existiert die Datei extension.ts, die den primären Code enthält. Dort importiert das Modul "vscode" die VS Code Extensibility API und implementiert die beiden grundlegenden Methoden activate und deactivate. Sie sind dafür zuständig, die Erweiterung zu starten beziehungsweise anzuhalten. In der activate-Methode ist auch der gesamte Code enthalten, der für das vorherige Hallo-Welt-Beispiel notwendig war.

Im nächsten Beispiel geht es um das Feature der CodeLens. Damit lassen sich zusätzliche Informationen über Codestellen im Editor einblenden, und das ist mittlerweile eine beliebte Funktion, um Daten aus einer Versionsverwaltung anzuzeigen oder Informationen zur Nutzung einer Methode aufzurufen. Ein eigener CodeLens-Provider muss dafür registriert sein:

const codelensProvider = new CodelensProvider();
languages.registerCodeLensProvider("*", codelensProvider);

Der erste Parameter der Methode zum Registrieren gibt den Dokumententyp an. In diesem Beispiel steht die Wildcard für alle Typen, um den Provider ausprobieren zu können. Der neue CodeLens-Provider implementiert die Schnittstelle vscode.CodeLensProvider, die wichtige Rahmenbedingungen vorgibt, wie die Methoden provideCodeLenses und resolveCodeLens. Die erste Methode erstellt eine Liste von CodeLenses für das Dokument, in dem das Kommando aufgerufen wurde.

Im besten Fall ist sie so schnell wie möglich, um alle CodeLenses anzuzeigen. Dauert die Berechnung länger, sollte der implementierende Code über den range-Parameter nur die CodeLenses für den sichtbaren Bereich zurückgeben und die resolveCodeLens-Methode implementieren. Für jede sichtbare CodeLens gilt es, sie aufzurufen, was beispielsweise beim Scrollen der Fall ist.

Durch diesen Code ist es möglich, den CodeLens-Befehl auszuführen, um die Beispiel-CodeLens zu aktivieren. Dafür existieren die Befehle Enable CodeLens und Disable CodeLens. Abbildung 3 zeigt das Ergebnis nach dem Ausführen des Enable-Befehls. Da unser Beispielprovider für alle Typen von Dokumenten funktioniert, reicht eine Textdatei mit einigen Zeilen Code aus, um für jede dieser Zeilen eine CodeLens darzustellen. Sie sind zudem interaktiv und lassen sich anklicken, um weitere Informationen in einer Benachrichtigung anzuzeigen. Auch Argumente lassen sich so übermitteln, um Daten in den Benachrichtigungen zu nutzen.

Öffentlich auf dem Marktplatz

Eine Erweiterung für VS Code zu schreiben, ist nur die halbe Miete. Entwicklerinnen und Entwickler müssen sie zudem testen und veröffentlichen, damit andere sie nutzen können. Der Veröffentlichungsprozess läuft über den Marketplace für VS-Code-Erweiterungen oder alternativ als Paket im VSIX-Format, das sich mit anderen teilen lässt. Besonders einfach funktioniert es über das Kommandozeilenwerkzeug "Visual Studio Code Extensions", kurz vsce, das sich über npm beziehungsweise yarn installieren lässt.

Nach der Installation reicht es, in das Verzeichnis mit der Erweiterung zu wechseln und die folgenden Befehle auszuführen:

vsce package
vsce publish

Bei der Veröffentlichung gilt es, einige Einschränkungen und Hinweise zu beachten. Aus Sicherheitsgründen sind beispielsweise keine benutzerdefinierten SVG-Dateien erlaubt. Sie dürfen weder als Icons noch als Badges in der package.json hinterlegt sein. Auch die Bild-URLs in den Dateien README.md und CHANGELOG.md dürfen nicht auf SVG-Dateien verweisen. Da Azure DevOps für den Marketplace genutzt wird, laufen die Verwaltung und die Authentifizierung ebenfalls darüber. Damit der Veröffentlichungsvorgang funktioniert, ist ein Access Token über Azure DevOps notwendig. Dazu ist zunächst ein Organisationskonto bei Azure DevOps erforderlich, das wiederum ein persönliches Microsoft-Konto, ein GitHub-Konto, ein Arbeits- oder Schulkonto voraussetzt. Wichtig ist, dass das Konto dafür geeignet ist, bei Azure DevOps eine Organisation zu erstellen, falls das eigene Unternehmen dort noch nicht registriert war.

Das Anlegen einer Organisation ist ebenso wie Azure DevOps zunächst kostenfrei, wenn es sich um kleinere Projekte oder den Open-Source-Bereich handelt. Darüber ist das Token generierbar. Die Kosten aller weiteren Optionen sind bei Azure einsehbar. Anschließend ist ein sogenannter Publisher notwendig, der sich über die Verwaltung des Marketplace erstellen lässt. Über den Befehl vsce login <publisher name> lässt sich der Log-in testen.

Funktioniert alles, steht der Veröffentlichung der Erweiterung nichts mehr im Weg. Wer nur ein Paket erstellen möchte, um die Erweiterung zunächst lokal nach einer regulären Installation zu testen, kann das mit dem oben erwähnten package-Befehl von vsce erledigen. Die so erzeugte VSIX-Datei lässt sich anschließend installieren.

Das Tool vsce kann aber noch mehr. So kann es unter anderem nach Erweiterungen suchen, Metadaten ermitteln und Erweiterungen wieder aus dem Marketplace entfernen. Eine Liste aller Möglichkeiten lässt sich über vsce --help anzeigen.

Damit die eigene Erweiterung gut im Marketplace präsentiert wird, sollten alle Metadaten ordnungsgemäß vorhanden sein. Dazu gehören eine ordentliche README.md-Datei sowie eine sauber ausgefüllte package.json mit Anzeigenamen, Beschreibung, Version, Lizenz, Homepage und Repository. Relevant sind auch die Kategorien, die aus einer vorgegebenen Liste auszuwählen sind, damit Nutzer über diese Informationen die von ihnen gesuchten Erweiterungen schneller und zuverlässiger finden. Generell ist eine gute Präsentation im Marketplace wichtig, auch wenn nach Wahrnehmung des Autors die meisten Erweiterungen wohl über direkte Empfehlungen gefunden und installiert werden.

Zusätzliche Optionen für komplexe Erweiterungen

Die bisher im Artikel beschriebenen Möglichkeiten bieten bereits einigen Spielraum, um VS Code an die eigenen Bedürfnisse anzupassen. Daneben gibt es weitere Themen, mit denen komplexe Erweiterungen umsetzbar sind, die man im Hinterkopf behalten sollte.

Dazu gehört beispielsweise der Extension Host. Diese Komponente ist in VS Code für das Laden, Deaktivieren und die generelle Verwaltung von Erweiterungen zuständig. Der Host sorgt dafür, dass die Performance von VS Code nicht durch Erweiterungen beeinflusst wird oder dass etwa das User Interface auf unerlaubte Weise verändert wird. Der Host ist auch dafür zuständig, Erweiterungen verzögert beziehungsweise erst bei Bedarf zu laden.

Ein erweitertes Thema ist die Unterstützung der Remote-Entwicklung und GitHub Codespaces [12]. Über das Feature "Visual Studio Code Remote Development" lässt sich mit Sourcecode interagieren, der auf einer entfernten Maschine liegt. Dafür ist auf der lokalen Maschine die Installation von VS Code mit UI Extensions notwendig. Die Kommunikation übernimmt der lokale Extension Host. Auf dem Server ist ein VS Code Server mit Workspace Extensions und einem Remote Extension Host notwendig. Die VS-Code-APIs sind direkt so umgesetzt, dass bei einem Aufruf automatisch die korrekte Maschine adressiert wird, was die Entwicklung der eigenen Erweiterung in diesem Bereich vereinfacht.

Wer plant, eine Erweiterung für künftige Versionen von VS Code zu entwickeln, sollte einen Blick auf das sogenannte Proposed API werfen. Damit sind die geplanten Anpassungen gemeint, die der API bevorstehen. Um die Neuerungen zu nutzen, ist ein Insider-Release von Visual Studio Code erforderlich. Zusätzlich dazu ist die Einstellung "enableProposedApi": true in der package.json der eigenen Erweiterung zu setzen. Zu guter Letzt wird die Datei vscode.proposed.d.ts benötigt, in der sich die Anpassungen der API befinden. Die Datei lässt sich über das vscode-dts-CLI ins eigene Projekt integrieren [13]:

npx vscode-dts dev

Zu beachten ist, dass die Dateien vscode.proposed.d.ts und vscode.d.ts nur auf dem Main-Branch im Repository zu VS Code zueinander kompatibel sind. Bei davon abweichenden Versionsständen ist keine Kompatibilität garantiert.

Ebenfalls zu den erweiterten Möglichkeiten zählt das Language Server Protocol, mit dem sich Funktionen für einzelne Programmiersprachen unabhängig vom Editor umsetzen lassen. Die Dokumentation zu VS Code hält einen umfassenden Guide bereit, wie eine Language-Server-Erweiterung implementiert werden muss [14].

Quelloffener Allrounder mit festem Platz in der Entwickler-Community

Visual Studio Code ist sowohl ein hervorragender Editor als auch eine brauchbare Entwicklungsumgebung. Die Funktionalitäten sind umfassend und dass VS Code quelloffen und kostenfrei ist, hat offenkundig zu seiner Beliebtheit beigetragen. In vielen Communities hat sich VS Code daher einen festen Platz ergattert.

Über Erweiterungen lässt sich die Anwendung zusätzlich mit Anpassungen und Funktionen anreichern. Das gelingt bei VS Code recht einfach, denn eine Extension zu implementieren ist kein Hexenwerk. Zahlreiche Contribution Points und die VS-Code-API ermöglichen es, sich in die verschiedensten Bereiche von VS Code einzuklinken. Dadurch lassen sich auch exotische oder komplexe Anforderungen umsetzen.

Lohnt sich der Aufwand?

Ob der Aufwand sich für spezifische Anforderungen lohnt, müssen Entwicklerteams fallweise von Projekt zu Projekt beziehungsweise von Anforderung zu Anforderung entscheiden, zumal auch andere Entwicklungsumgebungen und Editoren das Einbinden von Erweiterungen erlauben. Diese Möglichkeit ist somit kein Alleinstellungsmerkmal von VS Code. Plattformen wie Eclipse, Visual Studio oder alle Entwicklungsumgebungen von JetBrains, etwa IntelliJ IDEA, WebStorm und Android Studio, bieten ebenfalls reichhaltige Erweiterungsmöglichkeiten an.

Im Marketplace von JetBrains stehen zurzeit rund 5.600 Plug-ins zur Verfügung [15]. Darunter befinden sich auch rund 90 kostenpflichtige Plug-ins, was für die eine oder andere Entscheidung zur Veröffentlichung eines Plug-ins beziehungsweise einer Erweiterung sicherlich eine Rolle spielen wird (eine aktuelle Übersicht aller kostenpflichtiger Plug-ins [16] lässt sich bei JetBrains abrufen).

Am Ende bleibt die Einsicht, dass sich VS Code seit seiner Entstehung erheblich weiterentwickelt hat und in vielen Szenarien zum Einsatz kommen kann und auch kommt. Es bleibt spannend, in welche Richtung sich die Anwendung weiterentwickelt, welche Ökosysteme noch hinzutreten und ob VS Code irgendwann auch als Cloud-IDE zur Verfügung stehen wird. Im Browser lässt sich das Werkzeug seit Ende Oktober bereits als Online-Tool verwenden [17].

Dr. Fabian Deitelhoff lebt und arbeitet in Dortmund, der Metropole des Ruhrgebiets. Am CET (Centrum für Entrepreneurship & Transfer) der TU Dortmund arbeitet er als Innovations- und Transfermanager. Er hat brickobotik gegründet und ist als Softwareentwickler sowie Autor tätig.

(sih [18])

URL dieses Artikels:
https://www.heise.de/-6281877

Links in diesem Artikel:
[1] https://www.heise.de/hintergrund/Visual-Studio-Code-Teil-2-Den-Code-Editor-durch-Erweiterungen-ausbauen-6147512.html
[2] https://code.visualstudio.com/docs/editor/extension-marketplace
[3] https://www.heise.de/hintergrund/Visual-Studio-Code-Ein-Code-Editor-fuer-alle-s-6128966.html
[4] https://www.heise.de/hintergrund/Visual-Studio-Code-Teil-2-Den-Code-Editor-durch-Erweiterungen-ausbauen-6147512.html
[5] https://www.heise.de/hintergrund/Visual-Studio-Code-Teil-3-Eigene-Erweiterungen-implementieren-6281877.html
[6] https://code.visualstudio.com/api/references/contribution-points
[7] https://code.visualstudio.com/api/references/extension-manifest
[8] https://code.visualstudio.com/api/references/vscode-api
[9] https://microsoft.github.io/language-server-protocol/
[10] https://code.visualstudio.com/api/extension-capabilities/extending-workbench
[11] https://code.visualstudio.com/api/extension-guides/debugger-extension
[12] https://code.visualstudio.com/api/advanced-topics/remote-extensions
[13] https://github.com/microsoft/vscode-dts
[14] https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
[15] https://plugins.jetbrains.com/idea
[16] https://plugins.jetbrains.com/search?isPaid=true
[17] https://www.heise.de/news/Visual-Studio-Code-laeuft-ab-sofort-im-Browser-6224465.html
[18] mailto:sih@ix.de

Copyright © 2021 Heise Medien