如何开发自己的第一个VS Code插件？

掌握VS Code插件开发需先安装Node.js、npm、VS Code及Yeoman工具，再通过yo code生成TypeScript扩展模板，编写extension.ts逻辑，调试后可用vsce打包发布。

开发第一个 VS Code 插件并不复杂，只要掌握基本流程和工具。VS Code 使用 Node.js 和 TypeScript 构建插件（也称为扩展），你可以用 JavaScript 编写，但官方推荐使用 TypeScript 获得更好的开发体验。

准备开发环境

开始前确保你的电脑已安装以下工具：

• Node.js（建议 16.x 或更高版本）
• npm（随 Node.js 自动安装）
• Visual Studio Code
• Yeoman 和 vscode-generator-code（用于快速生成插件模板）

安装 Yeoman 和 VS Code 插件生成器：

创建你的第一个插件

运行以下命令启动插件生成向导：

你会被问到几个问题，比如选择插件类型。初次学习建议选：

• New Extension (TypeScript)

然后填写插件名、描述、作者等信息。完成后会自动生成一个基础项目结构。

理解项目结构

生成的项目包含几个关键文件：

DolphinPHP

一个基于ThinkPHP5.0开发的开源PHP快速开发框架，秉承极简、极速、极致的开发理念，为开发集成了基于数据-角色的权限管理机制，集成多种灵活快速构建工具，可方便快速扩展的模块、插件、钩子、数据包，统一了模块、插件、钩子、数据包之间的版本和依赖关系，进一步降低了代码和数据的沉余，以方便开发者快速构建自己的应用。

129

查看详情

• package.json：定义插件元信息和激活事件
• src/extension.ts：主入口文件，包含 activate 和 deactivate 函数
• src/test/extension.test.ts：测试文件（可选）

在 package.json 中，contributes.commands 定义了你在命令面板中可以执行的命令，而 activationEvents 决定插件何时被激活。

编写并测试插件

打开项目文件夹进入 VS Code，按 F5 启动调试。这会打开一个“扩展开发主机”窗口。在这个窗口中：

• 按 Ctrl+Shift+P 打开命令面板
• 输入你插件注册的命令名（如 "Hello World"）
• 确认弹出提示或执行对应功能

你可以在 extension.ts 中修改逻辑，比如调用 vscode.window.showInformationMessage() 显示消息，保存后重新按 F5 查看效果。

打包与发布（可选）

完成开发后，使用 vsce 工具打包：

这将生成一个 .vsix 文件，可手动安装或上传到 VS Code Marketplace 共享。

基本上就这些。从一个简单的命令开始，逐步添加功能，比如语法高亮、代码片段、侧边栏 UI 等。官方文档提供了丰富的 API 示例，适合持续学习。不复杂但容易忽略细节，多试几次就顺了。

以上就是如何开发自己的第一个VS Code插件？的详细内容，更多请关注php中文网其它相关文章！