Moderne VS-Code-Extension-Entwicklung: Die Grundlagen

Laut den WakaTime Programming Stats 2022 ist Microsoft Visual Studio (VS) Code derzeit der beliebteste Quellcode-Editor. Obwohl VS Code oft als Quellcode-Editor kategorisiert wird, lässt er sich auch als vollwertige integrierte Entwicklungsumgebung (IDE) nutzen. Dafür müssen Sie lediglich die passenden Extensions aus dem Visual Studio Code Marketplace hinzufügen.

Der Reiz von VS Code geht weit über seine Erweiterbarkeit hinaus. Es gibt zwar unzählige Plugins, doch manchmal ist es notwendig, eine eigene Extension zu entwickeln. Genau diesem Zweck dient diese Reihe.

In diesem Teil unserer Reihe zur modernen VS-Code-Extension-Entwicklung besprechen wir verschiedene Extension-Typen, beschäftigen uns mit der typischen Architektur von VS-Code-Extensions und lernen Best Practices für ihre Entwicklung kennen. Dieser Artikel dient als Einführung und vermittelt Ihnen eine solide Grundlage, bevor wir im nächsten Beitrag tiefer in die Materie einsteigen.

Typen von VS-Code-Extensions

Im Visual Studio Code Marketplace sind Extensions und Plugins nach Gruppen geordnet, die als Extension-Typen oder -Kategorien bezeichnet werden und sich nach ihren jeweiligen Funktionen und Merkmalen richten. Am einfachsten rufen Sie diese Kategorien über die Webversion des Marketplace auf. Sie können sie aber auch in der Benutzeroberfläche der Extensions-Ansicht von Visual Studio Code aufrufen, indem Sie in der Suchleiste das Tag @category: verwenden:

Beim Durchsehen dieser Liste fragen Sie sich vielleicht, was diese Gruppierungen eigentlich bedeuten. Was macht eine Extension zu einem Formatter und eine andere zu einem Theme?

Im Folgenden finden Sie einige der gängigsten Extension-Typen im Visual Studio Code Marketplace und in der Open VSX Registry, einer offenen, von der Community getragenen Extension-Registry für Visual Studio Code (VS Code).

Themes

Mit über 10.000 Einträgen zählen Themes zu den häufigsten Extension-Typen im Visual Studio Code Marketplace. Damit können Sie das Erscheinungsbild Ihrer VS-Code-Benutzeroberfläche anpassen, einschließlich der Bereiche, Menüs und des Textbereichs.

Um alle Theme-basierten Plugins zu suchen, verwenden Sie den Filter @category:"Themes":

Einige Theme-Extensions sind speziell auf bestimmte Komponenten oder Plugins zugeschnitten. Das zuvor gezeigte Plugin C/C++ Themes bietet beispielsweise eine Auswahl visuell optimierter Themes für die C/C++-Entwicklung, darunter Verbesserungen für die semantische Einfärbung.

Farbthemes werden in der Regel mit JSON erstellt und konfiguriert und lassen sich leicht anpassen. Die Optionen workbench.colorCustomizations und editor.tokenColorCustomizations finden Sie unter Benutzereinstellungen.

Theme-Extensions erfüllen in der Regel vor allem einen kosmetischen Zweck und gehören zu den einfacheren Extensions, die sich schreiben lassen. Sie können jedoch auch die Barrierefreiheit und das allgemeine Programmiererlebnis verbessern.

Funktionale Extensions

Funktionale Extensions umfassen verschiedene Kategorien von Extensions, die VS Code zusätzliche Funktionen hinzufügen, zum Beispiel Linter (@category:"linters"), Notebooks (@category:"notebooks"), Formatter (@category:"formatters"), Tests (@category:"testing"), Visualisierungen (@category:"visualization"), Programmiersprachen (@category:"programming languages"), Debugger (@category:"debuggers") und Integrationen für das Supply-Chain-Management (SCM) (@category:"scm providers").

