开发环境搭建

开发 VSCode 插件前，先搭建完整的工具链：Node.js 运行环境、Yeoman 脚手架生成器、项目调试配置。一套环境搭好，后续所有插件开发都在其中进行。

前置工具安装

Node.js

插件运行在 Node.js 环境，需要先安装：

工具	版本要求	说明
Node.js	16+（建议 LTS）	插件运行时
npm	随 Node.js 附带	包管理器

安装完成后验证：

node -v
npm -v

Yeoman 与 Generator-code

脚手架工具用于快速生成插件项目模板：

npm install -g yo generator-code

工具	作用
yo	Yeoman 脚手架主程序
generator-code	VS Code 扩展项目生成器

全局安装后，yo code 即可在任意目录创建插件项目。

创建项目

执行脚手架

在目标目录执行：

yo code

Yeoman 会交互式询问插件类型，常见选项：

选项	说明
New Extension (TypeScript)	TypeScript 插件（推荐）
New Extension (JavaScript)	JavaScript 插件
New Color Theme	颜色主题
New Language Support	语言语法支持
New Code Snippets	代码片段
New Keymap	快捷键绑定

选择 TypeScript 后，按提示输入插件名称、描述、publisher 等元信息，脚手架即生成完整项目。

项目结构分析

生成的项目结构如下：

my-extension/
├── .vscode/
│   ├── launch.json       # 调试配置
│   └── tasks.json        # 构建任务
├── src/
│   └── extension.ts      # 插件入口文件
├── package.json          # 插件清单
├── tsconfig.json         # TypeScript 配置
├── .vscodeignore         # 打包忽略文件
├── README.md             # 说明文档
├── CHANGELOG.md          # 更新日志
└── vsc-extension-quickstart.md  # 脚手架帮助文档

package.json

插件清单文件，声明插件的所有元数据与能力：

字段	作用
name	插件标识（小写，用于市场唯一性）
displayName	市场展示名称
version	版本号
engines.vscode	兼容的 VS Code 最低版本
main	插件入口文件
activationEvents	激活事件声明
contributes	能力贡献点（命令/菜单/配置等）

extension.ts

插件入口文件，包含两个核心导出函数：

export function activate(context) {
  // 插件激活时执行：注册命令、监听事件
}

export function deactivate() {
  // 插件停用时执行：清理资源
}

tsconfig.json

TypeScript 编译配置，脚手架默认生成合理默认值，一般无需改动。

调试配置 launch.json

脚手架自动生成 .vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ],
      "outFiles": [
        "${workspaceFolder}/out/**/*.js"
      ],
      "preLaunchTask": "${defaultBuildTask}"
    }
  ]
}

关键配置说明：

配置项	作用
type: extensionHost	以扩展开发宿主方式启动
--extensionDevelopmentPath	指定要加载的插件路径
outFiles	TypeScript 编译产物位置
preLaunchTask	启动前先执行编译任务

启动调试

在 VS Code 中打开项目，按 F5 启动调试：

1. 自动执行编译任务（npm run watch）
2. 打开新的 Extension Development Host 窗口
3. 新窗口中已加载当前插件
4. 在命令面板执行插件命令验证

调试快捷键：

快捷键	作用
F5	启动/继续调试
Shift+F5	停止调试
F9	切换断点
Ctrl+Shift+F5	重启扩展开发宿主

验证环境

环境搭建完成后验证：

• yo code 能正常生成项目
• 项目能被编译（npm run compile）
• 按 F5 能打开 Extension Development Host
• 插件命令能在新窗口命令面板中找到

一切正常，环境即搭建完成，可以开始编写第一个插件。