拡張機能マニフェスト

すべての 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 マークダウンファイルを用意してください。その内容は（Marketplace 上の）拡張機能詳細の本文に含まれます。README.md 内で相対パスの画像リンクを指定できます。

いくつかの例を挙げます

1. Word Count
2. MD Tools

適切な表示名と説明文を提供してください。これは 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 (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

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

他に利用したいバッジがある場合は、GitHub issue を作成していただければ検討いたします。

拡張機能のコントリビューションを組み合わせる

yo code ジェネレーターを使用すると、TextMate テーマ、カラーライザー、スニペットを簡単にパッケージ化して新しい拡張機能を作成できます。ジェネレーターを実行すると、各オプションに対して完全にスタンドアロンの拡張機能パッケージが作成されます。しかし、複数のコントリビューションを1つの拡張機能にまとめる方が便利な場合が多いです。例えば、新しい言語のサポートを追加する場合、カラー化を備えた言語定義だけでなく、スニペットやデバッグサポートも提供したいと考えるでしょう。

拡張機能のコントリビューションを組み合わせるには、既存の拡張機能マニフェスト 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 属性に、Marketplace での見つけやすさとフィルタリング向上のため、Programming Languages と Snippets の両方が含まれていることに注意してください。

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

拡張機能パック

個別の拡張機能を Extension Packs (拡張パック) にバンドルできます。Extension Pack とは、一緒にインストールされる拡張機能のセットです。これにより、お気に入りの拡張機能を他のユーザーと簡単に共有したり、PHP 開発のような特定のシナリオに合わせて、開発者が素早く VS Code を使い始められるようにセットを用意したりできます。

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

例えば、デバッガーと言語サービスを含む PHP 用の Extension Pack は以下の通りです。

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

Extension Pack をインストールすると、VS Code はその拡張機能の依存関係もインストールします。

Extension Pack は、Marketplace の Extension Packs カテゴリに分類されるべきです。

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

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

Extension Pack は、バンドルされた拡張機能と機能的な依存関係を持つべきではなく、バンドルされた拡張機能はパックとは独立して管理可能であるべきです。ある拡張機能が他の拡張機能に依存している場合は、その依存関係を 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 貢献ポイントのリファレンス。
• Activation Events - VS Code アクティベーションイベントのリファレンス
• Extension Marketplace - VS Code 拡張機能 Marketplace についての詳細