Da Microsoft und VS Code jedoch nur eine begrenzte Anzahl von Kategorie-Tags bereitstellen, beschreiben manche Kategorien den Zweck einer Extension möglicherweise nicht genau. Snyk Security wird beispielsweise als Linter- und Programmiersprachen-Extension kategorisiert. Die Snyk Security-Extension mag wie ein Linting-Tool wirken, kann aber viel mehr. Ihr Hauptziel ist es, Ihre Softwareentwicklungsprojekte sicherer zu machen. Sie scannt nach Open-Source-Schwachstellen, Code-Schwachstellen, Lizenzproblemen, unsicheren Konfigurationen für Infrastructure as Code (IaC) und mehr: Snyk Security

Tatsächlich können VS-Code-Plugins wie Snyk Security auch die Entwicklung von Extensions verbessern. Snyk kann automatisch überprüfen, ob die Abhängigkeiten Ihrer Extension sicher sind, sicherstellen, dass Ihre Projekte korrekt konfiguriert sind, und die Qualität und Sicherheit Ihres Codes validieren.

Code-Snippets und Tastenkürzel

Mit Extensions für Snippets und Tastenkürzel können Sie die Funktionen für VS-Code-Tastenbelegungen (@category:"keymaps") und Code-Snippets (@category:"snippets") anpassen. REST Client ist beispielsweise eine mehrsprachige Extension, die Snippets und Vorlagen für HTTP-Anfragen generiert:

Im Gegensatz dazu fügt Eclipse Keymap VS Code die Tastenbelegungen der Eclipse IDE hinzu. Das ist nützlich für Java-Entwickler, die Eclipse als primäre IDE verwenden und möglicherweise zu VS Code wechseln möchten:

Pakete

Es gibt zwei Arten von Paketen: Language Packs (@category:"language packs") und Extension Packs (@category:"extension packs"). Language Packs enthalten Lokalisierungsdaten wie Textübersetzungen und Tastatureingaben. Mit dem Language Pack für Chinesisch (vereinfacht) (简体中文) können Sie beispielsweise die Standardsprache der VS-Code-Benutzeroberfläche auf vereinfachtes Chinesisch umstellen.

In VS Code können Sie die Anzeigesprache auch nach der Installation des Language Packs ändern. Wenn Sie bei Übersetzungen mithelfen und zur Erstellung eines Language Packs beitragen möchten, können Sie sich am Lokalisierungsprojekt der VS-Code-Community beteiligen.

Extension Packs bestehen außerdem aus mehreren Extensions, die in einer Installation gebündelt sind. Sie folgen meist einem bestimmten Thema oder bieten Ihnen eine Entwicklungsumgebung für den schnellen Einstieg. Das Python Extension Pack enthält beispielsweise die Extension Python for VS Code sowie Python Environment Manager, Python Indent und autoDocstring - Python Docstring Generator.

Wenn Sie auf die Schaltfläche Installieren des Python Extension Packs klicken, installiert VS Code gleichzeitig alle Extensions des Pakets, die noch nicht installiert sind:

Extension Packs ersparen Ihnen letztlich den separaten Download mehrerer Extensions. Das ist besonders praktisch, wenn Sie Arbeitsbereiche für Programmiersprachen einrichten, die Microsoft nicht direkt oder offiziell unterstützt. Außerdem können Sie damit alle Ihre benutzerdefinierten VS-Code-Extensions bündeln.

Sobald Sie sich für den Typ der zu entwickelnden Extensions entschieden haben, können Sie mit der Planung der Struktur beginnen.

Die typische Architektur von VS-Code-Extensions

