要在 VS Code 中创建“Hello World”扩展,需用 Yeoman 初始化项目、在 extension.ts 中注册命令并调用 showInformationMessage、在 package.json 中配置 commands 和 activationEvents、编译后通过命令面板触发。

如果您希望在 Visual Studio Code 中创建一个简单的扩展来显示“Hello World”消息,则需要了解基本的扩展结构和开发流程。以下是构建此插件的具体步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、初始化扩展项目
VSCode 扩展通常基于 TypeScript 构建,官方推荐使用 Yeoman 生成器快速搭建项目骨架,该方式可自动配置 package.json、extension.ts 等核心文件。
1、在终端中执行命令 npm install -g yo generator-code 安装 Yeoman 及 VS Code 扩展生成器。
2、运行 yo code 启动向导,选择“New Extension (TypeScript)”选项。
3、按提示输入扩展名称(如 helloworld)、标识符(如 helloworld)和描述,确认生成路径。
二、实现激活逻辑与命令注册
扩展的核心行为定义在 extension.ts 文件中,其中 activate 函数负责插件启动时的初始化工作,包括注册命令和设置上下文。
1、打开生成的 src/extension.ts 文件,定位到 activate 函数内部。
2、添加代码调用 vscode.commands.registerCommand 注册名为“extension.helloWorld”的命令。
3、在命令回调中插入 vscode.window.showInformationMessage(‘Hello World!’) 实现弹窗提示。
三、配置 package.json 中的贡献点
package.json 不仅声明元数据,还需明确定义插件对外暴露的功能入口,例如命令、菜单项及激活事件,确保 VSCode 能正确加载并触发功能。
1、在 package.json 的 “contributes” 字段下添加 “commands” 数组,包含对象 {“command”: “extension.helloWorld”, “title”: “Hello World”}。
2、在 “activationEvents” 数组中加入 “onCommand:extension.helloWorld”,使插件仅在该命令被调用时激活。
3、确认 “main” 字段指向编译后的入口文件(通常为 “./out/extension.js”),且 “browser” 字段未设置或为空。
四、编译与调试扩展
TypeScript 代码需编译为 JavaScript 才能在 VSCode 中运行,调试过程依赖 Launch Configuration 启动一个独立的 Extension Development Host 实例。
1、在项目根目录执行 npm run compile 触发首次编译,生成 out/ 目录下的 JS 文件。
2、按下 Cmd+Shift+P(Mac)打开命令面板,输入并选择“Developer: Toggle Developer Tools”,确认无编译错误。
3、按 F5 启动调试,默认运行 launch.json 中配置的“Launch Extension”环境,新窗口将加载当前扩展。
五、手动触发 Hello World 命令
扩展加载后需通过用户操作显式调用注册的命令,VSCode 提供多种触发方式,命令面板是最直接的途径。
1、在调试窗口中按下 Cmd+Shift+P(Mac)打开命令面板。
2、输入 Hello World,从下拉列表中选择对应命令。
3、确认右下角弹出 Hello World! 信息提示框。