Ihre erste Erweiterung

Name: Visual Studio Code
Author: Microsoft

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.ts von "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.json Extension 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.showInformationMessage durch 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.

12/10/2025