Der VS Code Extension Host ist für die Ausführung von Extensions zuständig. Anhand des Manifests der Extension (package.json) ermittelt er den Speicherort des Extension-Einstiegspunkts und führt die Extension entsprechend ihren Aktivierungsereignissen aus. Diese Aktivierungsereignisse werden ebenfalls in der Manifestdatei deklariert. Damit können Sie Auslöser für Ihre Extensions festlegen, etwa die Ausführung eines Befehls oder die Auswahl einer bestimmten Sprache.

Die Datei package.json enthält außerdem eine Liste von Abhängigkeiten, die für Ihr Extension-Projekt wichtig sind. Dazu gehört das Modul @types/vscode, über das Sie die VS-Code-Extension-API einbinden können.

Bitte beachten Sie: Das Modul @types/vscode ersetzt das Paket `vscode-extension-vscode`. Letzteres ist veraltet und sollte weder in Ihrer Datei package.json noch an anderer Stelle in Ihrem Projekt referenziert werden.

Das Extension-Manifest enthält außerdem eine Reihe von Contribution Points. Damit können Sie steuern, wie die Funktionen Ihrer Extension über VS Code aufgerufen werden, zum Beispiel indem Sie einen Befehl oder Menüeintrag festlegen, über den sich Ihre Extension aufrufen lässt.

Die Einstiegspunktdatei der Extension enthält deren Kernverhalten. Sie verwendet hauptsächlich das Modul vscode, das in Ihrer Extension immer als Erstes importiert werden sollte:

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

Das Modul vscode enthält die VS-Code-API und stellt eine Reihe von Schnittstellen bereit, mit denen Sie die Funktionalität von VS Code erweitern können. Dazu gehört auch die Extension-Schnittstelle mit den Funktionen, die Sie zum Verwalten, Konfigurieren und Erstellen von Extensions benötigen.

Mit der Methode activate der Extension-Schnittstelle legen Sie fest, was Ihre Extension bei der Aktivierung tut. Sie ist der nächste Schritt in der Einstiegspunktdatei:

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

Dieser Code funktioniert ähnlich wie ein Event-Handler: Er deklariert eine Reihe von Befehlen, die bei einem Ereignis ausgeführt werden. Außerdem können Sie einen Aufruf und Export für die Funktion deactivate hinzufügen:

export function deactivate(context: vscode.ExtensionContext) {}

Damit können Sie nach der Aktivierung beziehungsweise Ausführung Ihrer Extension Aufräumarbeiten vornehmen.

Einstiegspunktdateien können in TypeScript oder JavaScript geschrieben werden. Es wird jedoch empfohlen, TypeScript zu verwenden. In jedem Fall sollten sowohl TypeScript- als auch JavaScript-Extension-Projekte eine config-Datei enthalten. Sie kennzeichnet ein Verzeichnis als Stammordner Ihres Projekts und hilft dem Compiler, es zu finden. Die config-Datei enthält außerdem verschiedene Eigenschaften und Compiler-Flags. Für TypeScript-Projekte müssen Sie die Datei tsconfig.json und für JavaScript-Projekte die Datei jsconfig.json verwenden.

Im Ordner .vscode Ihres Extension-Projektverzeichnisses befinden sich außerdem zwei weitere Dateien:

1. tasks.json

Mit tasks.json definieren Sie eine Reihe von ordner-, projekt- oder arbeitsbereichsspezifischen Tasks, die VS Code bei entsprechender Auslösung ausführen soll. Diese Tasks bestehen hauptsächlich aus Anweisungen und Konfigurationen zum Erstellen des Projekts. Da VS Code seine Extensions beispielsweise mit Paketmanagern wie npm erstellt, enthält die Datei tasks.json Ihres Extension-Projekts normalerweise einen Verweis darauf, etwa so:

	"type": "npm",
	"script": "watch",
	"problemMatcher": "$ts-webpack-watch",
	"isBackground": true,
	"presentation": {
		"reveal": "never",
		"group": "watchers"
	},
	"group": {
		"kind": "build",
		"isDefault": true
	}

