VSCode插件开发学习

一、环境准备

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

1、大于18版本的nodejs

2、安装YeomanVS 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)点击运行调试

image.png

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

image.png

 

image.png

(4)可以通过打断点的方式进行调试

二、项目结构

1、插件运作方式

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

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

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,你注册的激活事件被触发之时执行activatedeactivate则提供了插件关闭前执行清理工作的机会。

  • 21
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值