Entwicklung eigener Plugins für den Code-Editor Visual Studio Code

Die Entwicklung eigener Plugins für Visual Studio Code ist ein Prozess, der es ermöglicht, diesen beliebten Editor an die eigenen Bedürfnisse anzupassen, indem neue Funktionalitäten hinzugefügt werden. Dies ist eine ideale Möglichkeit für Entwickler, die Produktivität bei der Arbeit mit Code zu verbessern.

Erste Schritte mit der Visual Studio Code API

Für die Entwicklung von Plugins benötigen Sie Kenntnisse in den Grundlagen von JavaScript oder TypeScript, da die Visual Studio Code API die Entwicklung in diesen Sprachen unterstützt. Mit der API können Sie sich in den Editor integrieren, Ereignisse verarbeiten, neue Befehle erstellen und die Benutzeroberfläche erweitern.

Installation der Werkzeuge

Bevor Sie beginnen, sollten Sie die folgenden Werkzeuge installieren:

• Node.js und npm – erforderlich für die Arbeit mit JavaScript und das Paketmanagement.
• Yeoman und Generator Code – zur automatischen Erstellung des Plugin-Skeletts.

Die Installation von Yeoman und Generator Code sieht folgendermaßen aus:

npm install -g yo generator-code

Erstellung eines neuen Plugins

Um ein einfaches Plugin zu erstellen, öffnen Sie das Terminal und geben Sie den Befehl ein:

yo code

Dieser Befehl initiiert die Erstellung des Plugins, bei dem Sie eine Vorlage auswählen, einen Namen und eine Beschreibung festlegen können. Nach Abschluss des Prozesses wird ein neues Projekt erstellt.

Projektstruktur

Die grundlegende Struktur enthält folgende Hauptdateien:

• package.json – enthält Metadaten über das Plugin, wie Abhängigkeiten und Version.
• extension.js oder extension.ts – die Hauptdatei, die den Code des Plugins enthält.
• README.md – Informationen und Anleitungen zur Nutzung.

Registrierung von Befehlen

Die Registrierung von Befehlen ist eine der Hauptfunktionen von Plugins. Um neue Befehle zu erstellen, müssen sie in package.json deklariert und in extension.js implementiert werden.

Eine einfache Registrierung eines Befehls sieht folgendermaßen aus:

"contributes": {
    "commands": [
        {
            "command": "extension.sayHello",
            "title": "Hallo sagen"
        }
    ]
}

Und die Implementierung in extension.js:

const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        vscode.window.showInformationMessage('Hallo von Ihrem Plugin!');
    });

    context.subscriptions.push(disposable);
}

exports.activate = activate;

Testen und Debuggen

Für das Testen des Plugins wird häufig die Möglichkeit genutzt, die Erweiterung in einer Debugging-Umgebung auszuführen. Wenn Sie F5 in Visual Studio Code drücken, starten Sie eine zweite Instanz des Editors mit aktivierter Erweiterung.

Veröffentlichung des Plugins

Nach Abschluss der Entwicklung und des Testens können Sie das Plugin im Visual Studio Marketplace veröffentlichen. Dazu sind folgende Schritte erforderlich:

1. Registrierung im Marketplace und Erhalt eines Personal Access Token.
2. Installation von vsce:

npm install -g vsce

1. Ausführung des Befehls zur Veröffentlichung:

vsce publish

Mit diesen Schritten werden Sie die Entwicklung eigener Plugins für Visual Studio Code meistern und können nicht nur Ihre täglichen Aufgaben automatisieren, sondern auch Ihre Entwicklungen mit anderen Benutzern teilen. Denken Sie daran, dass das Feedback von Benutzern nach der Veröffentlichung dazu beiträgt, Ihre Erweiterung zu verbessern. Die Verfügbarkeit eines Open-Source (und nicht so sehr) Produkts wird ein großer Vorteil bei einem Vorstellungsgespräch sein.