Moderne VS-Code-Erweiterungen entwickeln: Tutorial zum Erstellen einer sicheren Erweiterung

Der große Erfolg und Einfluss von Microsoft Visual Studio (VS) Code ist zu einem großen Teil seiner Erweiterbarkeit zu verdanken. VS Code wird zwar oft als Code-Editor eingeordnet, kann mit dem richtigen Wissen und den passenden Erweiterungen aber noch viel mehr. So lässt es sich beispielsweise auch als Webbrowser, Textverarbeitungsprogramm oder Dateiverwaltungssystem verwenden. Microsoft ermutigt Entwickler außerdem, die Erweiterbarkeit von VS Code zu nutzen, indem das Unternehmen die VS-Code-API so zugänglich wie möglich macht.

Die Entwicklung von VS-Code-Erweiterungen hat seit der ersten Veröffentlichung des Tools im Jahr 2016 große Fortschritte gemacht. Sie ist jetzt schlanker und entwicklerfreundlicher. Dennoch sollten Sie einige Besonderheiten und bewährte Vorgehensweisen kennen, bevor Sie mit der Entwicklung Ihrer eigenen Erweiterung beginnen.

In unserem ersten Blogbeitrag zur modernen Entwicklung von VS-Code-Erweiterungen haben wir die Grundlagen der VS-Code-Entwicklung behandelt, darunter die Architektur und die verschiedenen Erweiterungstypen, die Sie erstellen können. In diesem Artikel erfahren Sie, wie Sie dieses Wissen anwenden und Ihre ganz eigene VS-Code-Erweiterung erstellen und programmieren.

Eine VS-Code-Erweiterung erstellen

In diesem Tutorial lernen Sie, wie Sie eine vielseitige VS-Code-Erweiterung erstellen, und erfahren dabei, wie sich verschiedene Erweiterungstypen implementieren lassen. Das fertige Projekt finden Sie in diesem GitHub-Repository.

Das Grundgerüst Ihres VS-Code-Erweiterungsprojekts erstellen

Für dieses Tutorial benötigen Sie einige Tools. Stellen Sie zusätzlich zu VS Code, VS Codium oder VS Code Insiders sicher, dass Sie die folgenden Tools installiert haben:

• Node.js

• Git

Mit diesen Tools installieren Sie Yeoman und den VS-Code-Erweiterungsgenerator. Dieser Generator erstellt ein Grundgerüst für Ihre Erweiterung, sodass Sie nicht alles von Grund auf neu schreiben müssen. Wenn Sie Ihr Projekt mit TypeScript erstellen (für diesen Blogbeitrag empfohlen), sollten Sie auch den TypeScript + Webpack Problem Matcher installieren. Damit lassen sich Programmierfehler leichter finden und zuordnen.

Sobald Node.js und Git installiert sind, öffnen Sie einen Befehlszeileninterpreter Ihrer Wahl (Eingabeaufforderung, PowerShell, Terminal usw.) und führen Sie den folgenden Befehl aus:

npm install -g yo generator-code

Die Installation von Yeoman und des zugehörigen VS-Code-Erweiterungsgenerators dauert einen Moment:

Navigieren Sie nach Abschluss der Installation im Terminal zu Ihrem Projektordner (in dem Sie Ihr Projekt speichern möchten) und führen Sie den folgenden Befehl aus:

yo code

Dadurch wird die Yeoman-CLI gestartet. Sie werden aufgefordert, den Projekttyp auszuwählen, für den ein Grundgerüst erstellt werden soll. Wir empfehlen die Option New Extension (TypeScript). Wenn Sie sich mit JavaScript besser auskennen, wählen Sie stattdessen die zweite Option:

Anschließend fordert Sie der Generator auf, Ihrer Erweiterung einen Namen zu geben. Wählen Sie einen einfachen Namen wie „My Editor Tools“. Außerdem müssen Sie eine Kennung für Ihre Erweiterung angeben, zum Beispiel editor-tools.

