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