拡張機能マニフェスト

すべての 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.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 (ワークフローのみ)
• 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 の両方が含まれているため、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 はその拡張機能の依存関係もインストールするようになりました。

拡張機能パックは、Marketplace の Extension Packs カテゴリに分類されるべきです。

{
  "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 - Language Server Protocol に準拠する言語サーバーを簡単に統合します。

次のステップ

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

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