Geben Sie als Beschreibung Ihrer Erweiterung Folgendes ein: „A collection of simple editing tools for VS Code.“ Entscheiden Sie anschließend, ob Sie ein Git-Repository für Ihr Projekt initialisieren möchten. Sie können das auch später manuell erledigen.

Nun werden Sie gefragt, ob Sie Ihren Quellcode mit webpack bündeln möchten. Bestätigen Sie dies und wählen Sie anschließend npm als Paketmanager:

Der Erweiterungsgenerator benötigt einen Moment, um das Grundgerüst Ihres Projekts zu erstellen. Anschließend werden Sie gefragt, ob Sie das Projekt in der auf Ihrem System verfügbaren VS-Code-Version öffnen möchten. Bestätigen Sie dies mit der Taste Enter. Dadurch wird der Quellcode des Projekts in einem neuen VS-Code-Fenster geöffnet:

Hinweis: In diesem Tutorial kommen Visual Studio Code 1.79, npm 9.5.1 und Yeoman 4.3.1 zum Einsatz. Der Prozess zur Projektinitialisierung kann je nach verwendeten Versionen leicht abweichen. Passen Sie die Schritte bei Bedarf entsprechend an. Wenn Sie keine CLIs verwenden möchten und eine grafische Einrichtung bevorzugen, installieren Sie für zukünftige Projekte den Yeoman Application Wizard.

Das Projekt vorbereiten

Je nach Yeoman-Version wurde das Projekt möglicherweise mit einem Verweis auf das Modul vscode in der Datei package.json erstellt. Dieses Modul wird zwar noch häufig verwendet, ist aus Sicherheitsgründen jedoch veraltet. Falls das auf Ihr Projekt zutrifft, müssen Sie es aktualisieren.

Zur Vorbereitung des Projekts müssen Sie zunächst sicherstellen, dass das Paket @types/vscode installiert und in Ihrem Projekt als Entwicklungsabhängigkeit angegeben ist. Öffnen Sie im VS-Code-Explorer die Datei package.json Ihres Projekts. Sie enthält alle Abhängigkeiten des Projekts.

Scrollen Sie in der geöffneten Datei package.json nach unten, bis Sie das Objekt `"devDependencies"` erreichen. Vergewissern Sie sich, dass darin der Schlüssel-Wert-Eintrag "@types/vscode": [version], definiert ist:

Außerdem muss die Versionsnummer des Pakets @types/vscode mit der Engine-Version von VS Code übereinstimmen. Scrollen Sie dazu in der Datei package.json nach oben, bis Sie das Objekt "engines" erreichen. Die Versionsnummer der VS-Code-Engine steht neben dem Schlüssel "vscode":

Wenn die Versionsnummer von @types/vscode nicht mit der Engine-Version übereinstimmt, ändern Sie die Versionsnummer von @type/vscode manuell, damit sie übereinstimmt.

