一站式跑通 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/6 1:31:35 · 阅读 1.2k 一站式跑通 VS Code 扩展开发：80+ 官方示例覆盖 Hello World 到 LSP
一站式跑通 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考