拡張機能マニフェスト

すべてのVisual Studio Code拡張機能には、拡張機能ディレクトリ構造のルートにマニフェストファイルpackage.jsonが必要です。

フィールド

npmのpackage.jsonリファレンスも確認してください。

例

完全な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"
}

マーケットプレイス表示のヒント

VS Code Marketplaceに表示されたときに拡張機能を美しく見せるためのヒントと推奨事項をいくつかご紹介します。

必ず最新のvsceを使用してください (npm install -g @vscode/vsceで確認してください)。

拡張機能のルートフォルダーにREADME.mdというMarkdownファイルを置いておくと、その内容が拡張機能の詳細の本文 (マーケットプレイス上) に含まれます。README.mdでは、相対パスの画像リンクも使用できます。

以下にいくつかの例を示します

1. Word Count
2. MD Tools

適切な表示名と説明を提供してください。これはマーケットプレイスおよび製品内の表示にとって重要です。これらの文字列はVS Codeでのテキスト検索にも使用されるため、関連するキーワードを含めることが非常に役立ちます。

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

アイコンと対照的なバナーカラーは、マーケットプレイスページのヘッダーで美しく見えます。theme属性は、バナーで使用されるフォント (darkまたはlight) を参照します。

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

設定できるオプションのリンク (bugs、homepage、repository) がいくつかあり、これらはマーケットプレイスのリソースセクションの下に表示されます。

{
  "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"
  }
}

拡張機能のcategoryを設定してください。同じcategoryの拡張機能はマーケットプレイスでグループ化され、フィルタリングと発見性が向上します。

注: 拡張機能に意味のある値のみを使用してください。許可される値は[Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs, Data Science, Machine Learning, Visualization, Notebooks, Education, Testing]です。構文ハイライトやコード補完などの一般的な言語機能にはProgramming Languagesを使用してください。カテゴリLanguage Packsは、表示言語拡張機能 (例えば、ブルガリア語のローカライズ) 用に予約されています。

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

承認済みバッジ

セキュリティ上の懸念から、信頼できるサービスからのバッジのみを許可しています。

以下のURLプレフィックスからのバッジを許可しています

• api.bintray.com
• api.travis-ci.com
• api.travis-ci.org
• app.fossa.io
• badge.buildkite.com
• badge.fury.io
• badge.waffle.io
• badgen.net
• badges.frapsoft.com
• badges.gitter.im
• badges.greenkeeper.io
• cdn.travis-ci.com
• cdn.travis-ci.org
• 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
• gemnasium.com
• github.com (Workflowsのみ)
• gitlab.com
• godoc.org
• goreportcard.com
• img.shields.io
• isitmaintained.com
• marketplace.visualstudio.com
• nodesecurity.io
• opencollective.com
• snyk.io
• travis-ci.com
• travis-ci.org
• visualstudio.com
• vsmarketplacebadges.dev
• www.versioneye.com

注: vsmarketplacebadge.apphb.com のバッジを vsmarketplacebadges.dev のバッジに置き換えてください。

使用したい他のバッジがある場合は、GitHubでissueを開いていただければ、検討いたします。

拡張機能の貢献を組み合わせる

yo codeジェネレーターを使用すると、TextMateテーマ、カラーライザー、スニペットを簡単にパッケージ化し、新しい拡張機能を作成できます。ジェネレーターを実行すると、各オプションに対して完全なスタンドアロン拡張機能パッケージが作成されます。ただし、複数の貢献を組み合わせた単一の拡張機能を持つ方が便利な場合がよくあります。例えば、新しい言語のサポートを追加する場合、ユーザーに言語定義と色付け、さらにスニペット、場合によってはデバッグサポートも提供したいと考えるでしょう。

拡張機能の貢献を組み合わせるには、既存の拡張機能マニフェストpackage.jsonを編集し、新しい貢献と関連ファイルを追加します。

以下は、LaTeX言語定義 (言語識別子とファイル拡張子)、色付け (grammars)、およびスニペットを含む拡張機能マニフェストです。

{
  "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"
      }
    ]
  }
}

拡張機能マニフェストのcategories属性にProgramming LanguagesとSnippetsの両方が含まれるようになり、マーケットプレイスでの発見とフィルタリングが容易になったことに注目してください。

ヒント: マージされた貢献が同じ識別子を使用していることを確認してください。上記の例では、3つの貢献すべてが言語識別子として「latex」を使用しています。これにより、VS Codeはカラーライザー (grammars) とスニペットがLaTeX言語用であり、LaTeXファイルの編集時にアクティブになることを認識します。

拡張機能パック

個別の拡張機能を拡張機能パックとしてバンドルできます。拡張機能パックは、まとめてインストールされる拡張機能のセットです。これにより、お気に入りの拡張機能を他のユーザーと簡単に共有したり、PHP開発のような特定のシナリオ向けに拡張機能のセットを作成して、PHP開発者がVS Codeをすばやく使い始められるようにしたりできます。

拡張機能パックは、package.jsonファイル内のextensionPack属性を使用して他の拡張機能をバンドルします。

例えば、以下はデバッガーと言語サービスを含むPHP用拡張機能パックです。

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

拡張機能パックをインストールすると、VS Codeはその拡張機能の依存関係もインストールするようになります。

拡張機能パックは、マーケットプレイスのExtension Packsカテゴリに分類する必要があります。

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

拡張機能パックを作成するには、yo code Yeomanジェネレーターを使用し、New Extension Packオプションを選択します。現在VS Codeインスタンスにインストールされている拡張機能のセットでパックをシードするオプションがあります。このようにして、お気に入りの拡張機能で拡張機能パックを簡単に作成し、マーケットプレイスに公開して他のユーザーと共有できます。

拡張機能パックは、バンドルされた拡張機能と機能的な依存関係を持つべきではなく、バンドルされた拡張機能はパックとは独立して管理可能であるべきです。ある拡張機能が別の拡張機能に依存している場合、その依存関係はextensionDependencies属性で宣言する必要があります。

拡張機能アンインストールフック

VS Codeからアンインストールされる際に拡張機能にクリーンアップが必要な場合、拡張機能のpackage.jsonのscriptsセクションにあるアンインストールフックvscode:uninstallにnodeスクリプトを登録できます。

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

このスクリプトは、拡張機能がアンインストールされた後にVS Codeが再起動 (シャットダウンと起動) され、拡張機能がVS Codeから完全にアンインストールされたときに実行されます。

注: Node.jsスクリプトのみがサポートされています。

便利なNodeモジュール

VS Code拡張機能の記述を支援するために、npmjsでいくつかのNode.jsモジュールが利用可能です。これらは拡張機能のdependenciesセクションに含めることができます。

• vscode-nls - 外部化とローカライズのサポート。
• vscode-uri - VS Codeとその拡張機能で使用されるURI実装。
• jsonc-parser - コメントの有無にかかわらずJSONを処理するためのスキャナーおよび耐障害性パーサー。
• request-light - プロキシサポート付きの軽量Node.jsリクエストライブラリ。
• vscode-extension-telemetry - VS Code拡張機能の一貫したテレメトリレポート。
• vscode-languageclient - 言語サーバープロトコルに準拠した言語サーバーを簡単に統合できます。

次のステップ

VS Codeの拡張性モデルについて詳しく知るには、次のトピックを参照してください。

• 貢献ポイント - VS Code 貢献ポイントのリファレンス
• アクティベーションイベント - VS Codeアクティベーションイベントリファレンス
• 拡張機能マーケットプレイス - VS Code拡張機能マーケットプレイスの詳細を読む