Erweiterungsmanifest

Jede Visual Studio Code-Erweiterung benötigt eine Manifestdatei package.json im Stammverzeichnis der Erweiterungsstruktur.

Felder

Sehen Sie sich auch die npm package.json-Referenz an.

Beispiel

Hier ist ein vollständiges package.json

{
  "name": "wordcount",
  "displayName": "Word Count",
  "version": "0.1.0",
  "publisher": "ms-vscode",
  "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",
  "author": {
    "name": "sean"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "pricing": "Free",
  "activationEvents": ["onLanguage:markdown"],
  "engines": {
    "vscode": "^1.0.0"
  },
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
    "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

Tipps zur Präsentation im Marketplace

Hier sind einige Tipps und Empfehlungen, damit Ihre Erweiterung auf dem VS Code Marketplace gut aussieht.

Verwenden Sie immer die neueste vsce-Version, indem Sie npm install -g @vscode/vsce ausführen, um sicherzustellen, dass Sie sie haben.

Stellen Sie eine README.md-Markdown-Datei im Stammverzeichnis Ihrer Erweiterung bereit. Wir werden den Inhalt in den Erweiterungsdetails (im Marketplace) einfügen. Sie können relative Pfad-Bildlinks in der README.md angeben.

Hier sind einige Beispiele

1. Wortanzahl
2. MD Tools

Geben Sie einen guten angezeigten Namen und eine gute Beschreibung an. Dies ist wichtig für den Marketplace und die Anzeige im Produkt. Diese Zeichenfolgen werden auch für die Textsuche in VS Code verwendet, und relevante Schlüsselwörter helfen sehr.

    "displayName": "Word Count",
    "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",

Ein Symbol und eine kontrastierende Bannerfarbe sehen im Header der Marketplace-Seite gut aus. Das Attribut theme bezieht sich auf die im Banner zu verwendende Schriftart - dark oder light.

{
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  }
}

Es gibt mehrere optionale Links (bugs, homepage, repository), die Sie festlegen können und die im Abschnitt **Ressourcen** des Marktplatzes angezeigt werden.

{
  "license": "SEE LICENSE IN LICENSE.txt",
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}

Legen Sie eine category für Ihre Erweiterung fest. Erweiterungen in derselben category werden im Marketplace gruppiert, was die Filterung und Entdeckung verbessert.

**Hinweis:** Verwenden Sie nur die Werte, die für Ihre Erweiterung sinnvoll sind. Zulässige Werte sind [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs, Data Science, Machine Learning, Visualization, Notebooks, Education, Testing]. Verwenden Sie Programming Languages für allgemeine Sprachfunktionen wie Syntax-Hervorhebung und Code-Vervollständigung. Die Kategorie Language Packs ist für die Anzeige von Sprach-Erweiterungen reserviert (z. B. lokalisierte Bulgarisch).

{
  "categories": ["Linters", "Programming Languages", "Other"]
}

Genehmigte Abzeichen

Aus Sicherheitsgründen erlauben wir nur Abzeichen von vertrauenswürdigen Diensten.

Wir erlauben Abzeichen von den folgenden URL-Präfixen

• api.travis-ci.com
• app.fossa.io
• badge.buildkite.com
• badge.fury.io
• badgen.net
• badges.frapsoft.com
• badges.gitter.im
• cdn.travis-ci.com
• ci.appveyor.com
• circleci.com
• cla.opensource.microsoft.com
• codacy.com
• codeclimate.com
• codecov.io
• coveralls.io
• david-dm.org
• deepscan.io
• dev.azure.com
• docs.rs
• flat.badgen.net
• github.com (nur von Workflows)
• gitlab.com
• godoc.org
• goreportcard.com
• img.shields.io
• isitmaintained.com
• marketplace.visualstudio.com
• nodesecurity.io
• opencollective.com
• snyk.io
• travis-ci.com
• visualstudio.com
• vsmarketplacebadges.dev

Hinweis: Ersetzen Sie das vsmarketplacebadge.apphb.com-Abzeichen durch das vsmarketplacebadges.dev-Abzeichen.

Wenn Sie weitere Abzeichen verwenden möchten, öffnen Sie bitte ein GitHub-Problem, und wir werden es uns gerne ansehen.

Kombinieren von Erweiterungsbeiträgen

Der yo code-Generator ermöglicht es Ihnen, TextMate-Themes, Colorizer und Snippets einfach zu verpacken und neue Erweiterungen zu erstellen. Wenn der Generator ausgeführt wird, erstellt er für jede Option ein vollständiges eigenständiges Erweiterungspaket. Oft ist es jedoch bequemer, eine einzelne Erweiterung zu haben, die mehrere Beiträge kombiniert. Wenn Sie beispielsweise Unterstützung für eine neue Sprache hinzufügen, möchten Sie den Benutzern sowohl die Sprachdefinition mit Farbwiedergabe als auch Snippets und möglicherweise sogar Debugging-Unterstützung anbieten.

Um Erweiterungsbeiträge zu kombinieren, bearbeiten Sie ein vorhandenes Erweiterungsmanifest package.json und fügen Sie die neuen Beiträge und zugehörigen Dateien hinzu.

Unten sehen Sie ein Erweiterungsmanifest, das eine LaTex-Sprachdefinition (Sprachbezeichner und Dateierweiterungen), Farbwiedergabe (grammars) und Snippets enthält.

{
  "name": "language-latex",
  "description": "LaTex Language Support",
  "version": "0.0.1",
  "publisher": "someone",
  "engines": {
    "vscode": "0.10.x"
  },
  "categories": ["Programming Languages", "Snippets"],
  "contributes": {
    "languages": [
      {
        "id": "latex",
        "aliases": ["LaTeX", "latex"],
        "extensions": [".tex"]
      }
    ],
    "grammars": [
      {
        "language": "latex",
        "scopeName": "text.tex.latex",
        "path": "./syntaxes/latex.tmLanguage.json"
      }
    ],
    "snippets": [
      {
        "language": "latex",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

Beachten Sie, dass das Attribut categories des Erweiterungsmanifests nun sowohl Programming Languages als auch Snippets für einfache Entdeckung und Filterung im Marketplace enthält.

**Tipp:** Stellen Sie sicher, dass Ihre zusammengeführten Beiträge dieselben Bezeichner verwenden. Im obigen Beispiel verwenden alle drei Beiträge "latex" als Sprachbezeichner. Dies teilt VS Code mit, dass der Colorizer (grammars) und die Snippets für die LaTeX-Sprache bestimmt sind und aktiv werden, wenn LaTeX-Dateien bearbeitet werden.

Extension Packs

Sie können separate Erweiterungen in **Extension Packs** bündeln. Ein Extension Pack ist eine Sammlung von Erweiterungen, die zusammen installiert werden. Dies ermöglicht es, Ihre bevorzugten Erweiterungen einfach mit anderen Benutzern zu teilen oder eine Reihe von Erweiterungen für ein bestimmtes Szenario wie die PHP-Entwicklung zu erstellen, um einem PHP-Entwickler den schnellen Einstieg in VS Code zu erleichtern.

Ein Extension Pack bündelt andere Erweiterungen über das Attribut extensionPack in der Datei package.json.

Hier ist zum Beispiel ein Extension Pack für PHP, das einen Debugger und einen Sprachdienst enthält.

{
  "extensionPack": ["xdebug.php-debug", "zobo.php-intellisense"]
}

Beim Installieren eines Extension Packs installiert VS Code nun auch dessen Erweiterungsabhängigkeiten.

Extension Packs sollten in der Marketplace-Kategorie Extension Packs kategorisiert werden.

{
  "categories": ["Extension Packs"]
}

Um ein Extension Pack zu erstellen, können Sie den yo code Yeoman-Generator verwenden und die Option New Extension Pack auswählen. Es gibt eine Option, das Pack mit den Erweiterungen zu füllen, die Sie derzeit in Ihrer VS Code-Instanz installiert haben. Auf diese Weise können Sie einfach ein Extension Pack mit Ihren bevorzugten Erweiterungen erstellen, es im Marketplace veröffentlichen und es mit anderen teilen.

Ein Extension Pack sollte keine funktionellen Abhängigkeiten von seinen gebündelten Erweiterungen haben, und die gebündelten Erweiterungen sollten unabhängig vom Pack verwaltbar sein. Wenn eine Erweiterung von einer anderen Erweiterung abhängt, sollte diese Abhängigkeit mit dem Attribut extensionDependencies deklariert werden.

Erweiterungs-Deinstallations-Hook

Wenn Ihre Erweiterung nach der Deinstallation aus VS Code eine Bereinigung durchführen muss, können Sie ein node-Skript im Deinstallations-Hook vscode:uninstall unter dem Abschnitt scripts in der package.json der Erweiterung registrieren.

{
  "scripts": {
    "vscode:uninstall": "node ./out/src/lifecycle"
  }
}

Dieses Skript wird ausgeführt, wenn die Erweiterung vollständig aus VS Code deinstalliert wurde, was nach einem Neustart von VS Code (Herunterfahren und Starten) nach der Deinstallation der Erweiterung der Fall ist.

**Hinweis**: Nur Node.js-Skripte werden unterstützt.

Nützliche Node-Module

Es gibt mehrere Node.js-Module auf npmjs, die beim Schreiben von VS Code-Erweiterungen helfen. Sie können diese in den Abschnitt dependencies Ihrer Erweiterung aufnehmen.

• vscode-nls - Unterstützung für Externalisierung und Lokalisierung.
• vscode-uri - Die von VS Code und seinen Erweiterungen verwendete URI-Implementierung.
• jsonc-parser - Ein Scanner und fehlerverzeihender Parser zur Verarbeitung von JSON mit oder ohne Kommentare.
• request-light - Eine leichtgewichtige Node.js-Anforderungsbibliothek mit Proxy-Unterstützung.
• vscode-extension-telemetry - Konsistente Telemetrieberichterstattung für VS Code-Erweiterungen.
• vscode-languageclient - Integrieren Sie Sprachserver, die dem Language Server Protocol entsprechen, einfach.

Nächste Schritte

Um mehr über das VS Code-Erweiterbarkeitsmodell zu erfahren, probieren Sie diese Themen aus:

• Contribution Points - Referenz zu VS Code Contribution Points
• Aktivierungsereignisse - Referenz zu VS Code-Aktivierungsereignissen.
• Extension Marketplace - Lesen Sie mehr über den VS Code Extension Marketplace.