VSCode扩展开发入门:构建你的第一个Hello World插件

15次阅读

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

VSCode扩展开发入门:构建你的第一个Hello World插件

如果您希望在 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! 信息提示框。

text=ZqhQzanResources