VSCode插件开发入门：Hello World-VSCode-PHP中文网

VSCode插件开发入门：Hello World

P粉986688829

发布： 2025-12-16 19:01:30

原创

758人浏览过

VSCode插件开发从“Hello World”起步很简单，只需用yo code脚手架生成TypeScript模板，配置package.json的activationEvents、main和commands字段，编写命令逻辑并调试运行即可。

vscode插件开发入门：hello world

开发一个 VSCode 插件，从“Hello World”开始并不难，关键是理解插件的基本结构和激活时机。你不需要写一堆配置或打包脚本，VSCode 官方的 yo code 脚手架能快速生成标准模板，剩下的就是改几行代码、注册一个命令、触发一次弹窗。

创建插件项目

确保已安装 Node.js（v16+）和 Yeoman：

运行 npm install -g yo generator-code
执行 yo code，选择 “New Extension (TypeScript)”
按提示填写插件名（如 hello-world-sample）、描述、ID 等信息

完成后会生成一个含 src/extension.ts、package.json 和调试配置的完整项目。

理解 package.json 中的关键字段

这是插件的“身份证”，VSCode 靠它识别功能和权限：

"activationEvents"：定义插件何时被加载，比如 "onCommand:hello-world.helloWorld" 表示只在用户执行该命令时激活（推荐，提升启动性能）
"main"：指向编译后的入口文件（默认是 ./out/extension.js）
"contributes.commands"：声明插件提供的命令，必须与代码中注册的 ID 一致

别漏掉 engines.vscode 字段，建议设为 =1.80.0" 保证兼容性。

编写核心逻辑（extension.ts）

打开 src/extension.ts，修改 activate 函数即可：

达芬奇

达芬奇——你的AI创作大师

166

查看详情

用 vscode.commands.registerCommand 注册一个命令，ID 必须和 package.json 里声明的一致
回调函数中调用 vscode.window.showInformationMessage 弹出 “Hello World”
TypeScript 类型已自动导入，不用手动补全

示例片段：

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('hello-world.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from hello-world-sample!');
  });
  context.subscriptions.push(disposable);
}

登录后复制