Dieses Beispiel für tasks.json definiert einen Build-Watcher, der die Kompilierungsprozesse Ihres Projekts auf Fehler und Warnungen überwacht. Das Skript nutzt vor allem npm, um den ts-webpack-watch-Problem-Matcher auszuführen und zu paketieren.

2. launch.json

Mit launch.json legen Sie fest, wie VS Code Ihre Extensions nach dem Build ausführen oder debuggen soll. Die Datei enthält Informationen zur Laufzeitumgebung Ihrer Extension:

"configurations": [
    {
        "name": "Run Extension",
        "type": "extensionHost",
        "request": "launch",
        "args": [
            "--extensionDevelopmentPath=${workspaceFolder}"
        ],
        "outFiles": [
            "${workspaceFolder}/dist/**/*.js"
        ],
        "preLaunchTask": "${defaultBuildTask}"
    },
]

Dieses Beispiel für launch.json zeigt eine Konfiguration mit Anweisungen zum Starten einer VS-Code-Extension. Dazu gehört auch der Speicherort des Quellcodes und der paketierten ausführbaren Dateien.

Ein einfaches Extension-Projektverzeichnis sieht etwa so aus:

Project Parent Folder
├── .vscode
│   ├── launch.json     
│   └── tasks.json                
├── src
│   └── extension.ts    //Extension Entry File
├── package.json       	//Manifest
├── tsconfig.json  

Best Practices für die Entwicklung von VS-Code-Extensions

Aufgrund des Aufbaus von VS-Code-Extensions übersehen Entwickler möglicherweise einige Grundlagen. Wenn Sie Ihre Extensions jedoch effektiv entwickeln möchten, sollten Sie bestimmte Prinzipien beachten. Dazu gehören die folgenden Best Practices:

Testen Sie Ihre Extensions gründlich

Wenn Sie Ihre Extension(s) in einem der unterstützten Visual Studio Code Marketplace veröffentlichen möchten, sollten Sie fehlerhaften Code unbedingt vermeiden. Testen Sie Ihre Extension daher gründlich mit verschiedenen Software-Testmethoden, zum Beispiel mit Unit-Tests (sofern anwendbar) und strengen Szenariotests.

Für das Testen Ihrer VS-Code-Extensions müssen Sie keine externen Plugins oder Bibliotheken verwenden. VS Code stellt Ihnen jedoch eine Reihe von Mechanismen und Tools für Integrationstests zur Verfügung. Insbesondere können Sie mit dem Extension Development Host Ihre Extensions in einer separaten Umgebung testen, unabhängig von der offiziellen VS-Code-Instanz.

Denken Sie daran: Nutzer bewerten und rezensieren Extensions im Visual Studio Code Marketplace. Deshalb ist es wichtig, Ihre Extensions gründlich zu testen. Setzen Sie den Ruf Ihrer Marke nicht aufs Spiel, indem Sie ein fehlerhaftes oder ungesichertes Produkt bereitstellen.

Speichern Sie sensible Daten so sicher wie möglich

VS Code hat die Art und Weise, wie Nutzerdaten gespeichert und verwaltet werden, weiterentwickelt. Vor der Einführung von VS Code 1.53 wurden Nutzerinformationen über die Schnittstelle ExtensionContext verwaltet. Diese Lösung war jedoch nicht effizient.

Heute verwenden Sie sensible Informationen in VS Code am besten mit dem Hilfsprogramm SecretStorage.

Halten Sie sich an die UX-Richtlinien von Microsoft für VS Code

Microsoft hat Richtlinien für die Benutzererfahrung (UX) veröffentlicht, die dafür sorgen, dass Erweiterungen mit der Architektur und den Standards von VS Code übereinstimmen. Es empfiehlt sich, sich mit allen Richtlinien vertraut zu machen. Achten Sie dabei besonders auf diejenigen, die für die Funktionen Ihrer Erweiterung relevant sind.

