Ihre erste Erweiterung
In diesem Thema lernen Sie die grundlegenden Konzepte für die Erstellung von Erweiterungen. Stellen Sie sicher, dass Sie Node.js und Git installiert haben.
Verwenden Sie zuerst Yeoman und VS Code Extension Generator, um ein TypeScript- oder JavaScript-Projekt für die Entwicklung zu erstellen.
-
Wenn Sie Yeoman nicht für die spätere Verwendung installieren möchten, führen Sie den folgenden Befehl aus
npx --package yo --package generator-code -- yo code -
Wenn Sie Yeoman stattdessen global installieren möchten, um es wiederholt auszuführen, führen Sie den folgenden Befehl aus
npm install --global yo generator-code yo code
Füllen Sie für ein TypeScript-Projekt die folgenden Felder aus
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
Öffnen Sie im Editor src/extension.ts und drücken Sie F5 oder führen Sie den Befehl Debug: Debuggen starten aus der Befehlspalette aus (⇧⌘P (Windows, Linux Ctrl+Shift+P)). Dies kompiliert und führt die Erweiterung in einem neuen Extension Development Host-Fenster aus.
Führen Sie den Befehl Hallo Welt aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) im neuen Fenster aus
Sie sollten die Benachrichtigung Hallo Welt von HelloWorld! sehen. Erfolg!
Wenn Sie den Befehl Hallo Welt im Debug-Fenster nicht sehen können, überprüfen Sie die Datei package.json und stellen Sie sicher, dass die Version von engines.vscode mit der installierten VS Code-Version kompatibel ist.
Entwickeln der Erweiterung
Lassen Sie uns die Nachricht ändern
- Ändern Sie die Nachricht in
extension.tsvon "Hallo Welt von HelloWorld!" zu "Hallo VS Code". - Führen Sie Entwickler: Fenster neu laden im neuen Fenster aus.
- Führen Sie den Befehl Hallo Welt erneut aus.
Sie sollten die aktualisierte Nachricht sehen.
Hier sind einige Ideen zum Ausprobieren
- Geben Sie dem Befehl Hallo Welt in der Befehlspalette einen neuen Namen.
- Beisteuern Sie einen weiteren Befehl, der die aktuelle Uhrzeit in einer Informationsmeldung anzeigt. Beitragspunkte sind statische Deklarationen, die Sie in der
package.jsonExtension Manifest vornehmen, um VS Code zu erweitern, z. B. durch Hinzufügen von Befehlen, Menüs oder Tastenkombinationen zu Ihrer Erweiterung. - Ersetzen Sie
vscode.window.showInformationMessagedurch einen anderen VS Code API-Aufruf, um eine Warnmeldung anzuzeigen.
Debugging der Erweiterung
Die integrierte Debugging-Funktionalität von VS Code erleichtert das Debuggen von Erweiterungen. Setzen Sie einen Haltepunkt, indem Sie auf die Spalte neben einer Zeile klicken, und VS Code wird den Haltepunkt treffen. Sie können mit der Maus über Variablen im Editor fahren oder die Ansicht Ausführen und Debuggen auf der linken Seite verwenden, um den Wert einer Variablen zu überprüfen. Die Debug-Konsole ermöglicht die Auswertung von Ausdrücken.
Sie können mehr über das Debuggen von Node.js-Apps in VS Code im Node.js Debugging-Thema erfahren.
Nächste Schritte
Im nächsten Thema, Extension Anatomy, werden wir den Quellcode des Hallo Welt-Beispiels genauer betrachten und wichtige Konzepte erläutern.
Sie finden den Quellcode dieses Tutorials unter: https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample. Das Thema Extension Guides enthält weitere Beispiele, die jeweils eine andere VS Code API oder einen anderen Beitragspunkt veranschaulichen und den Empfehlungen in unseren UX Guidelines folgen.
Verwendung von JavaScript
In dieser Anleitung beschreiben wir hauptsächlich die Entwicklung von VS Code-Erweiterungen mit TypeScript, da wir der Meinung sind, dass TypeScript die beste Erfahrung für die Entwicklung von VS Code-Erweiterungen bietet. Wenn Sie jedoch JavaScript bevorzugen, können Sie trotzdem mit helloworld-minimal-sample fortfahren.
UX-Richtlinien
Dies ist auch ein guter Zeitpunkt, unsere UX Guidelines zu überprüfen, damit Sie mit der Gestaltung Ihrer Erweiterungsoberfläche beginnen können, um die VS Code-Best-Practices zu befolgen.