貢献ポイント

コントリビューションポイントとは、拡張機能マニフェストの package.json ファイルにある contributes フィールドで宣言する JSON 宣言のセットです。拡張機能は、Visual Studio Code 内のさまざまな機能を拡張するためにコントリビューションポイントを登録します。利用可能なすべてのコントリビューションポイントのリストを以下に示します。

contributes.authentication

認証プロバイダーを提供します。これにより、プロバイダーのアクティベーションイベントが設定され、拡張機能の機能として表示されます。

{
  "contributes": {
    "authentication": [
      {
        "label": "Azure DevOps",
        "id": "azuredevops"
      }
    ]
  }
}

contributes.breakpoints

通常、デバッガー拡張機能には、ブレークポイントの設定が有効になる言語ファイルの種類をリストする contributes.breakpoints エントリも含まれます。

{
  "contributes": {
    "breakpoints": [
      {
        "language": "javascript"
      },
      {
        "language": "javascriptreact"
      }
    ]
  }
}

contributes.chatInstructions

Copilot Chat 用の指示ファイルを提供します。指示ファイルは、Copilot の動作を制御するためにチャットリクエストに自動的に含まれるカスタムガイドラインを提供します。このコントリビューションポイントを使用して、コーディング規約、フレームワーク固有のガイドライン、ドメイン固有のルールなど、再利用可能な指示を拡張機能にバンドルします。

ユーザーのチャットリクエストが指示のユースケースに関連する場合、Copilot は提供された指示を自動的に適用します。手動で添付する必要はありません。

各エントリには、拡張機能のルートに対する Markdown ファイルへの path が必要です。指示が有効になるタイミングを制御するために、オプションで when 句を指定できます。name と description のメタデータは、コントリビューションポイントではなく、Markdown ファイル自体の中に指定してください。

{
  "contributes": {
    "chatInstructions": [
      {
        "path": "./prompts/textMateGuidelines.instructions.md"
      }
    ]
  }
}

オプションの when 句を使用して、コンテキストに基づいて指示を条件付きで有効にできます。

{
  "contributes": {
    "chatInstructions": [
      {
        "path": "./prompts/textMateGuidelines.instructions.md",
        "when": "resourceExtname == .tmLanguage"
      }
    ]
  }
}

chatInstructions プロパティ

プロパティ	タイプ	必須	説明
`path`	`string`	はい	拡張機能のルートに対する Markdown ファイルのパス。このパスは拡張機能内の場所に解決される必要があります。
`when`	`string`	なし	このエントリが有効になるために true である必要があるwhen 句の条件。

再利用可能なプロンプトファイルを提供する場合は、chatPromptFiles コントリビューションポイントを参照してください。

contributes.chatPromptFiles

Copilot Chat 用のプロンプトファイルを提供します。プロンプトファイルは、ユーザーがチャットでスラッシュコマンドとして呼び出すことができる再利用可能なチャットプロンプトです。このコントリビューションポイントを使用して、既製のプロンプトを拡張機能にバンドルします。

各エントリには、拡張機能のルートに対する Markdown ファイルへの path が必要です。プロンプトを条件付きで有効にするために、オプションで when 句を指定できます。name と description のメタデータは、コントリビューションポイント内ではなく、Markdown ファイル自体の中に指定してください。

{
  "contributes": {
    "chatPromptFiles": [
      {
        "path": "./prompts/reviewAndCreateIssue.prompt.md"
      }
    ]
  }
}

chatPromptFiles プロパティ

プロパティ	タイプ	必須	説明
`path`	`string`	はい	拡張機能のルートに対する Markdown ファイルのパス。このパスは拡張機能内の場所に解決される必要があります。
`when`	`string`	なし	このエントリが有効になるために true である必要があるwhen 句の条件。

再利用可能な指示ファイルを提供する場合は、chatInstructions コントリビューションポイントを参照してください。

contributes.chatSkills

Copilot Chat 用のエージェントスキルを提供します。エージェントスキルは、特殊なタスクを実行するためにCopilotが関連する場合にロードできる指示、スクリプト、およびリソースのフォルダーです。このコントリビューションポイントを使用して、再利用可能なスキルを拡張機能にバンドルします。

各エントリには、拡張機能のルートに対する SKILL.md ファイルへの path が必要です。SKILL.md ファイルはエージェントスキル仕様に従う必要があり、その name フィールドは親ディレクトリ名と一致する必要があります。オプションで when 句を指定して、スキルを条件付きで有効にできます。

{
  "contributes": {
    "chatSkills": [
      {
        "path": "./skills/my-skill/SKILL.md"
      }
    ]
  }
}

chatSkills プロパティ

プロパティ	タイプ	必須	説明
`path`	`string`	はい	拡張機能のルートに対する `SKILL.md` ファイルのパス。このパスは拡張機能内の場所に解決される必要があり、親ディレクトリ名が `SKILL.md` 内の `name` フィールドと一致する必要があります。
`when`	`string`	なし	このエントリが有効になるために true である必要があるwhen 句の条件。

必要なスキル構造と SKILL.md フォーマットについては、拡張機能からスキルをコントリビュートするを参照してください。

contributes.colors

新しいテーマ設定可能な色を提供します。これらの色は、エディターのデコレーターやステータスバーで拡張機能によって使用できます。一度定義されると、ユーザーはworkspace.colorCustomization設定で色をカスタマイズでき、ユーザーテーマは色の値を設定できます。

{
  "contributes": {
    "colors": [
      {
        "id": "superstatus.error",
        "description": "Color for error message in the status bar.",
        "defaults": {
          "dark": "errorForeground",
          "light": "errorForeground",
          "highContrast": "#010203",
          "highContrastLight": "#feedc3"
        }
      }
    ]
  }
}

ライト、ダーク、およびハイコントラストのテーマの色のデフォルト値を定義でき、既存の色への参照、またはカラー16進値のいずれかになります。

拡張機能は、ThemeColor API を使用して、新規および既存のテーマカラーを使用できます。

const errorColor = new vscode.ThemeColor('superstatus.error');

contributes.commands

タイトルと (オプションで) アイコン、カテゴリ、有効状態からなるコマンドの UI を提供します。有効化はwhen 句で表現されます。デフォルトでは、コマンドはコマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) に表示されますが、他のメニューにも表示できます。

提供されたコマンドの表示は、含まれるメニューによって異なります。例えば、コマンドパレットは、コマンドの前にそのcategoryを付けて、グループ化を容易にします。ただし、コマンドパレットはアイコンも無効なコマンドも表示しません。一方、エディターのコンテキストメニューは無効な項目を表示しますが、カテゴリラベルは表示しません。

注: コマンドが (キーバインディング、コマンドパレット、その他のメニュー、またはプログラムによって) 呼び出されると、VS Code はアクティベーションイベント onCommand:${command} を発行します。

注: プロダクトアイコンからアイコンを使用する場合、light と dark を設定するとアイコンが無効になります。正しい構文は "icon": "$(book)" です。

コマンドの例

{
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World",
        "category": "Hello",
        "icon": {
          "light": "path/to/light/icon.svg",
          "dark": "path/to/dark/icon.svg"
        }
      }
    ]
  }
}

VS Code 拡張機能でコマンドを使用する方法について詳しく学ぶには、コマンド拡張機能ガイドを参照してください。

commands extension point example

コマンドアイコンの仕様

サイズ: アイコンは 16x16 ピクセルで、1 ピクセルのパディング (画像は 14x14) があり、中央揃えにする必要があります。
色: アイコンは単一の色を使用する必要があります。
形式: アイコンは SVG 形式が推奨されますが、任意の画像ファイル形式も受け入れられます。

