貢獻點
貢獻點 是一組 JSON 宣告,您可以在 package.json
擴充功能資訊清單 的 contributes
欄位中進行宣告。您的擴充功能會註冊貢獻點,以擴充 Visual Studio Code 內的各種功能。以下是所有可用的貢獻點清單
authentication
breakpoints
colors
commands
configuration
configurationDefaults
customEditors
debuggers
grammars
icons
iconThemes
jsonValidation
keybindings
languages
menus
problemMatchers
problemPatterns
productIconThemes
resourceLabelFormatters
semanticTokenModifiers
semanticTokenScopes
semanticTokenTypes
snippets
submenus
taskDefinitions
terminal
themes
typescriptServerPlugins
views
viewsContainers
viewsWelcome
walkthroughs
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"
}
}
]
}
}
可以為淺色、深色和高對比佈景主題定義色彩預設值,而且可以是現有色彩的參考,或是 色彩十六進位值。
擴充功能可以使用 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": "TypeScript",
"properties": {
"typescript.useCodeSnippetsOnMethodSuggest": {
"type": "boolean",
"default": false,
"description": "Complete functions with their parameter signature."
},
"typescript.tsdk": {
"type": ["string", "null"],
"default": null,
"description": "Specifies the folder path containing the tsserver and lib*.d.ts files to use."
}
}
}
}
}
您可以使用 vscode.workspace.getConfiguration('myExtension')
從擴充功能讀取這些值。
組態結構描述
您的組態項目既可用於在 JSON 編輯器中編輯設定時提供 IntelliSense,也可用於定義它們在設定 UI 中的顯示方式。
title
類別的 title
1️⃣️ 是用於該類別的標題。
{
"configuration": {
"title": "GitMagic"
}
}
對於具有多個設定類別的擴充功能,如果其中一個類別的標題與擴充功能的顯示名稱相同,則設定 UI 會將該類別視為「預設類別」,忽略該類別的 order
欄位,並將其設定放置在主要擴充功能標題下方。
對於 title
和 displayName
欄位,諸如「擴充功能」、「組態」和「設定」之類的詞彙是多餘的。
- ✔
"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 結構描述 的超集合定義的。
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.dev.org.tw/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 來修改。使用者將看到連結至在 settings.json 中編輯,如上述螢幕擷取畫面所示。8️⃣
order
類別和這些類別內的設定都可以採用整數 order
類型屬性,該屬性提供它們應如何相對於其他類別和/或設定排序的參考。
如果兩個類別具有 order
屬性,則序號較低的類別會先出現。如果類別未給定 order
屬性,則它會出現在已給定該屬性的類別之後。
如果同一類別中的兩個設定具有 order
屬性,則序號較低的設定會先出現。如果同一類別中的另一個設定未給定 order
屬性,則它會出現在該類別中已給定該屬性的設定之後。
如果兩個類別具有相同的 order
屬性值,或者如果同一類別中的兩個設定具有相同的 order
屬性值,則它們將在設定 UI 中依遞增字母順序排序。
enum / enumDescriptions / markdownEnumDescriptions / enumItemLabels
如果您在 enum
7️⃣ 屬性下提供項目陣列,則設定 UI 將呈現這些項目的下拉式功能表。
您也可以提供 enumDescriptions
屬性,這是與 enum
屬性長度相同的字串陣列。enumDescriptions
屬性會在設定 UI 中下拉式功能表的底部提供對應於每個 enum
項目的描述。
您也可以使用 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
將在設定 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
用於在模式不符時提供量身打造的錯誤訊息。format
用於將字串限制為已知的格式,例如date
、time
、ipv4
、email
和uri
maxItems
、minItems
用於限制陣列長度editPresentation
用於控制在 [設定] 編輯器中針對字串設定呈現單行輸入方塊或多行文字區域
不支援的 JSON 結構描述屬性
組態區段中不支援
$ref
和definition
:組態結構描述需要是獨立的,而且無法假設彙總設定 JSON 結構描述文件的外觀。
如需這些和其他功能的詳細資訊,請參閱 JSON 結構描述參考。
scope
組態設定可以具有下列其中一個可能的範圍
application
- 適用於 VS Code 所有執行個體的設定,而且只能在使用者設定中組態。machine
- 電腦特定的設定,只能在使用者設定或僅在遠端設定中設定。例如,不應跨電腦共用的安裝路徑。machine-overridable
- 電腦特定的設定,可以由工作區或資料夾設定覆寫。window
- Windows (執行個體) 特定的設定,可以在使用者、工作區或遠端設定中組態。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 視窗或工作區 (可能是多根目錄)。
連結至設定
您可以使用 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 中的使用者,例如 檢視:重新開啟方式 下拉式清單。
-
selector
- 指定自訂編輯器作用中的檔案。selector
是一個或多個 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 文法以接收語法醒目提示。
contributes.icons
依 ID 貢獻新的圖示,以及預設圖示。然後,擴充功能 (或任何其他依賴擴充功能的擴充功能) 可以在任何可以使用 ThemeIcon
的位置使用圖示 ID 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。檔案圖示會顯示在檔案名稱旁邊,表示檔案類型。
您必須指定識別碼 (在設定中使用)、標籤和檔案圖示定義檔的路徑。
檔案圖示佈景主題範例
{
"contributes": {
"iconThemes": [
{
"id": "my-cool-file-icons",
"label": "Cool File Icons",
"path": "./fileicons/cool-file-icon-theme.json"
}
]
}
}
請參閱 檔案圖示佈景主題指南,以瞭解如何建立檔案圖示佈景主題。
contributes.jsonValidation
為特定類型的 json
檔案貢獻驗證結構描述。url
值可以是擴充功能中包含的結構描述檔案的本機路徑,也可以是遠端伺服器 URL,例如 json 結構描述存放區。
{
"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"
}
]
}
}
contributes.languages
貢獻程式設計語言的定義。這將引入新的語言或豐富 VS Code 擁有的關於語言的知識。
contributes.languages
的主要效果是
- 定義可在 VS Code API 其他部分重複使用的
languageId
,例如vscode.TextDocument.languageId
和onLanguage
啟用事件。- 您可以使用
aliases
欄位貢獻人類可讀的名稱。清單中的第一個項目將用作人類可讀的標籤。
- 您可以使用
- 將檔案名稱副檔名 (
extensions
)、檔案名稱 (filenames
)、檔案名稱 glob 模式 (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 Touch Bar
- 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"
}
]
}
}
}
同樣地,以下是新增至特定檢視的命令功能表項目。以下範例貢獻至任意檢視,例如終端機
{
"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
}
}
]
}
}
此問題比對器現在可以通過名稱參考 $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。例如,以下是如何讓擴充功能為具有 scheme remotehub
的 URI 貢獻格式器
{
"contributes": {
"resourceLabelFormatters": [
{
"scheme": "remotehub",
"formatting": {
"label": "${path}",
"separator": "/",
"workspaceSuffix": "GitHub"
}
}
]
}
}
這表示所有具有 scheme remotehub
的 URI 都將僅顯示 URI 的 path
段呈現,分隔符號將為 /
。具有 remotehub
URI 的工作區將在其標籤中具有 GitHub 後綴。
contributes.semanticTokenModifiers
貢獻新的語意 Token 修飾符,這些修飾符可以通過主題規則突出顯示。
{
"contributes": {
"semanticTokenModifiers": [
{
"id": "native",
"description": "Annotates a symbol that is implemented natively"
}
]
}
}
請參閱 語意突出顯示指南,以閱讀有關語意突出顯示的更多資訊。
contributes.semanticTokenScopes
貢獻語意 Token 類型和修飾符與範圍之間的對應,作為後備方案或支援特定語言的主題。
{
"contributes": {
"semanticTokenScopes": [
{
"language": "typescript",
"scopes": {
"property.readonly": ["variable.other.constant.property.ts"]
}
}
]
}
}
請參閱 語意突出顯示指南,以閱讀有關語意突出顯示的更多資訊。
contributes.semanticTokenTypes
貢獻新的語意 Token 類型,這些類型可以通過主題規則突出顯示。
{
"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 schema 語法為 required
和 properties
屬性定義。type
屬性定義工作類型。如果以上範例
"type": "npm"
將工作定義與 npm 工作關聯"required": [ "script" ]
定義script
屬性為必填項。path
屬性是可選的。"properties" : { ... }
定義其他屬性及其類型。
當擴充功能實際建立 Task 時,它需要傳遞一個 TaskDefinition
,該定義符合 package.json 檔案中貢獻的工作定義。對於 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 貢獻色彩主題,定義編輯器中語法 Token 的工作台色彩和樣式。
您必須指定標籤、主題是深色主題還是淺色主題(以便 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": "*"
}
}
當使用者使用 VS Code 版本的 TypeScript 時,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 伺服器外掛程式同步,或動態更改外掛程式的行為。請查看 TypeScript TSLint 外掛程式 和 lit-html 擴充功能,以了解此 API 在實務中是如何使用的。
contributes.views
向 VS Code 貢獻檢視。您必須為檢視指定識別碼和名稱。您可以貢獻到以下檢視容器
explorer
:活動列中的「檔案總管」檢視容器scm
:活動列中的「原始檔控制管理 (SCM)」檢視容器debug
:活動列中的「執行和偵錯」檢視容器test
:活動列中的「測試」檢視容器- 擴充功能貢獻的自訂檢視容器。
當使用者開啟檢視時,VS Code 將發出 activationEvent 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,通過
createTreeView
API 提供 資料提供者,或通過registerTreeDataProvider
API 直接註冊 資料提供者 來填充資料。TreeView 非常適合顯示階層式資料和清單。請參閱 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"
}
]
}
}
}
圖示規格
-
Size:
圖示應為 24x24 且居中。 -
色彩:
圖示應使用單一色彩。 -
格式:
建議圖示使用 SVG 格式,但接受任何影像檔案類型。 -
States:
所有圖示都繼承以下狀態樣式狀態 不透明度 預設 60% 懸停 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 的主題色彩。使用 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://...
:在通過導覽開啟給定連結後勾選步驟。
一旦步驟被勾選,它將保持勾選狀態,直到使用者明確取消勾選該步驟或重置其進度(通過開始使用:重置進度命令)。