如何从零开始创建并发布你自己的VSCode插件

从零创建发布VS Code插件的关键流程是：初始化项目→编写核心逻辑→本地调试→打包→发布到Marketplace；用yo code生成脚手架，实现Hello World命令验证闭环，F5调试，vsce package打包为.vsix，vsce publish发布。

从零开始创建并发布一个 VS Code 插件并不难，关键是理清流程：初始化项目 → 编写核心逻辑 → 本地调试 → 打包 → 发布到 Marketplace。下面分步说清楚怎么做，不绕弯、不堆术语。

用 yo code 快速生成插件脚手架

VS Code 官方推荐用 yo code（Yeoman 生成器）来初始化项目，它会自动配好 package.json、extension.ts、激活逻辑等基础结构。

• 先全局安装依赖：npm install -g yo generator-code
• 运行 yo code，按提示选择「New Extension (TypeScript)」
• 填入插件名、ID、描述等信息，几秒就生成完整项目目录

生成的代码里，extension.ts 是主入口，activate 函数会在插件被触发时执行，deactivate 用于清理资源（可选）。

写一个能跑起来的小功能

别一上来就想做复杂插件。先实现一个“点击命令弹出 Hello World”的最小闭环，验证流程是否通。

• 在 package.json 的 contributes.commands 里注册一条命令，比如 helloWorld.sayHello
• 在 extension.ts 的 activate 中用 vscode.commands.registerCommand 绑定该命令到一个函数
• 函数里调用 vscode.window.showInformationMessage('Hello from my plugin!')

保存后按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入命令名就能触发——这是你插件的第一个“心跳”。

本地调试和打包

VS Code 自带调试支持，不用额外配置就能边改边试。

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

75

查看详情

• 打开插件文件夹，在 VS Code 里按 F5 启动 Extension Development Host 窗口
• 在这个新窗口里按 Ctrl+Shift+P 输入你的命令，看是否生效
• 确认没问题后，终端执行 npm install -g vsce（VS Code Extension Publisher 工具）
• 运行 vsce package，生成一个 .vsix 文件——这就是可安装的插件包

双击 .vsix 文件，或在 VS Code 的「扩展」视图中点击右上角 … → “从 VSIX 安装”，就能本地测试安装效果。

发布到 Visual Studio Code Marketplace

发布前需准备两件事：微软账号 + 插件 ID 唯一性检查。

• 访问 marketplace.visualstudio.com/manage，用 Microsoft 账号登录
• 在 package.json 中确保 publisher 字段是你在 Marketplace 注册的发布者名称（不是邮箱）
• 插件 name 和 id（由 publisher.name 拼成）不能与已有插件重复，vsce publish 会自动校验
• 运行 vsce login 登录，再执行 vsce publish

成功后几分钟内，你的插件就会出现在 Marketplace 上，别人搜名字就能找到并安装。

基本上就这些。写插件的核心不是技术多高深，而是把“用户想点哪里、看到什么、得到什么反馈”想清楚。从一个小命令起步，跑通全流程，后面加功能、改 UI、读文档、接 API 都顺了。

以上就是如何从零开始创建并发布你自己的VSCode插件的详细内容，更多请关注php中文网其它相关文章！