M

MLOG

Deutsch

Entfesseln Sie das Potenzial von VS Code durch das Erstellen eigener Extensions. Dieser Leitfaden bietet eine komplette Anleitung von der Einrichtung bis zur Veröffentlichung, um Ihre Programmierumgebung zu verbessern und Ihre Kreationen weltweit zu teilen.

VS Code Extension-Entwicklung meistern: Ein umfassender Leitfaden für globale Entwickler

Visual Studio Code (VS Code) ist für Millionen von Entwicklern weltweit zum bevorzugten Code-Editor geworden. Seine Popularität verdankt es seiner schlanken Natur, seinen leistungsstarken Funktionen und vor allem seiner Erweiterbarkeit. Die Möglichkeit, benutzerdefinierte Extensions zu erstellen, ermöglicht es Entwicklern, den Editor an ihre spezifischen Bedürfnisse anzupassen, die Produktivität zu steigern und Arbeitsabläufe zu optimieren. Dieser umfassende Leitfaden führt Sie durch den Prozess der Erstellung Ihrer eigenen VS Code-Extensions, von der Ersteinrichtung bis zur Veröffentlichung Ihrer Kreation für die ganze Welt.

Warum VS Code-Extensions entwickeln?

Die Entwicklung von VS Code-Extensions bietet zahlreiche Vorteile, sowohl für einzelne Entwickler als auch für Organisationen:

Voraussetzungen

Bevor Sie mit der Extension-Entwicklung beginnen, stellen Sie sicher, dass Sie Folgendes installiert haben:

Einrichten Ihrer Entwicklungsumgebung

Sobald die Voraussetzungen erfüllt sind, können Sie Ihre Entwicklungsumgebung einrichten:

  1. Neues Extension-Projekt erstellen: Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um den Extension-Generator zu starten:
    2. yo code
  2. Beantworten Sie die Fragen: Der Generator stellt eine Reihe von Fragen zu Ihrer Extension. Hier ist eine Übersicht über häufige Fragen und empfohlene Antworten:
    • Welchen Typ von Extension möchten Sie erstellen? Wählen Sie "New Extension (TypeScript)" für eine TypeScript-basierte Extension, was der empfohlene Ansatz ist.
    • Wie lautet der Name Ihrer Extension? Wählen Sie einen beschreibenden und einzigartigen Namen für Ihre Extension. Beispiele: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Wie lautet der Identifier Ihrer Extension? Dies ist ein eindeutiger Bezeichner für Ihre Extension, typischerweise im Format `publisher.extension-name`. Wählen Sie einen Publisher-Namen (z. B. Ihren GitHub-Benutzernamen oder Firmennamen).
    • Wie lautet die Beschreibung Ihrer Extension? Geben Sie eine prägnante und informative Beschreibung dessen, was Ihre Extension tut.
    • Ein Git-Repository initialisieren? Wählen Sie "Ja", um ein Git-Repository für die Versionskontrolle zu initialisieren.
    • Möchten Sie eslint verwenden, um den Code zu linten? Wählen Sie "Ja", um die Konsistenz des Codestils zu gewährleisten.
  3. Öffnen Sie das Projekt in VS Code: Sobald der Generator abgeschlossen ist, öffnen Sie den neu erstellten Projektordner in VS Code.

Die Projektstruktur verstehen

Der Extension-Generator erstellt eine grundlegende Projektstruktur mit den folgenden wichtigen Dateien:

Ihre erste Extension schreiben