command icons

contributes.configuration

ユーザーに公開される設定を提供します。ユーザーは、設定エディターまたは `settings.json` ファイルを直接編集することで、これらの設定オプションを設定できます。

このセクションは、単一の設定カテゴリを表す単一のオブジェクト、または複数の設定カテゴリを表すオブジェクトの配列のいずれかになります。複数の設定カテゴリがある場合、設定エディターにはその拡張機能の目次にサブメニューが表示され、タイトルキーはサブメニューエントリ名に使用されます。

設定例

{
  "contributes": {
    "configuration": {
      "title": "Settings Editor Test Extension",
      "type": "object",
      "properties": {
        "settingsEditorTestExtension.booleanExample": {
          "type": "boolean",
          "default": true,
          "description": "Boolean Example"
        },
        "settingsEditorTestExtension.stringExample": {
          "type": "string",
          "default": "Hello World",
          "description": "String Example"
        }
      }
    }
  }
}

configuration extension point example

拡張機能からこれらの値を読み取るには、vscode.workspace.getConfiguration('myExtension') を使用します。

設定スキーマ

設定エントリは、JSON エディターで設定を編集する際にインテリセンスを提供するためと、設定 UI での表示方法を定義するために使用されます。

settings UI screenshot with numbers

title

カテゴリの title 1️⃣️ は、そのカテゴリの見出しとして使用されます。

{
  "configuration": {
    "title": "GitMagic"
  }
}

複数の設定カテゴリを持つ拡張機能の場合、カテゴリのいずれかのタイトルが拡張機能の表示名と同じであれば、設定 UI はそのカテゴリを「デフォルトカテゴリ」として扱い、そのカテゴリの order フィールドを無視し、その設定を主要な拡張機能の見出しの下に配置します。

title フィールドと displayName フィールドの両方で、「Extension」、「Configuration」、「Settings」などの単語は冗長です。

✔ "title": "GitMagic"
❌ "title": "GitMagic Extension"
❌ "title": "GitMagic Configuration"
❌ "title": "GitMagic Extension Configuration Settings"

properties

configuration オブジェクト内の properties 2️⃣ は辞書を形成し、キーは設定 ID であり、値は設定に関する詳細情報を提供します。拡張機能は複数の設定カテゴリを含むことができますが、拡張機能の各設定は依然として独自のユニークな ID を持つ必要があります。設定 ID は、他の設定 ID の完全なプレフィックスにはできません。

明示的な order フィールドを持たないプロパティは、設定 UI で辞書順に表示されます (マニフェストに記載されている順序では**ありません**)。

設定のタイトル

設定 UI では、複数のフィールドを使用して各設定の表示タイトルが構築されます。キーの大文字は単語の区切りを示すために使用されます。

単一カテゴリおよびデフォルトカテゴリの設定の表示タイトル

設定が単一のカテゴリである場合、またはカテゴリが拡張機能の表示名と同じタイトルを持つ場合、そのカテゴリ内の設定については、設定 UI は設定 ID と拡張機能の name フィールドを使用して表示タイトルを決定します。

例えば、設定 ID が gitMagic.blame.dateFormat で、拡張機能名が authorName.gitMagic の場合、設定 ID のプレフィックスが拡張機能名のサフィックスと一致するため、表示タイトルから gitMagic の部分が削除され、「Blame: Date Format」となります。

複数カテゴリの設定の表示タイトル

設定が複数のカテゴリを持つ場合、かつカテゴリが拡張機能の表示名と同じタイトルを持たない場合、そのカテゴリ内の設定については、設定 UI は設定 ID とカテゴリの id フィールドを使用して表示タイトルを決定します。

例えば、設定 ID が css.completion.completePropertyWithSemicolon で、カテゴリ ID が css の場合、設定 ID のプレフィックスがカテゴリ ID のサフィックスと一致するため、設定 UI では設定 ID の css の部分が削除され、設定の生成されるタイトルは「Completion: Complete Property With Semicolon」となります。

設定プロパティスキーマ

設定キーは、JSON Schema のスーパーセットを使用して定義されます。

description / markdownDescription

description 3️⃣ はタイトルの後に表示され、入力フィールドの前に表示されます。ただし、ブール型の場合、説明はチェックボックスのラベルとして使用されます。6️⃣

{
  "gitMagic.blame.heatMap.enabled": {
    "description": "Specifies whether to provide a heatmap indicator in the gutter blame annotations"
  }
}

description の代わりに markdownDescription を使用すると、設定 UI で設定の説明が Markdown として解析されます。

{
  "gitMagic.blame.dateFormat": {
    "markdownDescription": "Specifies how to format absolute dates (e.g. using the `${date}` token) in gutter blame annotations. See the [Moment.js docs](https://momentjs.dokyumento.jp/docs/#/displaying/format/) for valid formats"
  }
}

markdownDescription の場合、改行または複数の段落を追加するには、\n だけでなく、段落を区切るために文字列 \n\n を使用します。

type

number 4️⃣、string 5️⃣、boolean 6️⃣ 型のエントリは、設定 UI で直接編集できます。

{
  "gitMagic.views.pageItemLimit": {
    "type": "number",
    "default": 20,
    "markdownDescription": "Specifies the number of items to show in each page when paginating a view list. Use 0 to specify no limit"
  }
}

文字列設定は、構成エントリに "editPresentation": "multilineText" が設定されている場合、複数行テキスト入力でレンダリングできます。

boolean エントリの場合、markdownDescription (markdownDescription が指定されていない場合は description) がチェックボックスの横のラベルとして使用されます。

{
  "gitMagic.blame.compact": {
    "type": "boolean",
    "description": "Specifies whether to compact (deduplicate) matching adjacent gutter blame annotations"
  }
}

一部の object 型および array 型の設定は、設定 UI でレンダリングされます。number、string、または boolean の単純な配列は、編集可能なリストとしてレンダリングされます。string、number、integer、および/または boolean 型のプロパティを持つオブジェクトは、キーと値の編集可能なグリッドとしてレンダリングされます。オブジェクト設定は、UI でレンダリングするために、additionalProperties を false に設定するか、適切な type プロパティを持つオブジェクトに設定する必要もあります。

object または array 型の設定に、ネストされたオブジェクト、配列、または null などの他の型も含まれる場合、その値は設定 UI でレンダリングされず、JSON を直接編集することによってのみ変更できます。ユーザーには、上記のスクリーンショットに示されているように、settings.json で編集へのリンクが表示されます。8️⃣

order

カテゴリとそのカテゴリ内の設定の両方に、整数型の order プロパティを指定できます。これにより、他のカテゴリや設定との相対的な並べ替え順序が参照されます。

2つのカテゴリに order プロパティがある場合、order 番号が小さいカテゴリが最初に表示されます。カテゴリに order プロパティが指定されていない場合、そのプロパティが与えられたカテゴリの後に表示されます。

同じカテゴリ内の2つの設定に order プロパティがある場合、order 番号が小さい設定が最初に表示されます。その同じカテゴリ内の別の設定に order プロパティが指定されていない場合、そのプロパティが与えられたカテゴリ内の設定の後に表示されます。

2つのカテゴリが同じ order プロパティ値を持つ場合、または同じカテゴリ内の2つの設定が同じ order プロパティ値を持つ場合、設定 UI ではそれらは辞書順に昇順で並べ替えられます。

enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels

enum 7️⃣ プロパティの下に項目の配列を提供すると、設定 UI はそれらの項目のドロップダウンメニューをレンダリングします。

