拡張機能マニフェスト

すべての 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"
}

Marketplace 表示のヒント

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

常に最新の vsce を使用するために、npm install -g @vscode/vsce を実行してインストールされていることを確認してください。

拡張機能のルートフォルダに README.md Markdown ファイルを含めてください。その内容は拡張機能の詳細（Marketplace 上）の本文に表示されます。README.md 内では相対パスの画像リンクを指定できます。

いくつかの例

1. 文字数カウント
2. MD ツール

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

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

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

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

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

{
  "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 の拡張機能は Marketplace でグループ化され、フィルタリングと発見が向上します。

注: 拡張機能に意味のある値のみを使用してください。許可される値は [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.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 (ワークフローからのみ)
• 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

注: 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 の両方が含まれており、Marketplace で簡単に見つけてフィルタリングできるようになっていることに注意してください。

ヒント: マージされたコントリビューションが同じ識別子を使用していることを確認してください。上記の例では、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 の Marketplace カテゴリに分類する必要があります

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

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

拡張機能パックは、バンドルされた拡張機能との機能的な依存関係を持つべきではなく、バンドルされた拡張機能はパックとは独立して管理できる必要があります。ある拡張機能が別の拡張機能に依存している場合、その依存関係は 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 拡張機能の作成に役立ついくつかの Node.js モジュールが npmjs で利用可能です。これらは拡張機能の 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 拡張機能マーケットプレイスについて詳しく読む