最简路径成功创建VS Code Hello World插件:先全局安装yo code脚手架,选择JavaScript模板生成项目;在extension.js中注册extension.helloWorld命令并调用showInformationMessage;在package.json的contributes中配置commands和onCommand激活事件,main指向./extension.js;最后通过命令面板触发验证。

你想在VS Code里快速跑通一个能点击弹出“Hello World”的插件,不需要配置Webpack、不碰TypeScript编译链、跳过所有环境报错陷阱,只用最简路径把功能跑起来。
安装脚手架并生成项目骨架
打开终端,执行:
npm install -g yo generator-code
这一步必须成功,否则后续所有操作都会卡在模板生成环节。【如果提示权限错误,请在命令前加 sudo】
接着运行:
yo code
按提示选择:
→ 项目类型:New Extension (JavaScript)
→ 插件名称:hello-world
→ 其他全部直接回车用默认值
生成完成后,项目根目录下会出现 package.json、extension.js、vsc-extension-quickstart.md 三个关键文件。
修改 extension.js 实现弹窗逻辑
用 VS Code 打开刚生成的项目,找到 extension.js 文件。
定位到 activate 函数内部,在 vscode.extensions.all.forEach(...) 这行之前插入以下代码:
vscode.commands.registerCommand('extension.helloWorld', () => {
vscode.window.showInformationMessage('Hello World!');
});
这段代码注册了一个名为 extension.helloWorld 的命令,触发时调用弹窗。注意函数名必须和后面 package.json 里声明的一致,拼错一个字母就无法响应。
配置 package.json 暴露命令入口
打开 package.json,找到 "contributes" 字段(若不存在则手动添加),填入:
"commands": [
{ "command": "extension.helloWorld", "title": "Hello World" }
],
"activationEvents": [
"onCommand:extension.helloWorld"
]
【"activationEvents" 必须写,否则插件不会加载命令】 缺失这行,F5调试时命令面板搜不到你的插件。
确认 "main" 字段值为 "./extension.js" —— 因为选的是 JavaScript 模板,不是 TypeScript,所以不走 out/ 目录。
启动调试并验证功能
按下 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(Mac),输入 “Developer: Toggle Developer Tools”,回车打开控制台,确保没有红色报错。
再按一次 Ctrl+Shift+P,输入 “Hello World”,应该能看到候选命令 “Hello World”。
回车执行,右下角立刻弹出 “Hello World!” 提示框。

















