VSCode插件开发学习

news2024/12/26 20:54:45

一、环境准备

0、参考文档：VS Code插件创作中文开发文档

1、大于18版本的nodejs

2、安装Yeoman和VS Code Extension Generator：

npm install -g yo generator-code

3、生成脚手架

yo code

选择内容：

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension
? HelmRender
? What's the identifier of your extension? helmrender
? What's the description of your extension? helm render tool
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm

4、完成项目初始化

（1）打开项目执行 npm -i 安装依赖

（2）点击运行调试

（3）在弹出的另一个vscode实例，叫扩展开发宿主，上执行调试插件。在扩展开发宿主上按下 shift+ctrl+p 弹出命令面板输入Hello World命令，底部就会出现 Hello World from HelloWorld! 的通知。

（4）可以通过打断点的方式进行调试

二、项目结构

1、插件运作方式

Hello World插件包含了3个部分：

注册onCommand 激活事件: onCommand:extension.helloWorld，所以用户可以在输入Hello World命令后激活插件。
使用contributes.commands 发布内容配置，绑定一个命令ID extension.helloWorld，然后 Hello World命令就可以在命令面板中使用了。
使用commands.registerCommand VS Code API 将一个函数绑定到你注册的命令IDextension.helloWorld上。

理解下面三个关键概念你才能作出一个基本的插件：

激活事件: 插件激活的时机。
发布内容配置: VS Code扩展了 package.json 插件清单的字段以便于开发插件。
VS Code API: 你的插件代码中需要调用的一系列JavaScript API。

2、插件目录结构

.
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 一个友好的插件文档
├── src
│   └── extension.ts    // 插件源代码
├── package.json        // 插件配置清单
├── tsconfig.json       // TypeScript配置

（1）插件清单

每个VS Code插件都必须包含一个package.json，它就是插件的配置清单。

name 和 publisher: VS Code 使用<publisher>.<name>作为一个插件的ID。你可以这么理解，Hello World 例子的 ID 就是vscode-samples.helloworld-sample。VS Code 使用 ID 来区分各个不同的插件。
main: 插件的主入口。
activationEvents 和 contributes: 激活事件 and 发布内容配置。
engines.vscode: 描述了这个插件依赖的最低VS Code API版本。
postinstall 脚本: 如果你的engines.vscode声明的是1.25版的VS Code API，那它就会按照这个声明去安装目标版本。一旦vscode.d.ts文件存在于node_modules/vscode/vscode.d.ts，IntelliSense就会开始运作，你就可以对所有VS Code API进行定义跳转或者语法检查了。