从零创建发布 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 自带调试支持,不用额外配置就能边改边试。
- 打开插件文件夹,在 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 都顺了。