編集

コントリビューションポイント

貢献点は、package.jsonのcontributesフィールドで行うJSON宣言のセットです。拡張機能マニフェスト。拡張機能は、Visual Studio Code内のさまざまな機能を拡張するために貢献点を登録します。以下に、利用可能なすべての貢献点のリストを示します。

contributes.authentication

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

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

contributes.breakpoints

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

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

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 1️⃣️は、そのカテゴリの見出しとして使用されます。

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

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

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

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

プロパティ

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

明示的なorderフィールドのないプロパティは、設定UIで辞書順に表示されます（マニフェストにリストされている順序ではありません）。

設定タイトル

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

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

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

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

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

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

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

構成プロパティのスキーマ

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

説明 / 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を使用して段落を区切ります。

種類

タイプ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型のプロパティを持つことができます。

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

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

2つのカテゴリが同じorderプロパティ値を持つ場合、または同じカテゴリ内の2つの設定が同じorderプロパティ値を持つ場合、設定UIでは辞書順に昇順でソートされます。

enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels

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

また、enumプロパティと同じ長さの文字列配列であるenumDescriptionsプロパティも提供できます。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スキーマプロパティ

構成値のその他の制約を記述するために、任意の検証JSONスキーマプロパティを使用できます。

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

サポートされていないJSONスキーマプロパティ

構成セクションではサポートされていません

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

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

スコープ

設定には、次のいずれかのスコープがあります。

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

```json
{
  "remoteTunnelAccess.machineName": {
    "type": "string",
    "default": '',
    "ignoreSync": true
  }
}

設定へのリンク

マークダウン型プロパティでこの特殊な構文「`#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のカスタムエディター貢献とコード内のカスタムエディター実装を関連付ける方法です。これはすべての拡張機能で一意である必要があり、"preview"のような一般的なviewTypeの代わりに、拡張機能に固有のもの（例："viewType": "myAmazingExtension.svgPreview"）を使用するようにしてください。
displayName - VS CodeのUIでカスタムエディタを識別する名前。

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

selectorは1つ以上のグロブパターンの配列です。これらのグロブパターンは、ファイル名と照合され、カスタムエディターがそれらに使用できるかどうかを判断します。*.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/sourceControl- SCMソース管理メニュー
terminal/context - ターミナルコンテキストメニュー
terminal/title/context - ターミナルタイトルコンテキストメニュー
testing/item/context - テストエクスプローラー項目コンテキストメニュー
testing/item/gutter - テスト項目のガターデコレーション用メニュー
timeline/title - タイムラインビュータイトルメニューバー
timeline/item/context - タイムラインビュー項目コンテキストメニュー
touchBar - macOSタッチバー
view/title - ビュータイトルメニュー
view/item/context - ビュー項目コンテキストメニュー
webview/context - 任意のwebviewコンテキストメニュー
すべての貢献されたサブメニュー

注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 - 拡張機能の設定に関連するコマンド。

グループ内のソート

グループ内の順序は、タイトルまたは順序属性に依存します。メニュー項目のグループローカルの順序は、以下に示すようにグループ識別子に@<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
        }
      }
    ]
  }
}

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

{
  "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にスタイル付きコンポーネントのIntelliSenseを追加するtypescript-styled-pluginを貢献します。このプラグインは拡張機能からロードされ、拡張機能に通常のNPM dependencyとしてインストールされている必要があります。

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

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

{
  "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サーバープラグインと同期したり、プラグインの動作を動的に変更したりできます。このAPIが実際にどのように使用されているかについては、TypeScript TSLintプラグインとlit-html拡張機能をご覧ください。

contributes.views

VS Codeにビューを貢献します。ビューの識別子と名前を指定する必要があります。次のビューコンテナに貢献できます。

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つの方法で設定できます。

TreeViewを使用し、createTreeView APIを通じてデータプロバイダーを提供するか、registerTreeDataProvider APIを通じてデータプロバイダーを直接登録してデータを設定します。TreeViewsは、階層データとリストの表示に最適です。tree-view-sampleを参照してください。
WebviewViewを使用して、registerWebviewViewProviderでプロバイダーを登録します。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プラットフォームでのセットアップを説明するウォークスルーには、Linuxマシンでのみ表示されるようにwhen: "isLinux"を指定できます。

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

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

{
  "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://...: ウォークスルーを通じて指定されたリンクが開かれたときにステップをチェックします。

ステップがチェックされると、ユーザーが明示的にステップのチェックを外すか、進行状況をリセットする（はじめに: 進行状況をリセットコマンドを使用）までチェックされたままになります。

08/07/2025

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

コントリビューションポイント

contributes.authentication

contributes.breakpoints

contributes.colors

contributes.commands

コマンドの例

コマンドアイコンの仕様

contributes.configuration

設定の例

設定スキーマ

タイトル

プロパティ

設定タイトル

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

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

構成プロパティのスキーマ

説明 / markdownDescription

種類

順序

enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels

deprecationMessage / markdownDeprecationMessage

その他のJSONスキーマプロパティ

サポートされていないJSONスキーマプロパティ

スコープ

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

完了イベント