延伸模組指南

在您透過 Hello World 範例學習完 Visual Studio Code 擴充功能 API 的基礎知識後，現在是時候打造一些實際的擴充功能了。雖然擴充功能能力 (Extension Capabilities) 章節提供了擴充功能「能」做什麼的高階概覽，但本章節包含了一系列詳細的程式碼指南與範例，解釋「如何」使用特定的 VS Code API。

在每一個指南或範例中，您將會找到：

詳盡註解的原始程式碼。
展示範例擴充功能用法的 GIF 或圖片。
執行範例擴充功能的說明。
所使用 VS Code API 的列表。
所使用貢獻點 (Contribution Points) 的列表。
類似該範例的實際擴充功能。
API 概念的解釋。

指南與範例

以下是 VS Code 網站上的指南，包含它們對 VS Code API 與貢獻點 (Contribution Points) 的使用。別忘了參考使用者體驗指南 (UX Guidelines) 以學習建立擴充功能時的使用者介面最佳實踐。

VS Code 網站上的指南	API 與貢獻
指令	命令 (commands) contributes.commands
顏色主題	contributes.themes
檔案圖示主題	contributes.iconThemes
產品圖示主題	contributes.productIconThemes
樹狀檢視	window.createTreeView window.registerTreeDataProvider TreeView TreeDataProvider contributes.views contributes.viewsContainers
Webview	window.createWebviewPanel window.registerWebviewPanelSerializer
自訂編輯器	window.registerCustomEditorProvider CustomTextEditorProvider contributes.customEditors
虛擬文件	workspace.registerTextDocumentContentProvider commands.registerCommand window.showInputBox
虛擬工作區	workspace.fs capabilities.virtualWorkspaces
工作區信任	workspace.isTrusted workspace.onDidGrantWorkspaceTrust capabilities.untrustedWorkspaces
工作提供者	tasks.registerTaskProvider Task ShellExecution contributes.taskDefinitions
原始碼控制	workspace.workspaceFolders SourceControl SourceControlResourceGroup scm.createSourceControl TextDocumentContentProvider contributes.menus
偵錯工具延伸模組	contributes.breakpoints contributes.debuggers debug
Markdown 延伸模組	markdown.previewStyles markdown.markdownItPlugins markdown.previewScripts
測試延伸模組	TestController TestItem
自訂資料延伸模組	contributes.html.customData contributes.css.customData

以下是來自 VS Code 擴充功能範例儲存庫的額外範例列表。

GitHub 儲存庫上的範例	API 與貢獻
Webview 範例	window.createWebviewPanel window.registerWebviewPanelSerializer
狀態列範例	window.createStatusBarItem StatusBarItem
樹狀檢視範例	window.createTreeView window.registerTreeDataProvider TreeView TreeDataProvider contributes.views contributes.viewsContainers
工作提供者 (Task Provider) 範例	tasks.registerTaskProvider Task ShellExecution contributes.taskDefinitions
多根目錄工作區 (Multi Root) 範例	workspace.getWorkspaceFolder workspace.onDidChangeWorkspaceFolders
補全提供者 (Completion Provider) 範例	languages.registerCompletionItemProvider CompletionItem SnippetString
檔案系統提供者 (File System Provider) 範例	workspace.registerFileSystemProvider
編輯器裝飾 (Editor Decorator) 範例	TextEditor.setDecorations DecorationOptions DecorationInstanceRenderOptions ThemableDecorationInstanceRenderOptions window.createTextEditorDecorationType TextEditorDecorationType contributes.colors
L10N（在地化）範例
終端機範例	window.createTerminal window.onDidChangeActiveTerminal window.onDidCloseTerminal window.onDidOpenTerminal window.Terminal window.terminals
Vim 範例	命令 (commands) StatusBarItem window.createStatusBarItem TextEditorCursorStyle window.activeTextEditor Position Range Selection TextEditor TextEditorRevealType TextDocument
原始碼控制 (Source Control) 範例	workspace.workspaceFolders SourceControl SourceControlResourceGroup scm.createSourceControl TextDocumentContentProvider contributes.menus
註解 API 範例
文件編輯範例	命令 (commands) contributes.commands
入門 (Getting Started) 範例	contributes.walkthroughs
測試擴充功能	TestController TestItem

語言擴充功能範例

這些是語言擴充功能範例

範例	VS Code 網站上的指南
程式碼片段 (Snippet) 範例	/api/language-extensions/snippet-guide
語言設定範例	/api/language-extensions/language-configuration-guide
LSP 範例	/api/language-extensions/language-server-extension-guide
LSP 記錄串流範例	不適用 (N/A)
LSP 多根目錄伺服器範例	https://github.com/microsoft/vscode/wiki/Adopting-Multi-Root-Workspace-APIs#language-client--language-server (GitHub 儲存庫 wiki)
LSP Web 擴充功能範例	/api/language-extensions/language-server-extension-guide

5/28/2026