Auch wenn Ihre Erweiterung keine komplexen visuellen Komponenten wie Webviews umfasst, sind ihre Kernfunktionen möglicherweise komplex genug, um einen geführten Rundgang zu rechtfertigen. Ein Rundgang ist ein interaktives Tutorial für den Einstieg und hilft neuen Nutzenden, sich mit den Funktionen Ihrer Erweiterung vertraut zu machen. Als Best Practice sollten Entwicklerinnen und Entwickler generell dafür sorgen, dass ihre Software gut dokumentiert ist – sowohl im Code als auch in der Anwendung.

Sorgen Sie außerdem dafür, dass der Einstieg so einfach wie möglich ist. Dazu gehören die erforderlichen Bilder und visuellen Hinweise. Microsoft empfiehlt SVGs mit der Theme-Farbe der VS Code API.

Die besten VS Code-Erweiterungen fügen sich so nahtlos in die Benutzeroberfläche ein, dass sie kaum von den Kernfunktionen von VS Code zu unterscheiden sind.

Bündeln Sie Ihre Erweiterungen

Da VS Code zu Microsoft gehört, vergisst man leicht, dass VS Code und seine Varianten plattformübergreifende Anwendungen sind. Neben Windows ist VS Code auch für die neuesten Versionen von macOS sowie für Linux-Distributionen auf Basis von Debian und Red Hat verfügbar. Ihre Erweiterungen sollten daher den Grundprinzipien von VS Code folgen und auf allen Plattformen funktionieren, die VS Code unterstützen.

Am besten gelingt das durch Bundling. Microsoft empfiehlt, esbuild zum Bündeln Ihrer VS Code-Erweiterungen zu verwenden, da es schnell und effizient ist. webpack ist eine weitere gute Alternative.

Da Platform as a Service (PaaS) immer beliebter wird, sollten Sie außerdem sicherstellen, dass Ihre Erweiterungen mit Visual Studio Code für das Web kompatibel sind. Nur gebündelte Erweiterungen funktionieren nahtlos mit dieser webbasierten Version.

Außerdem können sowohl esbuild als auch webpack Ihren Code minimieren. Bei der Minifizierung werden überflüssige Textbestandteile entfernt und die Namen von Elementen (d. h. Methoden/Funktionen und Variablen) geändert. Das kann jedoch das Verhalten Ihres Codes beeinflussen. So kann Quellcode, der die Funktionen Function.prototype.name und toString() verwendet, nach der Minifizierung fehlerhaft funktionieren.

Tatsächlich stoßen viele Minifier auf solche Einschränkungen. Wenn Sie vermuten, dass der webpack-Minifier Probleme in Ihrem Code verursacht, können Sie ihn vorübergehend deaktivieren, bis Sie die Ursache gefunden haben.

Im Gegensatz dazu führt esbuild keine Minifizierung durch, sofern Sie dies nicht ausdrücklich anweisen – etwa mit dem Flag --minify flag. So behalten Sie mehr Kontrolle über den Minifizierungsprozess.

Entwicklerinnen und Entwickler sollten außerdem darauf achten, dass kritische Abhängigkeiten für das Bundling optimiert sind. Dynamische Abhängigkeiten können beim Bündeln zu Fehlern führen. Deklarieren Sie solche Abhängigkeiten entweder statisch oder schließen Sie sie mithilfe von externals aus. Mit Snyks dependency-check können Sie diesen Prozess vereinfachen.

Schützen Sie Ihre Erweiterungen

Der Visual Studio Code Marketplace scannt neue Erweiterungen und Updates aktiv auf schädliche Inhalte. Außerdem können VS Code-Nutzende unsichere Erweiterungen über den Link Missbrauch melden melden. Trotz dieser Vorsichtsmaßnahmen ist der Visual Studio Code Marketplace jedoch nicht frei von schädlichen Inhalten.

