一、环境准备
1、大于18版本的nodejs
2、安装Yeoman和VS Code Extension Generator:
npm install -g yo generator-code3、生成脚手架
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? npm4、完成项目初始化
(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进行定义跳转或者语法检查了。
(2)插件入口文件
插件入口文件会导出两个函数,activate 和 deactivate,你注册的激活事件被触发之时执行activate,deactivate则提供了插件关闭前执行清理工作的机会。
