enumDescriptions プロパティも提供できます。これは、enum プロパティと同じ長さの文字列の配列です。enumDescriptions プロパティは、各 enum 項目に対応するドロップダウンメニューの下部に設定 UI で説明を提供します。
enumDescriptions の代わりに markdownEnumDescriptions を使用することもでき、その場合、説明は Markdown として解析されます。markdownEnumDescriptions は enumDescriptions よりも優先されます。
設定 UI のドロップダウンオプション名をカスタマイズするには、enumItemLabels を使用できます。

例

{
  "settingsEditorTestExtension.enumSetting": {
    "type": "string",
    "enum": ["first", "second", "third"],
    "markdownEnumDescriptions": [
      "The *first* enum",
      "The *second* enum",
      "The *third* enum"
    ],
    "enumItemLabels": ["1st", "2nd", "3rd"],
    "default": "first",
    "description": "Example setting with an enum"
  }
}

settings UI screenshot of example enum setting above

deprecationMessage / markdownDeprecationMessage

deprecationMessage または markdownDeprecationMessage を設定すると、設定は指定されたメッセージとともに警告の下線が引かれます。また、ユーザーが設定していない限り、設定は設定 UI から非表示になります。markdownDeprecationMessage を設定しても、Markdown は設定ホバーまたは問題ビューにはレンダリングされません。両方のプロパティを設定した場合、deprecationMessage はホバーと問題ビューに表示され、markdownDeprecationMessage は設定 UI で Markdown としてレンダリングされます。

例

{
  "json.colorDecorators.enable": {
    "type": "boolean",
    "description": "Enables or disables color decorators",
    "markdownDeprecationMessage": "**Deprecated**: Please use `#editor.colorDecorators#` instead.",
    "deprecationMessage": "Deprecated: Please use editor.colorDecorators instead."
  }
}

その他の JSON Schema プロパティ

バリデーション JSON Schema の任意のプロパティを使用して、設定値に関するその他の制約を記述できます。

プロパティのデフォルト値を定義するための default
数値の制限のための minimum と maximum
文字列の長さを制限するための maxLength、minLength
文字列を特定の正規表現に制限するための pattern
パターンが一致しない場合にカスタマイズされたエラーメッセージを提供するための patternErrorMessage
date、time、ipv4、email、uri などの既知の形式に文字列を制限するための format
配列の長さを制限するための maxItems、minItems
設定エディターで文字列設定に対して単一行入力ボックスまたは複数行テキストエリアがレンダリングされるかどうかを制御するための editPresentation

サポートされていない JSON Schema プロパティ

設定セクションでは、以下はサポートされていません。

$ref および definition: 設定スキーマは自己完結型である必要があり、集約された設定 JSON スキーマドキュメントがどのように見えるかについて仮定することはできません。

これらの機能やその他の機能の詳細については、JSON Schema リファレンスを参照してください。

scope

設定には、以下のいずれかのスコープを設定できます。

application - VS Code のすべてのインスタンスに適用され、ユーザー設定でのみ構成できる設定。
machine - ユーザー設定またはリモート設定でのみ設定できる、マシン固有の設定。例えば、マシン間で共有すべきではないインストールパスなど。これらの設定の値は同期されません。
machine-overridable - ワークスペースまたはフォルダー設定で上書きできる、マシン固有の設定。これらの設定の値は同期されません。
window - ユーザー、ワークスペース、またはリモート設定で構成できる、ウィンドウ (インスタンス) 固有の設定。
resource - ファイルとフォルダーに適用され、フォルダー設定を含むすべての設定レベルで構成できるリソース設定。
language-overridable - 言語レベルで上書きできるリソース設定。

設定スコープは、設定が設定エディターを通じてユーザーに利用可能になるタイミングと、その設定が適用可能かどうかを決定します。scope が宣言されていない場合、デフォルトは window です。

以下は、組み込みの Git 拡張機能の設定スコープの例です。

{
  "contributes": {
    "configuration": {
      "title": "Git",
      "properties": {
        "git.alwaysSignOff": {
          "type": "boolean",
          "scope": "resource",
          "default": false,
          "description": "%config.alwaysSignOff%"
        },
        "git.ignoredRepositories": {
          "type": "array",
          "default": [],
          "scope": "window",
          "description": "%config.ignoredRepositories%"
        },
        "git.autofetch": {
          "type": ["boolean", "string"],
          "enum": [true, false, "all"],
          "scope": "resource",
          "markdownDescription": "%config.autofetch%",
          "default": false,
          "tags": ["usesOnlineServices"]
        }
      }
    }
  }
}

git.alwaysSignOff は resource スコープを持ち、ユーザー、ワークスペース、またはフォルダーごとに設定できるのに対し、window スコープを持つ無視されたリポジトリリストは、VS Code ウィンドウまたはワークスペース (マルチルートの場合もあります) に対してよりグローバルに適用されることがわかります。

ignoreSync

ignoreSync を true に設定すると、設定がユーザーの設定と同期されるのを防ぐことができます。これは、ユーザー固有ではない設定に役立ちます。例えば、remoteTunnelAccess.machineName 設定はユーザー固有ではないため、同期すべきではありません。scope を machine または machine-overridable に設定した場合、ignoreSync の値に関係なく設定は同期されないことに注意してください。

{
  "contributes": {
    "configuration": {
      "properties": {
        "remoteTunnelAccess.machineName": {
          "type": "string",
          "default": "",
          "ignoreSync": true
        }
      }
    }
  }
}

設定へのリンク

Markdown 型のプロパティでこの特殊な構文 `#target.setting.id#` を使用すると、設定 UI でクリック可能なリンクとしてレンダリングされる別の設定へのリンクを挿入できます。これは markdownDescription、markdownEnumDescriptions、および markdownDeprecationMessage で機能します。例:

  "files.autoSaveDelay": {
    "markdownDescription": "Controls the delay in ms after which a dirty editor is saved automatically. Only applies when `#files.autoSave#` is set to `afterDelay`.",
    // ...
  }

設定 UI では、これは次のようにレンダリングされます。

setting link example

contributes.configurationDefaults

他の登録済み設定のデフォルト値を提供し、それらのデフォルトを上書きします。

以下の例では、files.autoSave 設定のデフォルトの動作を上書きし、フォーカス変更時にファイルを自動保存します。

"configurationDefaults": {
      "files.autoSave": "onFocusChange"
}

また、指定された言語のデフォルトエディター設定を提供することもできます。例えば、以下のスニペットは markdown 言語のデフォルトエディター設定を提供します。

{
  "contributes": {
    "configurationDefaults": {
      "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
          "comments": "off",
          "strings": "off",
          "other": "off"
        }
      }
    }
  }
}

contributes.customEditors

customEditors コントリビューションポイントは、拡張機能が提供するカスタムエディターについて VS Code に伝える方法です。例えば、VS Code はカスタムエディターがどの種類のファイルで動作するか、および任意の UI でカスタムエディターを識別する方法を知る必要があります。

カスタムエディター拡張機能サンプルの基本的な customEditor コントリビューションを以下に示します。

"contributes": {
  "customEditors": [
    {
      "viewType": "catEdit.catScratch",
      "displayName": "Cat Scratch",
      "selector": [
        {
          "filenamePattern": "*.cscratch"
        }
      ],
      "priority": "default"
    }
  ]
}

customEditors は配列なので、拡張機能は複数のカスタムエディターを提供できます。

viewType - カスタムエディターのユニークな識別子。

これは、VS Code が package.json 内のカスタムエディターのコントリビューションをコード内のカスタムエディター実装に結び付ける方法です。これはすべての拡張機能間でユニークである必要があるため、汎用的な viewType (例: "preview") の代わりに、拡張機能にユニークなもの (例: "viewType": "myAmazingExtension.svgPreview") を使用してください。
displayName - VS Code の UI でカスタムエディターを識別する名前。