Eine von Snyk veröffentlichte Untersuchung ergab, dass es im Visual Studio Code Marketplace mehrere verwundbare Erweiterungen gab, durch die Systeme verschiedenen Angriffen ausgesetzt werden konnten, etwa Server-Side Request Forgery und Directory Traversal.

Viele dieser Erweiterungen werden nicht in böser Absicht entwickelt. Die Entwicklerinnen und Entwickler räumen der Sicherheit schlicht keine Priorität ein, weil sie die Risiken nicht kennen oder ihnen die Zeit fehlt. Sicherheitsmaßnahmen sollten früh im Entwicklungszyklus berücksichtigt und umgesetzt werden.

Das mag zunächst nach einer großen Herausforderung klingen. Dank Tools wie Snyk müssen Sie jedoch keine eigenen Sicherheitspraktiken und Prüfungen entwickeln. Snyk bietet einen kostenlosen Tarif, sodass sich alle Entwicklerinnen und Entwickler die Nutzung und Integration der Kernfunktionen leisten können.

Snyk weiß außerdem, dass moderne Softwareentwicklung schnelllebig ist. Wenn Sie Ihr GitHub- oder Google-Profil verknüpfen, können Sie bei Snyk ganz einfach ein neues Konto erstellen. Außerdem sind Sie nicht auf die Snyk-Weboberfläche beschränkt, um sich zu authentifizieren oder auf Snyk-Funktionen zuzugreifen. Sie können auch die Snyk CLI oder eine der vielen anderen Integrationen verwenden, darunter die VS Code-Erweiterung:

Sie kann nicht nur Ihren geschriebenen Code auf Sicherheitsprobleme prüfen, sondern auch die Module und Bibliotheken, von denen Ihr Code abhängt. Die Benutzeroberfläche der Snyk-VS Code-Erweiterung ist eine kompakte Version der Weboberfläche. Sie ist in viele Elemente der VS Code-Benutzeroberfläche integriert, darunter Diagnosen, die Probleme-Ansicht/das Panel und den Editor. Damit sehen Sie, welche Zeilen Ihres Codes Ihre Erweiterung potenziellen Angriffen aussetzen:

Einige Ihrer Module oder Abhängigkeiten laufen nach der Veröffentlichung Ihrer Erweiterung möglicherweise in einer Sandbox. Daher müssen Sie sie nicht immer manuell absichern. Im Analysebereich von Snyk können Sie beispielsweise Zeilen oder Dateien ignorieren, die Sie für die Sicherheit Ihres Projekts als irrelevant einstufen:

Standardmäßig überwacht und scannt die Snyk-VS-Code-Erweiterung Ihr Projekt automatisch während der Entwicklung. Sie können die Erweiterung jedoch auch so konfigurieren, dass sie zu einem von Ihnen festgelegten Zeitpunkt und auf die gewünschte Weise ausgeführt wird:

Letztlich entscheiden Sie, wie sich die Erweiterung in Ihren Workflow einfügt.

Fazit

Dieser Leitfaden vermittelt Ihnen das nötige Wissen für den Einstieg in die Entwicklung von VS Code-Erweiterungen. Sie haben sich mit ihrem grundlegenden Aufbau beschäftigt und erfahren, wie das Erweiterungsmanifest mit der Einstiegsdatei verknüpft ist. Außerdem haben Sie einige Best Practices für den Einstieg kennengelernt.

Besonders wichtig ist, dass Ihre Erweiterungen den UX-Standards von Microsoft entsprechen und sicher sind. Mit Snyk, der Security-Plattform für Entwicklerinnen und Entwickler, können Sie prüfen, ob Ihre Erweiterungen auf hochwertigem Quellcode und sicheren Abhängigkeiten basieren. Snyk bietet zahlreiche Integrationen, darunter ein VS Code-Plug-in, mit dem Sie Qualitäts- und Sicherheitsprüfungen für Ihre Projekte durchführen und automatisieren können.