自己动手，开发一个简单的VSCode插件-VSCode-PHP中文网

自己动手，开发一个简单的VSCode插件

P粉986688829

发布： 2025-12-18 14:08:03

原创

477人浏览过

开发VSCode插件需安装Node.js、Yeoman和generator-code，运行yo code生成项目；核心逻辑在src/extension.ts的activate/deactivate函数中；通过registerCommand添加命令并声明于package.json；F5调试，npm run package打包为.vsix，vsce publish发布。

自己动手，开发一个简单的vscode插件

开发一个简单的 VSCode 插件并不难，关键是理解它的基本结构和运行机制。你不需要从零写编辑器，VSCode 提供了完善的插件 API 和脚手架工具，几分钟就能跑起第一个“Hello World”插件。

准备环境：Node.js + Yeoman + VSCode

确保本地已安装 Node.js（推荐 v18+），然后全局安装两个工具：

yo（Yeoman 脚手架）：运行 npm install -g yo
generator-code（VSCode 官方插件生成器）：运行 npm install -g generator-code

装好后，在终端执行 yo code，按提示选择“New Extension (TypeScript)”或“New Extension (JavaScript)”，填入插件名、ID、描述等信息，就会自动生成一套可运行的项目。

核心文件：extension.ts 是入口

生成的项目里，src/extension.ts 是插件主逻辑所在。它导出两个函数：

activate：插件被启用时调用（比如 VSCode 启动、用户打开命令面板触发）
deactivate：插件即将停用时调用（可选，用于清理资源）

例如，加一行弹窗代码：

vscode.window.showInformationMessage('你好，这是我的第一个插件！');

保存后按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac），输入 “Developer: Reload Window” 重载窗口，插件就生效了。

jquery实现鼠标左右移动动画特效

插件描述：jquery实现鼠标左右移动动画特效是一款非常实用的作品，专门为产品下载宣传页面而生，如果公司缺乏前端和美工设置的话，直接就可以拿这个作品用，把相应的素材换成自己的就好，页面简洁大气，效果很炫。。。

查看详情

添加命令：让用户能主动触发

想让插件响应用户操作？在 activate 函数里注册一个命令：

vscode.commands.registerCommand('myExtension.sayHello', () => {
vscode.window.showInformationMessage('Hello from My Extension!');
});

同时在 package.json 的 contributes.commands 字段里声明这个命令，VSCode 才能在命令面板中识别它。ID（如 myExtension.sayHello）要唯一，建议用插件 ID 做前缀。

调试与打包：边改边试，一键发布

VSCode 自带调试支持：打开插件项目，按 F5 就会启动一个“扩展开发主机”窗口，在里面测试你的插件，所有断点、日志、报错都可实时查看。

测试通过后，运行 npm run package（需先 npm install）生成 .vsix 文件
在 VSCode 中通过 Extensions: Install from VSIX 命令直接安装本地插件
想上架？注册 publisher（用 Microsoft Account 登录 marketplace.visualstudio.com），再用 vsce publish 推送

基本上就这些。不复杂但容易忽略：每次改完 package.json 或权限声明（比如要用到文件系统），记得重载窗口；TypeScript 项目记得先 tsc -w 监听编译，或者直接用 VSCode 内置的构建任务。

以上就是自己动手，开发一个简单的VSCode插件的详细内容，更多请关注php中文网其它相关文章！