Visual Studio Code, Teil 3: Eigene Erweiterungen implementieren

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

In Pocket speichern vorlesen Druckansicht 11 Kommentare lesen

(Bild: r.classen/Shutterstock.com)

Lesezeit: 17 Min.
Von
  • Dr. Fabian Deitelhoff
Inhaltsverzeichnis

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, um Erweiterungen zu finden, zu installieren und zu verwalten – für vorhandene funktioniert das problemlos.

Visual Studio Code – dreiteilige Serie

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.

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 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. 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 – 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.

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, 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, 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. 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.