貢獻點
貢獻點是你在 package.json 檔案的 contributes 欄位中進行的 JSON 宣告。擴充套件清單。你的擴充套件透過註冊 貢獻點 來擴充套件 Visual Studio Code 中的各種功能。以下是所有可用 貢獻點 的列表
認證breakpointscolors命令configurationconfigurationDefaultscustomEditorsdebuggersgrammarsiconsiconThemesjsonValidationkeybindings語言menusproblemMatchersproblemPatternsproductIconThemesresourceLabelFormatterssemanticTokenModifierssemanticTokenScopessemanticTokenTypessnippetssubmenustaskDefinitionsterminalthemestypescriptServerPluginsviewsviewsContainersviewsWelcomewalkthroughs
contributes.authentication
貢獻身份驗證提供程式。這將設定提供程式的啟用事件並在你的擴充套件的功能中顯示它。
{
"contributes": {
"authentication": [
{
"label": "Azure DevOps",
"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"
}
}
]
}
}
可以為淺色、深色和高對比度主題定義顏色預設值,並且可以是對現有顏色的引用或 顏色十六進位制值。
擴充套件可以使用 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 擴充套件中使用命令的更多資訊。

命令圖示規範
大小:圖示應為 16x16,並帶有 1 畫素填充(影像為 14x14)並居中。顏色:圖示應使用單一顏色。格式:建議圖示使用 SVG,但任何影像檔案型別都可以接受。
![]()
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"
}
}
}
}
}

你可以使用 vscode.workspace.getConfiguration('myExtension') 從你的擴充套件中讀取這些值。
配置模式
你的配置條目既用於在 JSON 編輯器中編輯設定時提供智慧感知,又用於定義它們在設定 UI 中的顯示方式。

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 的字首與副檔名稱的字尾匹配,因此設定 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 的超集定義。
description / markdownDescription
你的 description 3️⃣ 出現在標題之後和輸入欄位之前,除了布林值,其中描述用作複選框的標籤。 6️⃣
{
"gitMagic.blame.heatMap.enabled": {
"description": "Specifies whether to provide a heatmap indicator in the gutter blame annotations"
}
}
如果你使用 markdownDescription 代替 description,你的設定描述將在設定 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.com/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 型別的屬性的物件將呈現為鍵和值的可編輯網格。物件設定還應將 additionalProperties 設定為 false,或具有適當 type 屬性的物件,以在 UI 中呈現。
如果 object 或 array 型別的設定還可以包含其他型別,例如巢狀物件、陣列或 null,則該值不會在設定 UI 中呈現,只能透過直接編輯 JSON 進行修改。使用者將看到一個連結到 Edit in settings.json,如上面的螢幕截圖所示。 8️⃣
order
類別和這些類別中的設定都可以採用整數 order 型別屬性,該屬性指示它們應如何相對於其他類別和/或設定進行排序。
如果兩個類別具有 order 屬性,則 order 數字較低的類別排在第一位。如果某個類別未指定 order 屬性,則它將出現在指定該屬性的類別之後。
如果同一類別中的兩個設定具有 order 屬性,則 order 數字較低的設定排在第一位。如果同一類別中的另一個設定未指定 order 屬性,則它將出現在該類別中指定該屬性的設定之後。
如果兩個類別具有相同的 order 屬性值,或者同一類別中的兩個設定具有相同的 order 屬性值,則它們將在設定 UI 中按升序詞法順序排序。
enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels
如果你在 enum 7️⃣ 屬性下提供一個專案陣列,則設定 UI 將呈現一個包含這些專案的下拉選單。
你還可以提供一個 enumDescriptions 屬性,這是一個與 enum 屬性長度相同的字串陣列。 enumDescriptions 屬性在下拉選單的底部為每個 enum 專案提供設定 UI 中的描述。
你還可以使用 markdownEnumDescriptions 代替 enumDescriptions,你的描述將被解析為 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"
}
}

