VSCode扩展开发必须安装Node.js(v16+)和VSCode,全局安装yo与generator-code脚手架;执行yo code生成项目后,需验证F5调试、命令触发及activationEvents按需激活配置,并注意console.log输出位置与断点调试条件。
VSCode 扩展开发需要哪些基础工具
必须装好 node.js(v16+)和 vscode 本身,yo 和 generator-code 是脚手架核心——不装它们,npm init vscode-extension 这类命令根本跑不起来。
执行前先全局安装:
npm install -g yo generator-code注意:如果用 pnpm 或 yarn,得对应加
-g 参数,否则 yo code 会报“command not found”。
常见卡点:
- Node 版本太低(
vscode-extension-telemetry等依赖会编译失败) - PowerShell 默认执行策略禁止运行脚本(Windows 用户常遇到
yo : The term 'yo' is not recognized) - 国内网络下
npm install卡在vscode-test下载二进制,建议提前配置NODE_OPTIONS=--max_old_space_size=4096并换淘宝镜像
从 yo code 到可调试的扩展项目
运行 yo code 后,它会问你语言(TypeScript 推荐)、扩展名、ID、描述等。ID 会成为 package.json 中的 publisher.id,后续发布时不能改。
生成完别急着写逻辑,先验证环境:
- 按
F5启动 Extension Development Host——这是个带你的扩展的独立 VSCode 实例 - 打开命令面板(
Ctrl+Shift+P),搜Hello World,能触发说明基础结构通了 - 修改
src/extension.ts里的console.log,保存后按Ctrl+R重载窗口,看输出是否更新
容易忽略的一点:activationEvents 决定扩展何时加载。默认是 "*"(一启动就加载),但实际应尽量设为 ["onCommand:extension.helloWorld"] 这类按需激活,否则影响主进程启动速度。
package.json 里最关键的 4 个字段
这不是普通 npm 包,VSCode 靠这几个字段识别行为:
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言,搭载自主研发的模块化引擎驱动技术,实现可视化拖拽无技术创建并管理网站!如你所想,无限可能,支持创建任何网站:企业、商城、O2O、门户、论坛、人才等一块儿搞定!永久免费授权,包括商业用途; 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
-
main:入口 JS 文件路径(构建后指向./out/extension.js,不是src/下的 ts) -
activationEvents:上面提过,错配会导致命令不可见或延迟响应 -
contributes.commands:声明所有可用命令,ID 必须和registerCommand第一个参数完全一致(大小写敏感) -
contributes.menus:比如想把命令加到编辑器右键菜单,得写"editor/context"而不是"editor/title",拼错就不出现在菜单里
示例片段:
"contributes": {
"commands": [{
"command": "extension.insertTimestamp",
"title": "Insert Timestamp"
}],
"menus": {
"editor/context": [{
"when": "editorTextFocus",
"command": "extension.insertTimestamp"
}]
}
}
调试时看不到 console.log?去开发者工具找
VSCode 扩展的 console.log 不输出在终端,而是在 Extension Development Host 的开发者工具里——按 Ctrl+Shift+I(Windows/Linux)或 Cmd+Option+I(macOS),切到 Console 面板。
更可靠的调试方式是打断点:
- 确保
launch.json的type是extensionHost - 在
src/extension.ts里设断点,F5 启动后操作触发命令,自动停住 - 如果断点灰掉,检查
out/是否存在且 source map 正确(tsconfig.json中sourceMap和inlineSources都要为true)
一个硬伤:VSCode 1.85+ 对某些 webview 场景的调试支持变弱,若涉及复杂 UI,建议直接用 vscode.env.openExternal 打开浏览器调试页面。