Beginnen wir mit der Erstellung einer einfachen Extension, die eine "Hello World"-Nachricht anzeigt, wenn ein Befehl ausgeführt wird:

  1. Öffnen Sie `src/extension.ts`: Diese Datei enthält die `activate`-Funktion, die aufgerufen wird, wenn Ihre Extension aktiviert wird.
  2. Ändern Sie die `activate`-Funktion: Ersetzen Sie den vorhandenen Code durch Folgendes:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Glückwunsch, Ihre Extension \"my-extension\" ist jetzt aktiv!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World aus meiner Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Erklärung:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registriert einen Befehl mit der ID `my-extension.helloWorld`. Dieser Befehl wird in der VS Code-Befehlspalette verfügbar sein.
    • `vscode.window.showInformationMessage('Hello World aus meiner Extension!')`: Zeigt eine Informationsnachricht im VS Code-Fenster an.
    • `context.subscriptions.push(disposable)`: Fügt den Befehl zu den Abonnements der Extension hinzu, um sicherzustellen, dass er beim Deaktivieren der Extension ordnungsgemäß entsorgt wird.
  4. Ändern Sie `package.json`: Fügen Sie Folgendes zum `contributes`-Abschnitt hinzu, um den Befehl zu definieren:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Erklärung:
    • `"commands"`: Definiert die Befehle, die Ihre Extension beisteuert.
    • `"command": "my-extension.helloWorld"`: Gibt die Befehls-ID an, die mit der in `extension.ts` verwendeten ID übereinstimmt.
    • `"title": "Hello World"`: Legt den Anzeigenamen für den Befehl in der Befehlspalette fest.

Ihre Extension testen

Jetzt ist es Zeit, Ihre Extension zu testen:

  1. Drücken Sie F5: Dadurch wird ein neues VS Code-Fenster mit Ihrer installierten Extension gestartet. Dies ist der "Extension Development Host".
  2. Öffnen Sie die Befehlspalette: Drücken Sie `Ctrl+Shift+P` (oder `Cmd+Shift+P` auf macOS), um die Befehlspalette zu öffnen.
  3. Geben Sie "Hello World" ein: Sie sollten Ihren Befehl in der Befehlspalette aufgelistet sehen.
  4. Wählen Sie "Hello World": Ein Klick auf den Befehl führt ihn aus und zeigt die "Hello World"-Nachricht im VS Code-Fenster an.

Ihre Extension debuggen

Debugging ist entscheidend, um Probleme in Ihrer Extension zu identifizieren und zu beheben. VS Code bietet eine hervorragende Debugging-Unterstützung:

  1. Haltepunkte setzen: Klicken Sie in den Editor-Gutter neben die Zeilennummern, um Haltepunkte in Ihrem Code zu setzen.
  2. Drücken Sie F5: Dadurch wird der Extension Development Host im Debug-Modus gestartet.
  3. Lösen Sie Ihre Extension aus: Führen Sie den Befehl oder die Aktion aus, die den Code auslöst, den Sie debuggen möchten.
  4. Variablen und Aufrufstapel inspizieren: Der VS Code-Debugger hält die Ausführung an Ihren Haltepunkten an, sodass Sie Variablen inspizieren, den Code schrittweise durchgehen und den Aufrufstapel untersuchen können.

Arbeiten mit der VS Code API

Die VS Code API bietet eine reichhaltige Auswahl an Schnittstellen und Funktionen zur Interaktion mit dem Editor. Hier sind einige Schlüsselbereiche der API:

Beispiel: Eine Code-Snippet-Extension erstellen

Erstellen wir eine Extension, die ein Code-Snippet zum Erstellen einer einfachen React-Komponente hinzufügt:

  1. Erstellen Sie einen `snippets`-Ordner: Erstellen Sie einen neuen Ordner namens `snippets` im Stammverzeichnis Ihres Projekts.
  2. Erstellen Sie eine Snippet-Datei: Erstellen Sie eine Datei namens `react.json` im `snippets`-Ordner.
  3. Fügen Sie die Snippet-Definition hinzu: Fügen Sie das folgende JSON zu `react.json` hinzu:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Erklärung:
    • `"React Component"`: Der Name des Snippets.
    • `"prefix": "reactcomp"`: Das Präfix, das das Snippet auslöst. Wenn Sie `reactcomp` eingeben und `Tab` drücken, wird das Snippet eingefügt.
    • `"body"`: Ein Array von Strings, die die Codezeilen im Snippet darstellen.
    • `${1:ComponentName}`: Ein Tab-Stopp, mit dem Sie den Komponentennamen schnell ändern können.
    • `"description"`: Eine Beschreibung des Snippets.
  5. Ändern Sie `package.json`: Fügen Sie Folgendes zum `contributes`-Abschnitt hinzu:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Erklärung:
    • `"snippets"`: Definiert die Snippets, die Ihre Extension beisteuert.
    • `"language": "javascriptreact"`: Gibt die Sprache an, für die das Snippet anwendbar ist.
    • `"path": "./snippets/react.json"`: Gibt den Pfad zur Snippet-Datei an.
  7. Testen Sie Ihr Snippet: Öffnen Sie eine `.jsx`- oder `.tsx`-Datei und geben Sie `reactcomp` ein. Drücken Sie `Tab`, um das Snippet einzufügen.

