VSCode插件开发入门：Hello World_网络技术_宿州市腾雀网络科技有限公司

VSCode插件开发入门：Hello World

发布时间 - 2025-12-16 00:00:00 点击率：次

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

开发一个 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 函数即可：

用 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);
}

运行与调试

按 F5 启动插件调试环境——VSCode 会打开一个新窗口（Extension Development Host），在里面按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 “Hello World”，选择对应命令即可看到弹窗。

修改代码后保存，调试窗口会自动热重载（部分变更仍需重启）。想装到主 VSCode 里？执行 npm run package 生成 .vsix 文件，然后通过 “Extensions → … → Install from VSIX” 安装。

基本上就这些。没有复杂构建、不涉及 UI 渲染、也不用处理进程通信——真正的 Hello World 级起步。后续再加状态管理、Webview 或设置项，都是在这个骨架上延展。

# linux # vscode # js # node.js # json # node # typescript # npm # mac # ai # win # 堆

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：三角洲行动iOS入口三角洲行动苹果版预约官网入口

下一篇：VSCode与Nix Flakes：可复现的开发环境

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：三角洲行动iOS入口三角洲行动苹果版预约官网入口

下一篇：VSCode与Nix Flakes：可复现的开发环境