lewiswigmore/agent-skills

Leitfaden für VS Code-Erweiterungen

Erstellen, entwickeln und veröffentlichen Sie VS Code-Erweiterungen.

Wann verwenden

• VS Code-Erweiterung, Erweiterungsentwicklung, vscode-plugin
• Erstellen einer neuen VS Code-Erweiterung von Grund auf
• Hinzufügen von Befehlen, Tastenkombinationen oder Einstellungen zu einer Erweiterung
• Veröffentlichen im VS Code Marketplace

Schnellstart

# Neue Erweiterung aus dem Gerüst erstellen (empfohlen)
npm install -g yo generator-code
yo code

# Oder minimale manuelle Einrichtung
mkdir my-extension && cd my-extension
npm init -y && npm install -D typescript @types/vscode

Projektstruktur

my-extension/
├── package.json          # Erweiterungsmanifest (KRITISCH)
├── src/extension.ts      # Einstiegspunkt
├── out/                  # Kompilierte JS (gitignore)
├── images/icon.png       # 128x128 PNG für Marketplace
└── .vscodeignore         # Dateien vom VSIX ausschließen

Erstellen & Paketieren

npm run compile      # Einmalig erstellen
npm run watch        # Watch-Modus (F5 zum Debuggen starten)
npx @vscode/vsce package   # Erstellt .vsix

Abschlusskriterien

• Erweiterung aktiviert sich fehlerfrei
• Alle Befehle registriert und funktionsfähig
• Paketgröße < 5 MB (.vscodeignore verwenden)
• README.md enthält Links zu Marketplace/GitHub

Schnelle Fehlerbehebung

Symptom	Lösung
Erweiterung wird nicht geladen	activationEvents prüfen (seit VS Code 1.74 werden beigetragene Befehle/Ansichten automatisch erkannt)
Befehl nicht gefunden	Befehl-ID in package.json/Code abgleichen
Tastenkombination funktioniert nicht	when-Klausel entfernen, Konflikte prüfen

Referenzen

Thema	Referenz
KI-Anpassung	references/ai-customization.md
Code-Review-Prompts	references/code-review-prompts.md
Codebeispiele	references/code-samples.md
TreeView	references/treeview.md
Webview	references/webview.md
Tests	references/testing.md
Veröffentlichung	references/publishing.md
Fehlerbehebung	references/troubleshooting.md

Best Practices

Namensgebung vereinheitlichen

Vereinheitlichen Sie Paketname, Einstellungsschlüssel, Befehl-ID und Ansichts-ID vor der Veröffentlichung:

Element	Beispiel
Paketname	copilot-scheduler
Einstellungsschlüssel	copilotScheduler.enabled
Befehl-ID	copilotScheduler.createTask
Ansichts-ID	copilotSchedulerTasks

Zentralisierte Benachrichtigungsbehandlung

type NotificationMode = "sound" | "silentToast" | "silentStatus";

function getNotificationMode(): NotificationMode {
  const config = vscode.workspace.getConfiguration("myExtension");
  return config.get<NotificationMode>("notificationMode", "sound");
}

function notifyInfo(message: string, timeoutMs = 4000): void {
  const mode = getNotificationMode();
  switch (mode) {
    case "silentStatus":
      vscode.window.setStatusBarMessage(message, timeoutMs);
      break;
    case "silentToast":
      void vscode.window.withProgress(
        { location: vscode.ProgressLocation.Notification, title: message },
        async () => {},
      );
      break;
    default:
      void vscode.window.showInformationMessage(message);
  }
}

function notifyError(message: string, timeoutMs = 6000): void {
  const mode = getNotificationMode();
  if (mode === "silentStatus") {
    vscode.window.setStatusBarMessage(`⚠ ${message}`, timeoutMs);
    console.error(message);
    return;
  }
  void vscode.window.showErrorMessage(message);
}

Machen Sie eine notificationMode-Einstellung verfügbar, damit Benutzer steuern können, wie Benachrichtigungen zugestellt werden.