Fortgeschrittene Techniken der Extension-Entwicklung

Sobald Sie die Grundlagen beherrschen, können Sie fortgeschrittenere Techniken der Extension-Entwicklung erkunden:

Internationalisierung und Lokalisierung (i18n und L10n)

Um ein globales Publikum zu erreichen, sollten Sie die Internationalisierung und Lokalisierung Ihrer Extension in Betracht ziehen. Dies beinhaltet die Anpassung Ihrer Extension zur Unterstützung verschiedener Sprachen und Regionen.

Ihre Extension veröffentlichen

Sobald Ihre Extension fertig ist, können Sie sie im VS Code Marketplace veröffentlichen, damit andere sie verwenden können:

  1. Erstellen Sie eine Azure DevOps Organisation: Sie benötigen eine Azure DevOps Organisation, um Ihre Extension zu veröffentlichen. Wenn Sie keine haben, erstellen Sie ein kostenloses Konto auf der Azure DevOps-Website.
  2. Installieren Sie das `vsce`-Tool: Der VS Code Extension Manager (`vsce`) ist ein Befehlszeilentool zum Packen und Veröffentlichen von Extensions. Installieren Sie es global mit npm:
    3. npm install -g vsce
  3. Erstellen Sie einen Publisher: Ein Publisher ist eine Identität, der Ihre Extensions auf dem Marketplace gehören. Erstellen Sie einen Publisher mit dem Befehl `vsce create-publisher`. Sie müssen einen Publisher-Namen und ein Personal Access Token (PAT) von Azure DevOps angeben.
  4. Generieren Sie ein Personal Access Token (PAT): Gehen Sie in Azure DevOps zu "User Settings" -> "Personal Access Tokens" und erstellen Sie ein neues PAT mit dem Geltungsbereich "Marketplace (Publish)".
  5. Packen Sie Ihre Extension: Verwenden Sie den Befehl `vsce package`, um Ihre Extension in eine `.vsix`-Datei zu packen.
  6. Veröffentlichen Sie Ihre Extension: Verwenden Sie den Befehl `vsce publish`, um Ihre Extension im Marketplace zu veröffentlichen. Sie müssen Ihren Publisher-Namen und Ihr PAT angeben.

Best Practices für die Extension-Entwicklung

Befolgen Sie diese Best Practices, um hochwertige und wartbare VS Code-Extensions zu erstellen:

Community-Ressourcen

Hier sind einige wertvolle Ressourcen, um mehr über die Entwicklung von VS Code-Extensions zu erfahren:

Fazit

Die Entwicklung von VS Code-Extensions ist eine leistungsstarke Möglichkeit, Ihre Programmierumgebung anzupassen, die Produktivität zu steigern und Ihre Lösungen mit der globalen Entwickler-Community zu teilen. Indem Sie diesem umfassenden Leitfaden folgen, können Sie die Kunst der Extension-Entwicklung meistern und innovative Werkzeuge erstellen, die das VS Code-Erlebnis für Sie und andere verbessern. Denken Sie daran, die Community zu umarmen, zu Open-Source-Projekten beizutragen und kontinuierlich zu lernen und die sich ständig weiterentwickelnde Welt der VS Code-Extension-Entwicklung zu erkunden. Viel Glück und frohes Coden!