deprecationMessage / markdownDeprecationMessage
如果您設定了 deprecationMessage 或 markdownDeprecationMessage,該設定將顯示您指定的訊息的警告下劃線。此外,除非使用者配置了它,否則該設定將從設定 UI 中隱藏。如果您設定了 markdownDeprecationMessage,則 markdown 將不會在設定懸停或問題檢視中渲染。如果您同時設定了這兩個屬性,deprecationMessage 將顯示在懸停和問題檢視中,而 markdownDeprecationMessage 將以 Markdown 格式在設定 UI 中渲染。
示例
{
"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用於在模式不匹配時提供定製的錯誤訊息。format用於將字串限制為眾所周知的格式,例如date、time、ipv4、email和urimaxItems、minItems用於限制陣列長度editPresentation用於控制在設定編輯器中字串設定呈現為單行輸入框還是多行文字區域
不支援的 JSON Schema 屬性
配置部分中不支援
$ref和definition:配置模式需要是自包含的,不能假定聚合設定 JSON Schema 文件的樣子。
有關這些和其他功能的更多詳細資訊,請參閱 JSON Schema 參考。
範圍
配置設定可以具有以下可能的範圍之一
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 型別的屬性中插入到另一個設定的連結,該連結將在設定 UI 中呈現為可點選的連結:`#target.setting.id#`。這將在 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 中,這將呈現為

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,例如"viewType": "myAmazingExtension.svgPreview"。 -
displayName- 在 VS Code 的 UI 中標識自定義編輯器的名稱。顯示名稱顯示在 VS Code UI 中,例如 View: Reopen with 下拉選單中。
-
selector- 指定自定義編輯器適用於哪些檔案。selector是一個或多個 glob 模式 的陣列。這些 glob 模式與檔名匹配,以確定是否可以將自定義編輯器用於它們。例如,*.pngfilenamePattern將為所有 PNG 檔案啟用自定義編輯器。您還可以建立更具體的模式來匹配檔名或目錄名,例如
**/translations/*.json。 -
priority- (可選) 指定何時使用自定義編輯器。priority控制在開啟資源時何時使用自定義編輯器。可能的值是"default"- 嘗試為與自定義編輯器selector匹配的每個檔案使用自定義編輯器。如果有多個自定義編輯器適用於給定的檔案,使用者必須選擇他們想要使用的自定義編輯器。"option"- 預設情況下不使用自定義編輯器,但允許使用者切換到它或將其配置為預設編輯器。
您可以在 自定義編輯器 擴充套件指南中瞭解更多資訊。
contributes.debuggers
向 VS Code 貢獻一個偵錯程式。偵錯程式貢獻具有以下屬性
type是一個唯一的 ID,用於在啟動配置中標識此偵錯程式。label是 UI 中此偵錯程式的使用者可見名稱。program是實現 VS Code 除錯協議與實際偵錯程式或執行時互動的除錯介面卡的路徑。runtime如果除錯介面卡的路徑不是可執行檔案,但需要執行時。configurationAttributes是特定於此偵錯程式的啟動配置引數的模式。請注意,JSON Schema 構造$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 語法以接收語法高亮顯示。

contributes.icons
透過 ID 貢獻一個新圖示以及一個預設圖示。然後,可以在任何可以使用 ThemeIcon 的地方(例如 Markdown 字串 ($(iconId)) 以及某些貢獻點)使用該圖示 ID。
{
"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 值可以是包含在擴充套件中的模式檔案的本地路徑,也可以是遠端伺服器 URL,例如 json schema store。
{
"contributes": {
"jsonValidation": [
{
"fileMatch": ".jshintrc",
"url": "https://json.schemastore.org/jshintrc"
}
]
}
}
contributes.keybindings
貢獻一個鍵繫結規則,定義在按下鍵組合時應呼叫哪個命令。請參閱 鍵繫結 主題,其中詳細解釋了鍵繫結。
貢獻鍵繫結將導致預設鍵盤快捷鍵顯示您的規則,並且命令的每個 UI 表示形式現在都將顯示您新增的鍵繫結。當然,當用戶按下鍵組合時,將呼叫該命令。
注意: 由於 VS Code 在 Windows、macOS 和 Linux 上執行,而修飾符不同,因此您可以使用“key”來設定預設鍵組合並使用特定平臺覆蓋它。
注意: 當呼叫命令(來自鍵繫結或來自命令面板)時,VS Code 將發出一個 activationEvent
onCommand:${command}。
鍵繫結示例
定義 Ctrl+F1 在 Windows 和 Linux 下以及 Cmd+F1 在 macOS 下觸發 "extension.sayHello" 命令
{
"contributes": {
"keybindings": [
{
"command": "extension.sayHello",
"key": "ctrl+f1",
"mac": "cmd+f1",
"when": "editorTextFocus"
}
]
}
}

contributes.languages
貢獻程式語言的定義。這將引入一種新語言或豐富 VS Code 對語言的瞭解。
contributes.languages 的主要影響是
- 定義一個
languageId,該 ID 可以在 VS Code API 的其他部分重用,例如vscode.TextDocument.languageId和onLanguage啟用事件。- 您可以使用
aliases欄位貢獻一個人類可讀的名稱。列表中的第一個專案將用作人類可讀的標籤。
- 您可以使用
- 將檔名副檔名 (
extensions)、檔名 (filenames)、檔名 glob 模式 (filenamePatterns)、以特定行開頭的的檔案 (例如 shebang) (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/contextgroupinline- 除錯呼叫堆疊檢視內聯操作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 工具欄notebook/cell/title- notebook 單元格標題選單欄notebook/cell/execute- notebook 單元格執行選單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- 測試項裝飾器的 gutter 選單timeline/title- 時間線檢視標題選單欄timeline/item/context- 時間線檢視項上下文選單touchBar- macOS Touch Barview/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"
}
]
}
}
}

類似地,這是一個新增到特定檢視的命令選單項。下面的示例貢獻到一個任意檢視,例如終端
{
"contributes": {
"menus": {
"view/title": [
{
"command": "terminalApi.sendText",
"when": "view == terminal",
"group": "navigation"
}
]
}
}
}

這是一個子選單選單項
{
"contributes": {
"menus": {
"scm/title": [
{
"submenu": "git.commit",
"group": "2_main@1",
"when": "scmProvider == git"
}
]
}
}
}

命令面板選單項的上下文特定可見性
在 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- 第二個預設組,包含基本的編輯命令。z_commands- 最後一個預設組,包含一個開啟命令面板的條目。

資源管理器上下文選單具有以下預設組
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"
}
]
}
}

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."
}
}
}
]
}
任務定義使用 JSON 模式語法定義 required 和 properties 屬性。type 屬性定義任務型別。如果上面的示例
"type": "npm"將任務定義與 npm 任務關聯"required": [ "script" ]定義script屬性為必需。path屬性是可選的。"properties" : { ... }定義其他屬性及其型別。
當擴充套件實際建立 Task 時,它需要傳遞一個符合 package.json 檔案中貢獻的任務定義的 TaskDefinition。對於 npm 示例,package.json 檔案中 test 指令碼的建立任務如下所示
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"
}
]
}
}

請參閱 顏色主題指南,瞭解如何建立顏色主題。
contributes.typescriptServerPlugins
貢獻 TypeScript 伺服器外掛,以增強 VS Code 的 JavaScript 和 TypeScript 支援
{
"contributes": {
"typescriptServerPlugins": [
{
"name": "typescript-styled-plugin"
}
]
}
}
上面的示例擴充套件貢獻了 typescript-styled-plugin,為 JavaScript 和 TypeScript 添加了 styled-component IntelliSense。此外掛將從擴充套件載入,並且必須作為擴充套件中的普通 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: 活動欄中的資源管理器檢視容器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"
}
]
}
}
}

檢視的內容可以透過兩種方式填充
- 使用 TreeView 透過提供 資料提供程式 透過
createTreeViewAPI 或直接透過registerTreeDataProviderAPI 註冊 資料提供程式 來填充資料。TreeView 非常適合顯示分層資料和列表。請參閱 tree-view-sample。 - 使用 WebviewView 透過使用
registerWebviewViewProvider註冊 提供程式。Webview 檢視允許在檢視中呈現任意 HTML。有關更多詳細資訊,請參閱 webview view sample 擴充套件。
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"
}
]
}
}
}

圖示規範
-
大小:圖示應為 24x24 並居中。 -
顏色:圖示應使用單一顏色。 -
格式:建議圖示使用 SVG,但任何影像檔案型別都可以接受。 -
狀態:所有圖示都繼承以下狀態樣式狀態 不透明度 預設值 60% Hover 100% 活動 100%
contributes.viewsWelcome
向 自定義檢視 貢獻歡迎內容。歡迎內容僅適用於空樹檢視。如果樹沒有子項且沒有 TreeView.message,則認為檢視為空。按照慣例,單獨成行的任何命令連結都顯示為按鈕。您可以使用 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"
}
]
}
}

可以向一個檢視貢獻多個歡迎內容項。當發生這種情況時,來自 VS Code 核心的內容首先出現,然後是來自內建擴充套件的內容,最後是來自所有其他擴充套件的內容。
contributes.walkthroughs
貢獻出現在“入門”頁面上的引導。引導在安裝您的擴充套件時自動開啟,併為使用者提供一種方便的方式來介紹您的擴充套件的功能。
引導由標題、描述、ID 和一系列步驟組成。此外,可以設定 when 條件來根據上下文鍵隱藏或顯示引導。例如,可以為 Linux 平臺上的設定提供 when: "isLinux" 引導,以便僅在 Linux 機器上顯示該引導。
引導中的每個步驟都有一個標題、描述、ID 和媒體元素(影像或 Markdown 內容),以及可選的一組將導致步驟被選中(如下所示)的事件。步驟描述是 Markdown 內容,支援 **粗體**、__下劃線__ 和 ``程式碼`` 渲染,以及連結。與引導類似,步驟可以提供 when 條件來根據上下文鍵隱藏或顯示它們。
由於 SVG 能夠縮放並支援 VS Code 的主題顏色,因此建議使用 SVG 作為影像。使用 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"]
}
]
}
]
}
}

完成事件
預設情況下,如果未提供 completionEvents 事件,則單擊任何按鈕後將選中該步驟,或者如果該步驟沒有按鈕,則在開啟時將選中該步驟。如果需要更精細的控制,可以提供一個 completionEvents 列表。
可用的完成事件包括
onCommand:myCommand.id:在執行命令後選中步驟。onSettingChanged:mySetting.id:在修改給定設定後選中步驟。onContext:contextKeyExpression:當上下文鍵表示式求值為 true 時,選中步驟。extensionInstalled:myExt.id:如果安裝了給定的擴充套件,則選中步驟。onView:myView.id:在顯示給定的檢視後選中步驟。onLink:https://...:在透過引導開啟給定的連結後選中步驟。
步驟選中後,將保持選中狀態,直到使用者顯式取消選中該步驟或重置其進度(透過 “入門:重置進度” 命令)。