表示名は、表示: 再開方法 ドロップダウンなどの VS Code UI でユーザーに表示されます。
selector - カスタムエディターがアクティブになるファイルを指定します。

selector は、1つ以上のglob パターンの配列です。これらの glob パターンはファイル名と照合され、カスタムエディターがそれらに使用できるかどうかを判断します。*.png のような filenamePattern は、すべての PNG ファイルでカスタムエディターを有効にします。

また、**/translations/*.json のように、ファイル名またはディレクトリ名に一致するより具体的なパターンを作成することもできます。
priority - (オプション) カスタムエディターが使用されるタイミングを指定します。

priority は、リソースが開いているときにカスタムエディターが使用されるタイミングを制御します。可能な値は次のとおりです。
- "default" - カスタムエディターの selector に一致するすべてのファイルにカスタムエディターを使用しようとします。指定されたファイルに対して複数のカスタムエディターがある場合、ユーザーは使用したいカスタムエディターを選択する必要があります。
- "option" - デフォルトではカスタムエディターを使用しませんが、ユーザーがそれに切り替えたり、デフォルトとして設定したりすることを許可します。

詳細については、カスタムエディター拡張機能ガイドを参照してください。

contributes.debuggers

VS Code にデバッガーを提供します。デバッガーのコントリビューションには以下のプロパティがあります。

type は、起動構成でこのデバッガーを識別するために使用されるユニークな ID です。
label は、UI でのこのデバッガーのユーザーに見える名前です。
program は、実際のデバッガーまたはランタイムに対して VS Code デバッグプロトコルを実装するデバッグアダプターへのパスです。
runtime は、デバッグアダプターへのパスが実行可能ファイルではなく、ランタイムが必要な場合に使用します。
configurationAttributes は、このデバッガーに固有の起動構成引数のスキーマです。JSON スキーマの構成要素 $ref と definition はサポートされていないことに注意してください。
initialConfigurations は、初期の `launch.json` を設定するために使用される起動構成をリストします。
configurationSnippets は、`launch.json` を編集する際に IntelliSense を通じて利用できる起動構成をリストします。
variables は、置換変数を導入し、それらをデバッガー拡張機能によって実装されるコマンドにバインドします。
languages は、デバッグ拡張機能が「デフォルトのデバッガー」と見なされ得る言語です。

デバッガーの例

{
  "contributes": {
    "debuggers": [
      {
        "type": "node",
        "label": "Node Debug",

        "program": "./out/node/nodeDebug.js",
        "runtime": "node",

        "languages": ["javascript", "typescript", "javascriptreact", "typescriptreact"],

        "configurationAttributes": {
          "launch": {
            "required": ["program"],
            "properties": {
              "program": {
                "type": "string",
                "description": "The program to debug."
              }
            }
          }
        },

        "initialConfigurations": [
          {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js"
          }
        ],

        "configurationSnippets": [
          {
            "label": "Node.js: Attach Configuration",
            "description": "A new configuration for attaching to a running node program.",
            "body": {
              "type": "node",
              "request": "attach",
              "name": "${2:Attach to Port}",
              "port": 9229
            }
          }
        ],

        "variables": {
          "PickProcess": "extension.node-debug.pickNodeProcess"
        }
      }
    ]
  }
}

debugger を統合する方法に関する完全なチュートリアルについては、デバッガー拡張機能を参照してください。

contributes.grammars

言語に TextMate 文法を提供します。この文法が適用される language、文法の TextMate scopeName、およびファイルパスを指定する必要があります。

注: 文法を含むファイルは JSON 形式 (ファイル名が .json で終わる) または XML plist 形式 (その他のすべてのファイル) で指定できます。

文法の例

{
  "contributes": {
    "grammars": [
      {
        "language": "markdown",
        "scopeName": "text.html.markdown",
        "path": "./syntaxes/markdown.tmLanguage.json",
        "embeddedLanguages": {
          "meta.embedded.block.frontmatter": "yaml"
        }
      }
    ]
  }
}

構文ハイライトを受け取るために、言語に関連付けられた TextMate 文法を登録する方法について詳しく学ぶには、構文ハイライトガイドを参照してください。

grammars extension point example

contributes.icons

ID とデフォルトアイコンを使用して新しいアイコンを提供します。アイコン ID は、ThemeIcon が使用できる場所 (new ThemeIcon("iconId"))、Markdown 文字列 ($(iconId))、および特定のコントリビューションポイントのアイコンとして、拡張機能 (またはその拡張機能に依存する他の拡張機能) によって使用できます。

{
  "contributes": {
    "icons": {
      "distro-ubuntu": {
        "description": "Ubuntu icon",
        "default": {
          "fontPath": "./distroicons.woff",
          "fontCharacter": "\\E001"
        }
      },
      "distro-fedora": {
        "description": "Ubuntu icon",
        "default": {
          "fontPath": "./distroicons.woff",
          "fontCharacter": "\\E002"
        }
      }
    }
  }
}

contributes.iconThemes

VS Code にファイルアイコンテーマを提供します。ファイルアイコンはファイル名の横に表示され、ファイルの種類を示します。

ID (設定で使用)、ラベル、およびファイルアイコン定義ファイルへのパスを指定する必要があります。

ファイルアイコンテーマの例

{
  "contributes": {
    "iconThemes": [
      {
        "id": "my-cool-file-icons",
        "label": "Cool File Icons",
        "path": "./fileicons/cool-file-icon-theme.json"
      }
    ]
  }
}

ファイルアイコンテーマの作成方法については、ファイルアイコンテーマガイドを参照してください。

contributes.jsonValidation

特定の種類の json ファイルのバリデーションスキーマを提供します。url 値は、拡張機能に含まれるスキーマファイルへのローカルパス、またはjson スキーマストアなどのリモートサーバー URL のいずれかです。

{
  "contributes": {
    "jsonValidation": [
      {
        "fileMatch": ".jshintrc",
        "url": "https://json.schemastore.org/jshintrc"
      }
    ]
  }
}

contributes.keybindings

ユーザーがキーの組み合わせを押したときに呼び出されるべきコマンドを定義するキーバインディングルールを提供します。キーバインディングのトピックでキーバインディングが詳細に説明されています。

キーバインディングを提供すると、デフォルトのキーボードショートカットにルールが表示され、コマンドのすべての UI 表現に、追加したキーバインディングが表示されます。そしてもちろん、ユーザーがキーの組み合わせを押すと、コマンドが呼び出されます。

注: VS Code は Windows、macOS、Linux で動作し、修飾キーが異なるため、「key」を使用してデフォルトのキーの組み合わせを設定し、特定のプラットフォームで上書きできます。

注: コマンドが (キーバインディングまたはコマンドパレットから) 呼び出されると、VS Code はアクティベーションイベント onCommand:${command} を発行します。

キーバインディングの例

Windows および Linux で Ctrl+F1、macOS で Cmd+F1 が "extension.sayHello" コマンドをトリガーするように定義します。

{
  "contributes": {
    "keybindings": [
      {
        "command": "extension.sayHello",
        "key": "ctrl+f1",
        "mac": "cmd+f1",
        "when": "editorTextFocus"
      }
    ]
  }
}

keybindings extension point example

contributes.languages

プログラミング言語の定義を提供します。これにより、新しい言語が導入されるか、VS Code が言語に関して持っている知識が豊かになります。

contributes.languages の主な効果は次のとおりです。

vscode.TextDocument.languageId や onLanguage アクティベーションイベントなど、VS Code API の他の部分で再利用できる languageId を定義します。
- aliases フィールドを使用して人間が読める名前を提供できます。リストの最初の項目が、人間が読めるラベルとして使用されます。
ファイル名拡張子 (extensions)、ファイル名 (filenames)、ファイル名グロブパターン (filenamePatterns)、特定の行 (ハッシュバンなど) で始まるファイル (firstLine)、および mimetypes をその languageId に関連付けます。
提供された言語に対して一連の宣言型言語機能を提供します。言語構成ガイドで設定可能な編集機能について詳しく学んでください。
テーマに言語のアイコンが含まれていない場合、ファイルアイコンテーマで使用できるアイコンを提供します。

言語の例

{
  "contributes": {
    "languages": [
      {
        "id": "python",
        "extensions": [".py"],
        "aliases": ["Python", "py"],
        "filenames": [],
        "firstLine": "^#!/.*\\bpython[0-9.-]*\\b",
        "configuration": "./language-configuration.json",
        "icon": {
          "light": "./icons/python-light.png",
          "dark": "./icons/python-dark.png"
        }
      }
    ]
  }
}

contributes.menus

エディターまたはエクスプローラーにコマンドのメニュー項目を提供します。メニュー項目の定義には、選択されたときに呼び出されるべきコマンドと、項目が表示されるべき条件が含まれています。後者は、キーバインディングのwhen 句コンテキストを使用する when 句で定義されます。

command プロパティは、メニュー項目を選択したときに実行するコマンドを示します。submenu プロパティは、この場所にレンダリングするサブメニューを示します。

command メニュー項目を宣言する際、alt プロパティを使用して代替コマンドを定義することもできます。メニューを開くときに Alt を押すと表示され、呼び出されます。Windows および Linux では Shift も同じ動作をします。これは Alt がウィンドウのメニューバーをトリガーする状況で役立ちます。

最後に、group プロパティはメニュー項目の並べ替えとグループ化を定義します。navigation グループは、常にメニューの先頭/開始に並べ替えられるため、特殊です。

when 句はメニューに適用され、enablement 句はコマンドに適用されることに注意してください。enablement はすべてのメニューとキーバインディングに適用されますが、when は単一のメニューにのみ適用されます。

現在、拡張機能開発者は以下にコントリビュートできます。

commandPalette - グローバルコマンドパレット
comments/comment/title - コメントタイトルメニューバー
comments/comment/context - コメントコンテキストメニュー
comments/commentThread/title - コメントスレッドタイトルメニューバー
comments/commentThread/context- コメントスレッドコンテキストメニュー
debug/callstack/context - デバッグ呼び出しスタックビューコンテキストメニュー
debug/callstack/context グループ inline - デバッグ呼び出しスタックビューインラインアクション
debug/toolBar - デバッグビューツールバー
debug/variables/context - デバッグ変数ビューコンテキストメニュー
editor/context - エディターコンテキストメニュー
editor/lineNumber/context - エディター行番号コンテキストメニュー
editor/title - エディタータイトルメニューバー
editor/title/context - エディタータイトルコンテキストメニュー
editor/title/run - エディタータイトルメニューバーの実行サブメニュー
explorer/context - エクスプローラービューコンテキストメニュー
extension/context - 拡張機能ビューコンテキストメニュー
file/newFile - ファイルメニューおよびようこそページの新しいファイル項目
interactive/toolbar - 対話型ウィンドウツールバー
interactive/cell/title - 対話型ウィンドウセルタイトルメニューバー
notebook/toolbar - ノートブックツールバー
notebook/cell/title - ノートブックセルタイトルメニューバー
notebook/cell/execute - ノートブックセル実行メニュー
scm/title - SCM タイトルメニュー
scm/resourceGroup/context - SCM リソースグループメニュー
scm/resourceFolder/context - SCM リソースフォルダーメニュー
scm/resourceState/context - SCM リソースメニュー
scm/change/title - SCM 変更タイトルメニュー
scm/repository - SCM リポジトリメニュー
scm/sourceControl- SCM ソースコントロールメニュー
terminal/context - ターミナルコンテキストメニュー
terminal/title/context - ターミナルタイトルコンテキストメニュー
testing/item/context - テストエクスプローラー項目コンテキストメニュー
testing/item/gutter - テスト項目のガターデコレーション用メニュー
timeline/title - タイムラインビュータイトルメニューバー
timeline/item/context - タイムラインビュー項目コンテキストメニュー
touchBar - macOS Touch Bar
view/title - ビュータイトルメニュー
view/item/context - ビュー項目コンテキストメニュー
webview/context - 任意のウェブビューコンテキストメニュー
任意のコントリビュートされたサブメニュー

注 1: (コンテキスト) メニューからコマンドが呼び出されると、VS Code は現在選択されているリソースを推測し、コマンドを呼び出す際にそれをパラメーターとして渡そうとします。例えば、エクスプローラー内のメニュー項目には選択されたリソースの URI が渡され、エディター内のメニュー項目にはドキュメントの URI が渡されます。

注 2: editor/lineNumber/context にコントリビュートされたメニュー項目のコマンドには、行番号も渡されます。さらに、これらの項目は when 句で editorLineNumber コンテキストキーを参照できます。例えば、in または not in 演算子を使用して、拡張機能によって管理される配列値のコンテキストキーに対してテストできます。

タイトルに加えて、コントリビュートされたコマンドは、呼び出し元のメニュー項目がボタンとして表示される場合に VS Code が表示するアイコンを指定できます。例えば、タイトルメニューバー上などです。

コマンドメニュー項目はこちらです。

{
  "contributes": {
    "menus": {
      "editor/title": [
        {
          "when": "resourceLangId == markdown",
          "command": "markdown.showPreview",
          "alt": "markdown.showPreviewToSide",
          "group": "navigation"
        }
      ]
    }
  }
}

menus extension point example

同様に、特定のビューに追加されたコマンドメニュー項目はこちらです。以下の例は、ターミナルなどの任意のビューにコントリビュートしています。

{
  "contributes": {
    "menus": {
      "view/title": [
        {
          "command": "terminalApi.sendText",
          "when": "view == terminal",
          "group": "navigation"
        }
      ]
    }
  }
}

Adding a menu entry to view/title with view == terminal will result in an action in the panel when the terminal is open

サブメニュー項目はこちらです。

{
  "contributes": {
    "menus": {
      "scm/title": [
        {
          "submenu": "git.commit",
          "group": "2_main@1",
          "when": "scmProvider == git"
        }
      ]
    }
  }
}

menus extension point example (submenu)

package.json でコマンドを登録すると、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) に自動的に表示されます。コマンドの可視性をより細かく制御するために、commandPalette メニュー項目があります。これにより、コマンドがコマンドパレットに表示されるべきかどうかを制御するための when 条件を定義できます。

以下のスニペットは、エディターで何かが選択されている場合にのみ、「Hello World」コマンドがコマンドパレットに表示されるようにします。

{
  "commands": [
    {
      "command": "extension.sayHello",
      "title": "Hello World"
    }
  ],
  "menus": {
    "commandPalette": [
      {
        "command": "extension.sayHello",
        "when": "editorHasSelection"
      }
    ]
  }
}

グループの並べ替え

メニュー項目はグループに並べ替えることができます。それらは以下のデフォルト/ルールに従って辞書順に並べ替えられます。これらのグループにメニュー項目を追加したり、その間、下、または上に新しいメニュー項目グループを追加したりできます。

エディターコンテキストメニューには、以下のデフォルトグループがあります。

navigation - navigation グループは常に最初に表示されます。
1_modification - このグループは次に表示され、コードを変更するコマンドが含まれます。
9_cutcopypaste - 基本的な編集コマンドを含む、最後から2番目のデフォルトグループ。
z_commands - コマンドパレットを開くエントリを含む、最後のデフォルトグループ。

Menu Group Sorting

エクスプローラーコンテキストメニューには、以下のデフォルトグループがあります。

navigation - VS Code 全体でのナビゲーションに関連するコマンド。このグループは常に最初に表示されます。
2_workspace - ワークスペース操作に関連するコマンド。
3_compare - 差分エディターでのファイル比較に関連するコマンド。
4_search - 検索ビューでの検索に関連するコマンド。
5_cutcopypaste - ファイルの切り取り、コピー、貼り付けに関連するコマンド。
6_copypath - ファイルパスのコピーに関連するコマンド。
7_modification - ファイルの変更に関連するコマンド。

エディタータブコンテキストメニューには、以下のデフォルトグループがあります。

1_close - エディターの閉鎖に関連するコマンド。
3_preview - エディターのピン留めに関連するコマンド。

エディタータイトルメニューには、以下のデフォルトグループがあります。

navigation - ナビゲーションに関連するコマンド。
1_run - エディターの実行とデバッグに関連するコマンド。
1_diff - 差分エディターでの作業に関連するコマンド。
3_open - エディターの開閉に関連するコマンド。
5_close - エディターの閉鎖に関連するコマンド。

navigation と 1_run は主要なエディタータイトル領域に表示されます。他のグループは、セカンダリ領域 (`...` メニューの下) に表示されます。

ターミナルタブコンテキストメニューには、以下のデフォルトグループがあります。

1_create - ターミナルの作成に関連するコマンド。
3_run - ターミナルで何かを実行/実行に関連するコマンド。
5_manage - ターミナルの管理に関連するコマンド。
7_configure - ターミナル構成に関連するコマンド。

ターミナルコンテキストメニューには、以下のデフォルトグループがあります。

1_create - ターミナルの作成に関連するコマンド。
3_edit - テキスト、選択範囲、またはクリップボードの操作に関連するコマンド。
5_clear - ターミナルのクリアに関連するコマンド。
7_kill - ターミナルの閉鎖/終了に関連するコマンド。
9_config - ターミナル構成に関連するコマンド。

タイムラインビュー項目コンテキストメニューには、以下のデフォルトグループがあります。

inline - 重要な、または頻繁に使用されるタイムライン項目コマンド。ツールバーとしてレンダリングされます。
1_actions - タイムライン項目での作業に関連するコマンド。
5_copy - タイムライン項目の情報のコピーに関連するコマンド。

拡張機能ビューコンテキストメニューには、以下のデフォルトグループがあります。

1_copy - 拡張機能情報のコピーに関連するコマンド。
2_configure - 拡張機能の構成に関連するコマンド。

グループ内の並べ替え

グループ内の順序は、タイトルまたは `order` 属性に依存します。メニュー項目のグループ内ローカル順序は、以下に示すようにグループ識別子に @<number> を追加することで指定されます。

{
  "editor/title": [
    {
      "when": "editorHasSelection",
      "command": "extension.Command",
      "group": "myGroup@1"
    }
  ]
}

contributes.problemMatchers

問題マッチャーパターンを提供します。これらのコントリビューションは、出力パネルランナーとターミナルランナーの両方で機能します。以下は、拡張機能で gcc コンパイラの問題マッチャーを提供する例です。

{
  "contributes": {
    "problemMatchers": [
      {
        "name": "gcc",
        "owner": "cpp",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
          "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
          "file": 1,
          "line": 2,
          "column": 3,
          "severity": 4,
          "message": 5
        }
      }
    ]
  }
}

この問題マッチャーは、tasks.json ファイルで名前参照 $gcc を介して使用できるようになりました。例は次のようになります。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "gcc",
      "args": ["-Wall", "helloWorld.c", "-o", "helloWorld"],
      "problemMatcher": "$gcc"
    }
  ]
}

こちらも参照: 問題マッチャーの定義

contributes.problemPatterns

問題マッチャー (上記参照) で使用できる名前付き問題パターンを提供します。

contributes.productIconThemes

VS Code にプロダクトアイコンテーマを提供します。プロダクトアイコンは、ファイルアイコンと拡張機能から提供されたアイコンを除く、VS Code で使用されるすべてのアイコンです。

ID (設定で使用)、ラベル、およびアイコン定義ファイルへのパスを指定する必要があります。

プロダクトアイコンテーマの例

{
  "contributes": {
    "productIconThemes": [
      {
        "id": "elegant",
        "label": "Elegant Icon Theme",
        "path": "./producticons/elegant-product-icon-theme.json"
      }
    ]
  }
}

プロダクトアイコンテーマの作成方法については、プロダクトアイコンテーマガイドを参照してください。

contributes.resourceLabelFormatters

ワークベンチのあらゆる場所で URI を表示する方法を指定するリソースラベルフォーマッターを提供します。例えば、`remotehub` スキームを持つ URI のフォーマッターを拡張機能が提供する方法を以下に示します。

{
  "contributes": {
    "resourceLabelFormatters": [
      {
        "scheme": "remotehub",
        "formatting": {
          "label": "${path}",
          "separator": "/",
          "workspaceSuffix": "GitHub"
        }
      }
    ]
  }
}

これは、`remotehub` スキームを持つすべての URI が、URI の path セグメントのみを表示してレンダリングされ、セパレーターが / になることを意味します。`remotehub` URI を持つワークスペースは、ラベルに GitHub サフィックスを持ちます。

contributes.semanticTokenModifiers

テーマルールを通じてハイライトできる新しいセマンティックトークン修飾子を提供します。

{
  "contributes": {
    "semanticTokenModifiers": [
      {
        "id": "native",
        "description": "Annotates a symbol that is implemented natively"
      }
    ]
  }
}

セマンティックハイライトについて詳しく読むには、セマンティックハイライトガイドを参照してください。

contributes.semanticTokenScopes

セマンティックトークンの型と修飾子、およびスコープ間のマッピングを、フォールバックとして、または言語固有のテーマをサポートするために提供します。

{
  "contributes": {
    "semanticTokenScopes": [
      {
        "language": "typescript",
        "scopes": {
          "property.readonly": ["variable.other.constant.property.ts"]
        }
      }
    ]
  }
}

セマンティックハイライトについて詳しく読むには、セマンティックハイライトガイドを参照してください。

contributes.semanticTokenTypes

テーマルールを通じてハイライトできる新しいセマンティックトークン型を提供します。

{
  "contributes": {
    "semanticTokenTypes": [
      {
        "id": "templateType",
        "superType": "type",
        "description": "A template type."
      }
    ]
  }
}

セマンティックハイライトについて詳しく読むには、セマンティックハイライトガイドを参照してください。

contributes.snippets

特定の言語のスニペットを提供します。language 属性は言語識別子であり、path はスニペットファイルへの相対パスで、VS Code スニペット形式でスニペットを定義します。

以下の例は、Go 言語のスニペットの追加を示しています。

{
  "contributes": {
    "snippets": [
      {
        "language": "go",
        "path": "./snippets/go.json"
      }
    ]
  }
}

contributes.submenus

メニュー項目がコントリビュートできるプレースホルダーとしてサブメニューを提供します。サブメニューは、親メニューに表示される label が必要です。

タイトルに加えて、コマンドは VS Code がエディタータイトルメニューバーに表示するアイコンも定義できます。

サブメニューの例

{
  "contributes": {
    "submenus": [
      {
        "id": "git.commit",
        "label": "Commit"
      }
    ]
  }
}

submenus extension point example

contributes.taskDefinitions

システム内でコントリビュートされたタスクを一意に識別できるオブジェクトリテラル構造を提供および定義します。タスク定義は少なくとも type プロパティを持ちますが、通常は追加のプロパティを定義します。例えば、`package.json` ファイル内のスクリプトを表すタスクのタスク定義は次のようになります。

{
  "taskDefinitions": [
    {
      "type": "npm",
      "required": ["script"],
      "properties": {
        "script": {
          "type": "string",
          "description": "The script to execute"
        },
        "path": {
          "type": "string",
          "description": "The path to the package.json file. If omitted the package.json in the root of the workspace folder is used."
        }
      }
    }
  ]
}

タスク定義は、required プロパティと properties プロパティに JSON スキーマ構文を使用して定義されます。type プロパティはタスクの型を定義します。上記の例では、

"type": "npm" はタスク定義を npm タスクに関連付けます。
"required": [ "script" ] は script 属性を必須として定義します。path プロパティはオプションです。
"properties" : { ... } は追加のプロパティとその型を定義します。

拡張機能が実際にタスクを作成する場合、`package.json` ファイルでコントリビュートされたタスク定義に準拠する TaskDefinition を渡す必要があります。npm の例では、`package.json` ファイル内のテストスクリプトのタスク作成は次のようになります。

let task = new vscode.Task({ type: 'npm', script: 'test' }, ....);

contributes.terminal

VS Code にターミナルプロファイルを提供し、拡張機能がプロファイルの作成を処理できるようにします。定義されると、プロファイルはターミナルプロファイル作成時に表示されるはずです。

{
  "activationEvents": ["onTerminalProfile:my-ext.terminal-profile"],
  "contributes": {
    "terminal": {
      "profiles": [
        {
          "title": "Profile from extension",
          "id": "my-ext.terminal-profile"
        }
      ]
    }
  }
}

定義されると、プロファイルはターミナルプロファイルセレクターに表示されます。アクティベートされると、ターミナルオプションを返すことでプロファイルの作成を処理します。

vscode.window.registerTerminalProfileProvider('my-ext.terminal-profile', {
  provideTerminalProfile(
    token: vscode.CancellationToken
  ): vscode.ProviderResult<vscode.TerminalOptions | vscode.ExtensionTerminalOptions> {
    return { name: 'Profile from extension', shellPath: 'bash' };
  }
});

contributes.themes

VS Code にカラーテーマを提供し、ワークベンチの色とエディターの構文トークンのスタイルを定義します。

ラベル、テーマがダークテーマかライトテーマか (これにより、VS Code の残りの部分がテーマに合わせて変更されます)、およびファイルへのパス (JSON 形式) を指定する必要があります。

テーマの例

{
  "contributes": {
    "themes": [
      {
        "label": "Monokai",
        "uiTheme": "vs-dark",
        "path": "./themes/monokai-color-theme.json"
      }
    ]
  }
}

color theme extension point example

カラーテーマの作成方法については、カラーテーマガイドを参照してください。

contributes.typescriptServerPlugins

VS Code の JavaScript および TypeScript サポートを強化するTypeScript サーバープラグインを提供します。

{
  "contributes": {
    "typescriptServerPlugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ]
  }
}

上記の拡張機能の例では、JavaScript および TypeScript の styled-component IntelliSense を追加するtypescript-styled-plugin を提供しています。このプラグインは拡張機能からロードされ、拡張機能内で通常の NPM dependency としてインストールされている必要があります。

{
  "dependencies": {
    "typescript-styled-plugin": "*"
  }
}

TypeScript サーバープラグインは、ユーザーが VS Code の TypeScript バージョンを使用している場合、すべての JavaScript および TypeScript ファイルに対してロードされます。プラグインが明示的に "enableForWorkspaceTypeScriptVersions": true を設定しない限り、ユーザーがワークスペースバージョンの TypeScript を使用している場合はアクティベートされません。

{
  "contributes": {
    "typescriptServerPlugins": [
      {
        "name": "typescript-styled-plugin",
        "enableForWorkspaceTypeScriptVersions": true
      }
    ]
  }
}

プラグイン設定

拡張機能は、VS Code の組み込み TypeScript 拡張機能が提供する API を介して、コントリビュートされた TypeScript プラグインに設定データを送信できます。

// In your VS Code extension

export async function activate(context: vscode.ExtensionContext) {
  // Get the TS extension
  const tsExtension = vscode.extensions.getExtension('vscode.typescript-language-features');
  if (!tsExtension) {
    return;
  }

  await tsExtension.activate();

  // Get the API from the TS extension
  if (!tsExtension.exports || !tsExtension.exports.getAPI) {
    return;
  }

  const api = tsExtension.exports.getAPI(0);
  if (!api) {
    return;
  }

  // Configure the 'my-typescript-plugin-id' plugin
  api.configurePlugin('my-typescript-plugin-id', {
    someValue: process.env['SOME_VALUE']
  });
}

TypeScript サーバープラグインは、onConfigurationChanged メソッドを通じて設定データを受け取ります。

// In your TypeScript plugin

import * as ts_module from 'typescript/lib/tsserverlibrary';

export = function init({ typescript }: { typescript: typeof ts_module }) {
  return {
    create(info: ts.server.PluginCreateInfo) {
      // Create new language service
    },
    onConfigurationChanged(config: any) {
      // Receive configuration changes sent from VS Code
    }
  };
};

この API により、VS Code 拡張機能は VS Code 設定を TypeScript サーバープラグインと同期したり、プラグインの動作を動的に変更したりできます。TypeScript TSLint プラグインとlit-html 拡張機能を見て、この API が実際にどのように使用されているかを確認してください。

contributes.views

VS Code にビューを提供します。ビューの識別子と名前を指定する必要があります。以下のビューコンテナにコントリビュートできます。

explorer: アクティビティバーの Explorer ビューコンテナ
scm: アクティビティバーのソース管理 (SCM) ビューコンテナ
debug: アクティビティバーの実行およびデバッグビューコンテナ
test: アクティビティバーのテストビューコンテナ
拡張機能によって提供されるカスタムビューコンテナ。

ユーザーがビューを開くと、VS Code はアクティベーションイベント onView:${viewId} (以下の例では onView:nodeDependencies) を発行します。when コンテキスト値を指定することで、ビューの可視性を制御することもできます。指定された icon は、タイトルが表示できない場合 (例: ビューがアクティビティバーにドラッグされた場合) に使用されます。contextualTitle は、ビューがデフォルトのビューコンテナから移動され、追加のコンテキストが必要な場合に使用されます。

{
  "contributes": {
    "views": {
      "explorer": [
        {
          "id": "nodeDependencies",
          "name": "Node Dependencies",
          "when": "workspaceHasPackageJSON",
          "icon": "media/dep.svg",
          "contextualTitle": "Package Explorer"
        }
      ]
    }
  }
}

views extension point example

ビューのコンテンツは2つの方法で設定できます。

createTreeView API を介してデータプロバイダーを提供するか、registerTreeDataProvider API を介してデータプロバイダーを直接登録することにより、TreeView でデータを設定します。TreeView は階層データとリストを表示するのに最適です。tree-view-sample を参照してください。
registerWebviewViewProvider でプロバイダーを登録することにより、WebviewView でデータを設定します。Webview ビューは、ビューに任意の HTML をレンダリングできます。詳細については、webview view sample extension を参照してください。

contributes.viewsContainers

カスタムビューをコントリビュートできるビューコンテナを提供します。ビューコンテナの識別子、タイトル、およびアイコンを指定する必要があります。現在、アクティビティバー (activitybar) とパネル (panel) にそれらをコントリビュートできます。以下の例は、Package Explorer ビューコンテナがアクティビティバーにどのようにコントリビュートされ、ビューがそれにどのようにコントリビュートされるかを示しています。

{
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "package-explorer",
          "title": "Package Explorer",
          "icon": "resources/package-explorer.svg"
        }
      ]
    },
    "views": {
      "package-explorer": [
        {
          "id": "package-dependencies",
          "name": "Dependencies"
        },
        {
          "id": "package-outline",
          "name": "Outline"
        }
      ]
    }
  }
}

Custom views container

アイコンの仕様

サイズ: アイコンは 24x24 で中央揃えにする必要があります。
色: アイコンは単一の色を使用する必要があります。
形式: アイコンは SVG 形式が推奨されますが、任意の画像ファイル形式も受け入れられます。
状態: すべてのアイコンは以下の状態スタイルを継承します。

状態不透明度

既定値 60%

ホバー 100%

アクティブ 100%

contributes.viewsWelcome

カスタムビューにウェルカムコンテンツを提供します。ウェルカムコンテンツは、空のツリービューにのみ適用されます。ビューは、ツリーに子がなく、TreeView.message もない場合に空と見なされます。慣例により、それ自体で1行を占めるコマンドリンクはボタンとして表示されます。view プロパティを使用して、ウェルカムコンテンツを適用するビューを指定できます。ウェルカムコンテンツの可視性は when コンテキスト値で制御できます。ウェルカムコンテンツとして表示されるテキストは contents プロパティで設定されます。

{
  "contributes": {
    "viewsWelcome": [
      {
        "view": "scm",
        "contents": "In order to use git features, you can open a folder containing a git repository or clone from a URL.\n[Open Folder](command:vscode.openFolder)\n[Clone Repository](command:git.clone)\nTo learn more about how to use git and source control in VS Code [read our docs](https://aka.ms/vscode-scm).",
        "when": "config.git.enabled && git.state == initialized && workbenchState == empty"
      }
    ]
  }
}

Welcome content example

複数のウェルカムコンテンツ項目を1つのビューにコントリビュートできます。この場合、VS Code コアから提供されるコンテンツが最初に表示され、次に組み込み拡張機能からのコンテンツ、そして他のすべての拡張機能からのコンテンツが続きます。

contributes.walkthroughs

サンプル拡張機能

作業の開始ページに表示されるウォークスルーを提供します。ウォークスルーは拡張機能のインストール時に自動的に開かれ、ユーザーに拡張機能の機能を紹介する便利な方法を提供します。

ウォークスルーは、タイトル、説明、ID、および一連のステップで構成されます。さらに、コンテキストキーに基づいてウォークスルーを非表示または表示するために when 条件を設定できます。例えば、Linux プラットフォームでのセットアップを説明するウォークスルーには、when: "isLinux" を指定することで、Linux マシンにのみ表示されるようにできます。

ウォークスルーの各ステップには、タイトル、説明、ID、およびメディア要素 (画像または Markdown コンテンツのいずれか) があり、オプションでステップをチェック済みにするイベントのセット (以下の例に示されています) が含まれます。ステップの説明は Markdown コンテンツであり、**太字**、__下線__、`` `コード` `` のレンダリング、およびリンクをサポートしています。ウォークスルーと同様に、ステップにはコンテキストキーに基づいて非表示または表示するための `when` 条件を与えることができます。

SVG は、そのスケーリング能力と VS Code のテーマカラーのサポートを考慮すると、画像に推奨されます。SVG でテーマカラーを簡単に参照するには、Visual Studio Code Color Mapper Figma プラグインを使用してください。

{
  "contributes": {
    "walkthroughs": [
      {
        "id": "sample",
        "title": "Sample",
        "description": "A sample walkthrough",
        "steps": [
          {
            "id": "runcommand",
            "title": "Run Command",
            "description": "This step will run a command and check off once it has been run.\n[Run Command](command:getting-started-sample.runCommand)",
            "media": { "image": "media/image.png", "altText": "Empty image" },
            "completionEvents": ["onCommand:getting-started-sample.runCommand"]
          },
          {
            "id": "changesetting",
            "title": "Change Setting",
            "description": "This step will change a setting and check off when the setting has changed\n[Change Setting](command:getting-started-sample.changeSetting)",
            "media": { "markdown": "media/markdown.md" },
            "completionEvents": ["onSettingChanged:getting-started-sample.sampleSetting"]
          }
        ]
      }
    ]
  }
}

Walkthrough example

完了イベント

デフォルトでは、completionEvents イベントが提供されていない場合、ステップはボタンのいずれかがクリックされたとき、またはステップにボタンがない場合は開かれたときにチェック済みにされます。より細かい制御が必要な場合は、completionEvents のリストを提供できます。

利用可能な完了イベントは次のとおりです。

onCommand:myCommand.id: コマンドが実行されたときにステップをチェック済みにします。
onSettingChanged:mySetting.id: 指定された設定が変更されたときにステップをチェック済みにします。
onContext:contextKeyExpression: コンテキストキー式が true と評価されたときにステップをチェック済みにします。
extensionInstalled:myExt.id: 指定された拡張機能がインストールされている場合にステップをチェック済みにします。
onView:myView.id: 指定されたビューが表示されたときにステップをチェック済みにします。
onLink:https://...: ウォークスルーを介して指定されたリンクが開かれたときにステップをチェック済みにします。

ステップが一度チェック済みにされると、ユーザーが明示的にチェックを外すか、進行状況をリセットするまで (作業の開始: 進行状況をリセット コマンドを介して)、チェック済みのままになります。

5/28/2026

状態	不透明度
既定値	60%
ホバー	100%
アクティブ	100%

貢献ポイント

contributes.authentication

contributes.breakpoints

contributes.chatInstructions

chatInstructions プロパティ

contributes.chatPromptFiles

chatPromptFiles プロパティ

contributes.chatSkills

chatSkills プロパティ

contributes.colors

contributes.commands

コマンドの例

コマンドアイコンの仕様

contributes.configuration

設定例

設定スキーマ

title

properties

設定のタイトル

単一カテゴリおよびデフォルトカテゴリの設定の表示タイトル

複数カテゴリの設定の表示タイトル

設定プロパティスキーマ

description / markdownDescription

type

order

enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels

deprecationMessage / markdownDeprecationMessage

その他の JSON Schema プロパティ

サポートされていない JSON Schema プロパティ

scope

ignoreSync

設定へのリンク

contributes.configurationDefaults

contributes.customEditors

contributes.debuggers

デバッガーの例

contributes.grammars

文法の例

contributes.icons

contributes.iconThemes

ファイルアイコンテーマの例

contributes.jsonValidation

contributes.keybindings

キーバインディングの例

contributes.languages

言語の例

contributes.menus

メニューの例

コマンドパレットメニュー項目のコンテキストに応じた可視性

グループの並べ替え

グループ内の並べ替え

contributes.problemMatchers

contributes.problemPatterns

contributes.productIconThemes

プロダクトアイコンテーマの例

contributes.resourceLabelFormatters

contributes.semanticTokenModifiers

contributes.semanticTokenScopes

contributes.semanticTokenTypes

contributes.snippets

contributes.submenus

サブメニューの例

contributes.taskDefinitions

contributes.terminal

contributes.themes

テーマの例

contributes.typescriptServerPlugins

プラグイン設定

contributes.views

contributes.viewsContainers

アイコンの仕様

contributes.viewsWelcome

contributes.walkthroughs

完了イベント