一站式跑通 VS Code 扩展开发：80+ 官方示例覆盖 Hello World 到 LSP

【免费下载链接】vscode-extension-samplesSample code illustrating the VS Code extension API.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-extension-samples

微软官方的vscode-extension-samples是围绕 VS Code 扩展 API 的自包含示例集合，无论你做命令注册、Webview 面板还是接入语言服务器，都能在这里找到可对照的参考实现。

想从零做 VS Code 扩展，却找不到起步代码？

你想给 VS Code 加一个编辑器里的自定义面板，或者一个带状态栏的操作命令，翻 API 文档时却不知道该从哪行代码写起。这个仓库正好把这类问题拆成了 80 多个独立示例，每个都是一份完整的扩展工程：README 讲清用法，配有演示 GIF，还列出用到的全部 API 与 contribution points，风格统一由 ESLint 约束。

学习路线：先跑通命令 → 再操控 UI 与事件 → 最后接语言服务

📦 按下面的顺序翻，比按字母序翻效率高很多。

第一步：让第一个 VS Code 扩展跑起来

helloworld-sample/用几十行代码演示了activate函数、contributes.commands注册和 F5 调试流程，帮你建立"扩展 = package.json 声明 + 激活函数"的骨架认知；helloworld-minimal-sample/是纯 JavaScript 的最小版本，没有构建链干扰。

git clone https://gitcode.com/gh_mirrors/vs/vscode-extension-samples code webview-sample && npm install

第二步：Webview 集成与编辑器 UI 操控

webview-sample/是一个叫 Cat Coding 的面板，Webview 创建、双向消息、状态序列化这些集成要点和坑点全在里面；statusbar-sample/和tree-view-sample/则分别演示状态栏条目与 TreeDataProvider，覆盖最常用的 UI 操作。

第三步：接入语言服务器与语言特性

lsp-sample/给出 client + server 双工程的标准结构，让你看懂语言服务器怎么拉起、怎么通信；completions-sample/则演示补全这类轻量语言特性的注册方式。

选示例前先判断：Node 侧能力还是纯 Webview

🔌 如果你的扩展要读写文件系统或启动外部进程，先跑fsprovider-sample/这类 Node 侧示例再往上叠功能；只做界面交互的，从 Webview 系列起步即可。另外建议先跑 TypeScript 版示例——仓库里大部分示例都是 TS 且风格统一，JavaScript 最小版只适合快速理解骨架。

为什么示例会跟 VS Code 版本变化

扩展 API 随 VS Code 版本滚动发布，部分依赖 proposed API 的示例只匹配对应 Insider 版本。跟进仓库的 Commits 与 Releases 能看到新增或修正了哪些示例；跑之前先看它的 README 标注的最低 VS Code 版本，是省掉"代码在但跑不起来"这类问题的最短路径。

收尾

下次文档讲不清"从哪下手"时，答案多半在这些示例里：先让 Hello World 跑起来，再打开 Webview 示例动手改，需要语言特性时翻 LSP 目录。80 多个可直接运行的起点，照着复制、拆解、改造就够了。

【免费下载链接】vscode-extension-samplesSample code illustrating the VS Code extension API.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-extension-samples