Falls das Paket @types/vscode vollständig in der Datei package.json` fehlt, versuchen Sie nicht, es manuell herunterzuladen und hinzuzufügen. Lassen Sie stattdessen npm die erforderlichen Pakete installieren und konfigurieren. Öffnen Sie dazu das Befehlszeilenterminal, navigieren Sie zum Stammordner Ihres Projekts (cd editor-tools) und geben Sie den folgenden Befehl ein:

npm install --save-dev @types/vscode

Überprüfen Sie die Datei package.json erneut und stellen Sie sicher, dass sie auf alle erforderlichen Module verweist. Zur Erinnerung: Es ist wichtig, dass Ihr Projekt das richtige vscode-Modul verwendet, damit Sie Ihre Erweiterung mit möglichst sicheren Bibliotheken entwickeln. So stellen Sie sicher, dass Ihre benutzerdefinierte Erweiterung sicher ist.

Die Entscheidung, das alte VS-Code-npm-Paket zu aktualisieren und aufzuteilen, sodass zwei separate Pakete entstanden, hatte verschiedene Gründe. Ein wichtiger Grund war, dass das ursprüngliche Paket transitive Abhängigkeiten zu einem kompromittierten Paket namens event-stream enthielt. Die Änderung sollte die Sicherheit der VS-Code-Module verbessern, aber auch die Leistung steigern, die Komplexität verringern und neue Funktionen einführen.

Sie sollten Ihr Projekt jedoch weiterhin ersten Sicherheits- und Qualitätsprüfungen unterziehen. So stellen Sie sicher, dass das Grundgerüst Ihres Projekts korrekt und sicher erstellt wurde.

Ihr Projekt überprüfen

Mit Snyk können Sie die Sicherheit der Projektinstallation überprüfen. Am einfachsten integrieren Sie die Snyk-Tools in Ihre VS-Code-Workflows, indem Sie nach der Registrierung für ein kostenloses Snyk-Konto die Snyk-Erweiterung installieren.

Öffnen Sie nach der Installation der Snyk-Erweiterung das Fenster Extensions und suchen Sie nach „Snyk“. Installieren Sie unbedingt die Version release. Sie sollte in den Suchergebnissen an erster Stelle stehen:

Alternativ können Sie die offizielle Snyk-Erweiterung über die Webversion des Visual Studio Code Marketplace hinzufügen.

Nach Abschluss der Installation müssen Sie sich authentifizieren und Ihre VS-Code-Erweiterung mit Ihrem Snyk-Konto verbinden. Klicken Sie in der primären Seitenleiste auf das Snyk-Symbol und anschließend auf Trust workspace and connect:

Ihr Standardbrowser sollte die Snyk-Authentifizierungsseite öffnen. Klicken Sie auf die große grüne Schaltfläche Authenticate. Nach erfolgreicher Authentifizierung zeigt Snyk eine Meldung an, die bestätigt, dass Ihr Konto authentifiziert wurde und Snyk jetzt einsatzbereit ist.

Wir empfehlen Ihnen, die offizielle Dokumentation zur Konfiguration der Snyk-VS-Code-Erweiterung zu lesen und Ihre Erweiterung entsprechend zu konfigurieren. Laden Sie VS Code anschließend am besten neu oder starten Sie es neu. Kehren Sie dann in VS Code zur Benutzeroberfläche der Snyk-Erweiterung zurück und klicken Sie auf die Schaltfläche Enable Snyk Code and Start Scanning (falls sie nicht verfügbar ist, lesen Sie den folgenden Hinweis).

Hinweis: Wenn die Schaltfläche nicht verfügbar ist, sollte Snyk Ihr Projekt automatisch scannen. Außerdem fordert VS Code Sie möglicherweise auf, zu bestätigen, dass Sie dem Projektordner vertrauen. Das ist normal. Klicken Sie in diesem Fall auf Trust Folder and Continue.

Wenn Sie die Standardeinstellungen der Snyk-Erweiterung verwenden, sollte Snyk automatisch die Scans Open Source Security und Configuration ausführen. Im Bereich Code Security and Quality des Snyk-Panels sollte die Schaltfläche Enable Snyk Code and start analysing angezeigt werden. VS Code zeigt möglicherweise auch eine Schaltfläche Enable Snyk Code an:

Wenn Sie auf eine der beiden Schaltflächen klicken, wird die Seite Snyk Code Settings geöffnet. Dort finden Sie eine kurze Beschreibung von Snyk Code. Klicken Sie nach dem Lesen auf Save changes:

Kehren Sie zur VS-Code-Benutzeroberfläche und zum Snyk-Panel zurück. Nach wenigen Augenblicken sollten dort die Bereiche Code Security und Code Quality angezeigt werden und der Scan beginnen.

Das Erweiterungs-Panel besteht aus vier Bereichen:

1. Open-Source-Sicherheit

2. Codesicherheit

3. Konfiguration

4. Codequalität

Wenn die Funktionen Code Security und Code Quality nicht automatisch mit dem Scannen beginnen, müssen Sie möglicherweise neben den jeweiligen Titeln auf die Schaltfläche Play klicken. Die Schaltfläche Play wird angezeigt, wenn Sie den Mauszeiger über einen Bereich bewegen, und ermöglicht es Ihnen, das Projekt erneut zu scannen:

Nach dem ersten Scan sollte der Scanner Open Source Security and Configuration keine Ergebnisse zurückgeben, also keine Schwachstellen oder Probleme finden. Unter Code Security und Code Quality werden jedoch einige Probleme und Schwachstellen angezeigt:

Klappen Sie die Analyseergebnisse aus, um eine detailliertere Ansicht zu erhalten. Die meisten Probleme sind vernachlässigbar, da sie in Ihren Abhängigkeiten gefunden werden. Sie können diese Dateien zwar ändern, sollten sie aber besser überspringen.

Sehen Sie sich im Bereich Analysis Results die Warnmeldungen an und ignorieren Sie sie oder legen Sie bei Bedarf Ausnahmen fest (zum Beispiel für externe Projektmodule). Nachdem Sie das Projekt vorbereitet haben, führen Sie die Erweiterung aus und sehen Sie, was passiert.

Ihre Erweiterung ausführen

Navigieren Sie zum Ausführen Ihrer Erweiterung im VS-Code-Explorer zur Datei Editor-Tools/src/extension.ts. Wenn Sie mit objektorientierten Entwurfsmustern für Programmiersprachen wie C# und Java vertraut sind, funktioniert diese Datei ähnlich wie eine main-Klasse.

Ihre Datei extension.ts sollte Beispielcode enthalten, der vom Yeoman-VS-Code-Erweiterungsgenerator erstellt wurde. Drücken Sie die Taste F5, um diesen Code und alle weiteren Änderungen aus dem vorherigen Abschnitt zu testen.

Hinweis: VS Code fordert Sie möglicherweise auf, eine Buildaufgabe festzulegen. Dies passiert üblicherweise, wenn in Ihrer Datei tasks.json keine Standardaufgabe festgelegt ist. Wählen Sie in diesem Fall npm: compile als Buildaufgabe aus.

Bevor VS Code den Extension Development Host startet, wird möglicherweise ein Fehlerdialog angezeigt, der Sie darauf hinweist, dass nach der Ausführung der Pre-Launch-Aufgabe npm: watch Fehler aufgetreten sind. Das ist völlig normal. Aktivieren Sie das Kontrollkästchen Remember my choice in user settings und klicken Sie anschließend auf Debug Anyway:

Öffnen Sie nach dem Start des Extension Development Host die Command Palette, indem Sie Ctrl + Shift + P (Windows) oder Shift + Command + P (Mac) drücken. Geben Sie anschließend den Befehl Hello World in das Textfeld der Command Palette ein. Dadurch wird unten rechts eine kleine Pop-up-Meldung angezeigt:

Schließen Sie den Development Host, um die Ausführungs-/Debugsitzung der Erweiterung zu beenden. Im nächsten Abschnitt erstellen Sie endlich Ihre Erweiterung.

Ihre Erweiterung erstellen und ändern

In diesem Abschnitt erstellen Sie eine einfache Funktion, mit der sich Text in den aktiven Texteditor von VS Code einfügen lässt. Im Prinzip funktioniert sie ähnlich wie die Auto-Ausfüllen-Funktion in Anwendungen wie Excel.

Klicken Sie zunächst im Datei-Explorer von VS Code auf Ihr Projektverzeichnis für den Quellcode (SRC), fügen Sie eine neue Datei hinzu und nennen Sie sie AutoFillExtension.ts:

Fügen Sie den folgenden Code in Ihre Datei AutoFillExtension.ts ein:

1import * as vscode from 'vscode';
2
3export function autofillMyAddress() {
4    //Retrieve the currently active text editor
5    const editor = vscode.window.activeTextEditor;
6    //Check if the editor is undefined
7    if (editor) {
8        //Insert text at the current position using an edit builder
9        editor.edit(editBuilder => {
10            editBuilder.insert(editor.selection.active,'Street 6260-112 Glenwood Ave'
11            +'\nCity/Town   Raleigh'
12            +'\nState/Province/Region   Nebraska'
13            +'\nZip/Postal Code 27612'
14            +'\nPhone Number    (919) 785-2864'
15            +'\nCountry United States'
16            +'\nLatitude    35.859171'
17            +'\nLongitude   -78.703853');
18        });
19    }
20}

Dieser Code deklariert und exportiert eine Funktion namens autoFillMyAddress. Die Funktion ruft über den window-Namespace der VS-Code-API den aktuell aktiven Texteditor ab (das Editorfenster, das gerade den Fokus hat). Bevor sie Text hinzufügt – eine zufällig generierte, fiktive Adresse –, prüft sie, ob tatsächlich ein aktiver Editor vorhanden ist. Zum Einfügen verwendet sie eine Instanz der Klasse TextEditorEdit.

Nachdem Sie Ihre Erweiterung erstellt haben, müssen Sie sie registrieren und aufrufen. Navigieren Sie dazu im Datei-Explorer von VS Code zu Ihrer Datei package.json. Fügen Sie einen Contribution Point hinzu, damit sich die Funktion Ihrer Erweiterung über die Benutzeroberfläche von VS Code als Befehl aufrufen lässt.

Scrollen Sie in der Datei package.json langsam nach unten, bis Sie zum Objekt "contributes" gelangen. Ersetzen Sie das Array "command" einschließlich seiner Werte durch den folgenden Code:

"commands": [
    {
        "command": "editor-tools.fillAddress",
        "title": "Fill Address"
    }
]

Kehren Sie zur Datei extension.ts Ihres Projekts zurück und ersetzen Sie ihren Inhalt durch Folgendes:

1// The module 'vscode' contains the VS Code extensibility API
2// Import the module and reference it with the alias vscode in your code below
3import * as vscode from 'vscode';
4import * as autofill from './AutoFillExtension';
5
6// This method is called when your extension is activated
7// Your extension is activated the very first time the command is executed
8export function activate(context: vscode.ExtensionContext) {
9    let disposable = vscode.commands.registerCommand('editor-tools.fillAddress',autofill.autofillMyAddress);
10
11    context.subscriptions.push(disposable);
12}
13
14// This method is called when your extension is deactivated
15export function deactivate() {}

Dieser Code importiert das Modul AutoFillExtension als Objekt autofill. Anschließend wird mit activate der Befehl der Erweiterung registriert und die Erweiterung zur Abonnementliste des ExtensionContext hinzugefügt. Sobald die Erweiterung deaktiviert wird, gibt VS Code sie frei.

Jetzt ist es an der Zeit, Ihre Erweiterung zu debuggen und auszuführen (F5). Öffnen Sie dazu eine vorhandene oder neue Datei eines beliebigen bearbeitbaren Typs. Öffnen Sie dann die Befehlspalette und geben Sie den Befehl Fill Address ein:

Jetzt bringen wir Ihre Erweiterung auf die nächste Stufe und nutzen die Diagnosefunktionen von VS Code. Mit dieser zusätzlichen Funktionalität kann Ihre Erweiterung das aktuelle Dokument auf ein bestimmtes Kriterium prüfen. Wird das Kriterium nicht erfüllt, zeigt Ihre Erweiterung eine Fehlermeldung an.

Schließen Sie den Extension Development Host und erstellen Sie im Ordner src eine neue Erweiterungsdatei namens LineDiagnosticExtension.ts. Fügen Sie den folgenden Inhalt ein:

1import * as vscode from 'vscode';
2
3export function updateDiagnostic(collection: vscode.DiagnosticCollection) {
4    //clears previous errors
5    collection.clear;
6    //fetches current active text editor
7    let editor = vscode.window.activeTextEditor;
8    //ensures that active text editor is not undefined
9    if (editor) {
10        //fetches the document from the active text editor
11        let document = editor.document;
12        //fetches the number of lines
13        let lineCount = document.lineCount;
14        //verifies that the line count is not less than 8
15        if (lineCount < 8) {
16            //specifies the range to highlight and display errors over
17            const diagnosticrange = new vscode.Range(new vscode.Position(0, 0), new vscode.Position(lineCount-1, 10));
18            //sets the properties of VSCode's diagnostic features
19            collection.set(document.uri, [{
20                code: '',
21                message: 'Document has only ' + lineCount + ' line(s). The document must have at least 8 lines',
22                range: diagnosticrange,
23                severity: vscode.DiagnosticSeverity.Error,
24                source: '',
25                relatedInformation: [
26                    new vscode.DiagnosticRelatedInformation(new vscode.Location(document.uri, new vscode.Range(new vscode.Position(0, 0), new vscode.Position(7, 10))), 'Line Count')
27                ]
28            }]);
29        } else {
30            //if the line count is equal to or greater than 8, it clears all error messages
31            collection.clear();
32
33        }
34
35    }  
36
37}    

Diese Datei enthält eine einzelne Funktion und exportiert sie: updateDiagnostic(). Sie akzeptiert ein einziges Argument: DiagnosticCollection. Mithilfe der Eigenschaft lineCount des Moduls TextDocument ermittelt die Funktion die Zeilenanzahl des aktuell aktiven Dokuments. Sind es weniger als acht Zeilen, gibt sie mithilfe der Diagnosefunktionen von VS Code eine Fehlermeldung aus. Diese erscheint in einem Pop-up-Fenster und als Eintrag im Bereich Probleme.

Als Nächstes müssen Sie UpdateDiagnostic() aufrufen und als Teil Ihrer Erweiterung registrieren. Öffnen Sie die Datei extension.ts und ersetzen Sie ihren Inhalt durch Folgendes:

1// The module 'vscode' contains the VS Code extensibility API
2// Import the module and reference it with the alias vscode in your code below
3import * as vscode from 'vscode';
4import * as autofill from './AutoFillExtension';
5import * as linelimit from './LineDiagnosticExtension';
6
7// This method is called when your extension is activated
8// Your extension is activated the very first time the command is executed
9export function activate(context: vscode.ExtensionContext) {
10    //create a new diagnostic collection
11    const collection = vscode.languages.createDiagnosticCollection('line count diagnostics');
12    vscode.commands.registerCommand('editor-tools.fillAddress',autofill.autofillMyAddress);
13
14    //Initial run of the upDateDiagnostic method
15    linelimit.updateDiagnostic(collection);
16
17    //Subscribes a new event handler that activates when an edit or change is performed on a workspace document  
18    context.subscriptions.push(vscode.workspace.onDidChangeTextDocument(editorchangeevent => {      
19        if (editorchangeevent) {
20            linelimit.updateDiagnostic(collection);
21        }
22    }));
23
24}
25
26// This method is called when your extension is deactivated
27export function deactivate() {}

Dieser Code importiert LineDiagnosticExtension.ts unter dem Alias linelimit. Anschließend definiert der Code eine neue DiagnosticCollection. Diese wird nur einmal ausgeführt, wenn die Funktion activate aufgerufen wird. Nachdem der Befehl Fill Address registriert wurde, ruft der Code die Funktion updateDiagnostic() auf, die ebenfalls nur einmal beim Start von VS Code ausgeführt wird.

Damit die Diagnoseinformationen von VS Code aktualisiert werden, müssen Sie Änderungen am Dokument überwachen. Deshalb registriert dieser Code einen Ereignishandler namens OnDidChangeTextDocument(), der zum Workspace gehört und alle Änderungen an Dokumenten im aktuellen Workspace überwacht.

Als Nächstes führt der Ereignishandler die Methode linelimit.updateDiagnostic aus. Da Sie zwei verschiedene Erweiterungen haben, müssen Sie beide registrieren. Im vorherigen Beispiel werden die Erweiterung Fill Address und ihr Befehl erst registriert und der Abonnementliste hinzugefügt, wenn Sie den Befehl über die Befehlspalette ausführen. Hier soll die Erweiterung jedoch bereits beim Start von VS Code aktiviert werden.

In VS Code können Sie sogenannte Aktivierungsereignisse festlegen. Ihre Erweiterungen werden nur aktiviert, wenn ein Aktivierungsereignis eintritt.

Öffnen Sie die Datei package.json Ihres Projekts. Scrollen Sie nach unten, bis Sie das Array activationEvents finden, und fügen Sie als Wert "*" zwischen den eckigen Klammern ein. Dadurch wird VS Code gezwungen, alle Ihre Erweiterungen bei jedem Aktivierungsereignis zu aktivieren. Diese Vorgehensweise wird normalerweise nicht empfohlen, da sie den Start von VS Code verlangsamt. Da es sich hier jedoch um zwei einfache Erweiterungen handelt, sollte sie sich nicht auf dieses Projekt auswirken:

  "activationEvents": [
    "*"
  ],

Jetzt können Sie Ihre Erweiterung endlich ausführen und testen. Erstellen Sie dazu eine neue Textdatei und geben Sie einen beliebigen Text ein. VS Code sollte den Text rot unterstreichen und eine Meldung im Bereich „Probleme“ anzeigen:

Wenn Sie acht weitere Zeilen hinzufügen, sollte die Fehlermeldung verschwinden. Oder verwenden Sie die Methode Fill Address, um sich die Arbeit zu erleichtern:

Führen Sie Snyk anschließend erneut aus, um die Qualität und Sicherheit Ihres Projekts zu überprüfen. Sehen Sie sich die Scanergebnisse an und ignorieren Sie alle Warnungen, die sich nicht auf die von Ihnen erstellten Projektdateien beziehen. Falls relevante Hinweise angezeigt werden, befolgen Sie die Empfehlungen von Snyk, um die Probleme zu beheben. Nachdem Sie die Qualität und Sicherheit Ihrer Erweiterung sowie ihrer Abhängigkeiten überprüft haben, können Sie sie veröffentlichen.

Erweiterung paketieren

Microsoft macht das Paketieren und Veröffentlichen mit der VS Code Extensions (VSCE) CLI ganz einfach. Mit diesem Tool müssen Sie Ihre Erweiterung nicht zwingend auf dem Visual Studio Code Marketplace veröffentlichen. Stattdessen können Sie sie als VSIX-Datei paketieren und auf diesem Weg teilen. Für die Installation der VSCE CLI benötigen Sie npm.

Öffnen Sie ein Terminal Ihrer Wahl und führen Sie den folgenden npm-Befehl aus (er muss nicht in einem bestimmten Verzeichnis ausgeführt werden):

npm install -g @vscode/vsce

Nachdem Sie VSCE installiert haben, wechseln Sie zum Ordner Ihrer Erweiterung und führen Sie den folgenden Befehl aus:

vsce package

Wenn Sie zuvor kein GitHub-Repository für Ihre Erweiterung eingerichtet haben, werden möglicherweise einige Warnungen angezeigt. Sie können diese einfach umgehen, indem Sie die Option „yes“ auswählen:

Das Paketieren sollte nicht lange dauern. Danach finden Sie im Stammverzeichnis Ihres Projekts eine neue Datei namens editor-tools-0.0.1.vsix (oder ähnlich):

Mit dieser Datei können Sie die Erweiterung in Ihrer Version von VS Code installieren. Öffnen Sie VS Code und wechseln Sie zum Bereich „Erweiterungen“. Klicken Sie auf das Auslassungsmenü oben (Ansichten und weitere Aktionen) und wählen Sie dann Aus VSIX installieren:

Ein Dateiauswahldialog wird geöffnet. Suchen und wählen Sie darin Ihre Erweiterung aus und klicken Sie dann auf Installieren:

Nach der Installation zeigt VS Code unten rechts auf Ihrem Bildschirm ein Pop-up mit einer Benachrichtigung an:

Sie sollten jetzt über Ihre VS-Code-Installation auf die Funktionen Ihrer Erweiterung zugreifen können.

Erweiterung veröffentlichen

Wenn wir diese Erweiterung tatsächlich auf dem Visual Studio Code Marketplace veröffentlichen wollten, wäre jetzt der richtige Zeitpunkt dafür. Statt dieses Beispiel zu veröffentlichen, gehen wir die Schritte durch, ohne dass Sie sie selbst ausführen müssen.

Hinweis: Wir empfehlen Ihnen, diesen Schritt nicht selbst auszuführen, da wir den Marketplace nicht mit Demo-Anwendungen überfluten möchten. Sie können sich jedoch an den folgenden Schritten orientieren, wenn Sie einmal eine Erweiterung für die öffentliche Nutzung entwickeln.

Um Ihr Paket zu veröffentlichen, müssen Sie für Ihre Organisation ein Azure DevOps-Konto erstellen und anschließend darüber ein persönliches Zugriffstoken abrufen.

Auf der Verwaltungsseite für Publisher des Visual Studio Code Marketplace können Sie einen neuen Publisher erstellen. Bitte beachten Sie, dass sowohl der Publisher-Name als auch der Anzeigename des Publishers einzigartig sein müssen.

Nachdem Sie einen neuen Publisher erstellt haben, müssen Sie Ihrer Datei package.json einen Schlüssel und einen Wert für den Publisher hinzufügen. Verwenden Sie dafür den Publisher-Namen und nicht den Anzeigenamen:

"publisher": "publisher name" //Publisher name and value

"name": "editor-tools",
"displayName": "My Editor Tools",
"description": "A collection of simple editing tools for VSCode",
"version": "0.0.1",

Melden Sie sich anschließend bei VSCE mit Ihrem Publisher-Namen (ID) und Ihrem persönlichen Zugriffstoken an:

vsce login <publisher ID>

Nach erfolgreicher Anmeldung können Sie Ihre Erweiterung mit VSCE veröffentlichen. Führen Sie dazu im Stammverzeichnis Ihres Erweiterungsprojekts den folgenden Befehl aus:

vsce publish

Alternativ können Sie die VSIX-Datei manuell auf die Verwaltungsseite für Publisher des Visual Studio Code Marketplace hochladen. Wenn Sie Ihre Erweiterung beim Erstellen des Grundgerüsts nicht gebündelt haben, können Sie das manuell mit webpack oder esbuild nachholen. Das Bündeln kann die Effizienz und Ladezeiten Ihrer Erweiterung verbessern.

Auch wenn das Bündeln hier nicht unbedingt erforderlich ist, könnte es bei künftigen Projekten notwendig sein. Vergewissern Sie sich vor dem Bündeln, dass alle Abhängigkeiten Ihres Projekts sicher sind. Mit Snyk-Scans Ihrer Projekte können Sie schnell überprüfen, ob die verwendeten Bibliotheken und Module vor Cyberbedrohungen geschützt sind.

Da sich Technologie und Cybersicherheit ständig weiterentwickeln, sind Ihre Abhängigkeiten möglicherweise nicht dauerhaft sicher, selbst wenn sie es heute sind. Zum Glück können Sie Snyk nutzen, um die Abhängigkeiten Ihrer Projekte kontinuierlich zu überwachen. Entdeckt Snyk potenzielle Sicherheitslücken, erhalten Sie eine Benachrichtigung per E-Mail oder Slack.

Fazit

In diesem Tutorial haben Sie gelernt, wie Sie eine einfache Erweiterung für VS Code erstellen. Dazu gehörte auch, das Projekt mit dem VSCE-Generator von Yeoman zu initialisieren. Dabei haben Sie die grundlegende Struktur einer Erweiterung kennengelernt, erfahren, wie sich verschiedene Erweiterungstypen mithilfe des Erweiterungsmanifests (package.json) registrieren und aktivieren lassen, und gelernt, wie Sie Ihre Erweiterung paketieren, bündeln und veröffentlichen.

Ganz gleich, ob Sie an VS-Code-Erweiterungen oder komplexen Web-Apps arbeiten: Sie sollten Cybersicherheit ernst nehmen. Das ist jedoch nicht immer einfach, insbesondere angesichts der zunehmenden Verbreitung von Continuous Integration und Continuous Development (CI/CD). Um Sie dabei zu unterstützen, bietet Snyk automatisierte Code-Qualitäts- und Sicherheitsprüfungen, mit denen Sie die neuesten Branchenstandards einhalten. Mit Snyk müssen Sie sich keine Sorgen machen, bei aktuellen Cybersicherheitstrends und sicheren Programmierpraktiken den Anschluss zu verlieren – Snyk kümmert sich darum.