电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
教你动手写VScode插件 - 初探
分 享
扫描二维码分享
教你动手写VScode插件 - 初探
VScode
插件
Rice嵌入式开发
关注
发布时间: 2021-06-21
丨
阅读: 843
## 摘要 - 在我之前的文章中,我使用了不同编程语言开发了如下许多上位机。 | 序号 | 内容 | 语言 | |------|------|------| | 1 | [《如何定制自己的HID调试助手》](https://mp.weixin.qq.com/s/CAMfBEcxthuGvtEFsLfy2w) | C# | | 2 | [《C# 串口上位机开发》](https://mp.weixin.qq.com/s/yVtRPAZo3vQ6hwPOZTM6uA) | C# | | 3 | [《Qt 串口上位机开发》](https://mp.weixin.qq.com/s/6YGrAM72GcnBFWCPsafLlw) | QT | | 4 | [《教你动手写UDP协议栈 - OTA上位机》](https://mp.weixin.qq.com/s/My6AKh_BRfgtM6VgL3jTBQ) | python | | 5 | [《基于RT-THREAD nano的平衡车--上位机软件》](https://mp.weixin.qq.com/s/EY0QKn6w2XJdMDdPcNHMkg) | QT | | 6 | [《R-Plan上位机》](https://mp.weixin.qq.com/s/k1SwyiWhfv2HWoirrcSuGg) | QT | | 7 | [《BearPi TCP》](https://mp.weixin.qq.com/s/GQsUDEjlDSLsz47857nmkg) | QT | - 你会发现很零散,集成度,而且久而久之就没有维护了。今天我又来解锁一种开发工具的神器--VScode插件。 - 其实vscode现在已经很多大厂先后开发出他们各自的插件,如:华为LiteOS Studio,RT-Thread Studio等。 - 在这说说为什么作者会想着用VScode来写上位机的几点原因: 1. vscode现在成为作者平时开发(编辑器),阅读代码必不可少的工具。 2. vscode丰富的插件,它可以让你敲代码,也可以让你上班偷懒(玩游戏,看知乎 - [《教你使用vscode在上班的时候偷懒》](https://mp.weixin.qq.com/s/Nw7Anm-pnsH4JT_PrM4-nQ),甚至可以让你刷题。 3. vscode丰富的插件,对作者平时写文章也是很方便。如:Markdown编辑预览,draw.io。[《draw.io-取代visio的流程图绘制工具》](https://mp.weixin.qq.com/s/P1KDwoAtgWpzvStuVx1U3g) 4. 一个软件多种功能(作者最喜欢了,不然每次打开几十个软件,烦死了),开发便利,而且他有很多牛X插件。 - 接下来作者的想法是以后的上位机工具都采用vscode的插件来开发。所以vscode的上位机我会一步一步来解锁。 - 今天这篇文章主要先简单描述vscode插件的开发流程:环境搭建-创建工程-运行测试-打包插件。 ## 环境搭建 1. 安装Visual Studio Code ![](https://cf01.ickimg.com/bbsimages/202106/17cbbb26f3adfe61d9152438bc259217.png) - 下载地址:https://code.visualstudio.com - 下载完,双击根据提示安装即可。 2. 安装Node.js ![](https://cf01.ickimg.com/bbsimages/202106/f227fef16415ca327a3ae9842ec6ce19.png) - VSCode 插件的环境搭建可以参考官方文档:https://code.visualstudio.com/api/get-started/your-first-extension - 根据文档说明:需要安装Node.js和GIT。 - Node.js的下载地址:http://nodejs.cn/download/ - 下载完,双击根据提示安装即可。 3. 安装完上述的两个工具之后,我们还需要安装生产插件代码的工具:Yeoman和VS Code Extension generator。 - 关于Yeoman的描述,官网链接:https://yeoman.io - 关于VS Code Extension generator的描述,官网链接:https://code.visualstudio.com/api/get-started/your-first-extension - 安装说明:打开电脑的cmd命令行工具,执行下面的命令完成Yeoman和VS Code Extension generator的工具安装。 ``` C npm install -g yo generator-code ``` ![](https://cf01.ickimg.com/bbsimages/202106/058ae74607da8c243fd1049d64718aa1.png) ## 创建工程 1. 在cmd命令行执行如下命令,自动生成一个工程的基本代码: ``` C yo code ``` ![](https://cf01.ickimg.com/bbsimages/202106/5ecddbd4b6b38a937a81d0d083dda8e3.png) 2. 从上图看出有两种编写扩展的语言:JavaScript和TypeScript。我们这里选择TypeScript。 - TypeScript语言学习,查看如下链接:https://www.typescriptlang.org/docs/handbook/release-notes/overview.html 3. 选择编写扩展的语言后,有3个输入三个选择: 1. 输入你扩展的名称 2. 输入一个标志(直接默认也可以) 3. 输入对这个扩展的描述 4. 是否创建一个git仓库用于版本管理 5. 是否捆绑源代码与webpack 6. 使用哪个包管理器(我选择npm) ![](https://cf01.ickimg.com/bbsimages/202106/ee725ead6b6c1001849895c8cdf9446a.png) 4. 上述的配置都会在工程项目中package.json文件有对应的属性来表示。 5. 目录结构说明: ``` C . ├── .gitignore //配置不需要加入版本管理的文件 ├── .vscode // VS Code的整合 │ ├── launch.json │ ├── settings.json │ └── tasks.json ├── .vscodeignore //配置不需要加入最终发布到拓展中的文件 ├── README.md ├── src // 源文件 │ ├── extension.ts // 如果我们使用js来开发拓展,则该文件的后缀为.js │ └── test // test文件夹 │ ├── suite │ └── runTest.ts ├── node_modules │ ├── vscode // vscode对typescript的语言支持。 │ └── typescript // TypeScript的编译器 ├── package.json // 该拓展的资源配置文件 ├── tsconfig.json // ├── typings // 类型定义文件夹 │ ├── node.d.ts // 和Node.js关联的类型定义 │ └── vscode-typings.d.ts // 和VS Code关联的类型定义 └── vsc-extension-quickstart.md ``` ## 运行测试 1. 通过VS Code打开我们刚刚创建的工程。如下图: ![](https://cf01.ickimg.com/bbsimages/202106/5505cb73c203d38804a131848ecbb247.png) 2. 运行测试:可以直接按F5按钮或者点击VS Code菜单栏:运行->启动调试。会弹出一个新的vscode工作区。 ![](https://cf01.ickimg.com/bbsimages/202106/fb92684b87e7d4071c6a5a4ac7324dd1.png) 3. 测试:按ctrl+shift+p,然后输入hello word,就会弹出对应时间的内容。 ![](https://cf01.ickimg.com/bbsimages/202106/a2c2cfdcbaf44da11c7f31fff4ba1501.png) ![](https://cf01.ickimg.com/bbsimages/202106/256d085941ea674b57d383306b647e1f.png) 4. 这个简单的demo的关联文件:package.json和extension.ts ![](https://cf01.ickimg.com/bbsimages/202106/abb433ddefefd61ea4e9a62435c562c8.png) ## 打包插件 - 在我们编写完一个插件之后,总不能每次都运行代码的方式来使用插件的功能,而且如果别人也要使用你这个插件,不可能拿你的源码。vscode支持打包和发布。打包和发送:如同我们QT开发编译生成的exe文件就是打包过程,然后将这个包发布到网上,就是发布过程。 1. 打包插件需要一个工具:vsce。在cmd命令行输入如下命令 ``` C npm install -g vsce ``` 2. 发布流程:需要发布到marketplace.visualstudio.com上面去。发布成功后可以在vscode里面用ext install来安装这个插件。发布还需要去配置一个token,然后这个token还的找个地方记住,还会过期,而且在发布过程中还得祈祷网络好。所以在这里我就不写发布的流程。发布的命令如下,在cmd命令行输入。 ``` C vsce publish ``` 3. 打包流程:打包的最终结果是一个.vsix的插件包,可以通过vscode手动添加插件安装,也可以通过marketplace分享自己的插件。 - marketplace链接:https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true - 打包的命令如下,在cmd命令行输入。 ``` C vsce package ``` 4. 不过打包之前需要修改两个地方。 - ① 在package.json文件中增加publisher属性。 ![](https://cf01.ickimg.com/bbsimages/202106/ec930b4bbf97f5d02b189a970488bb61.png) - 注:如果不输入上述属性,打包时会出现如下图错误: ![](https://cf01.ickimg.com/bbsimages/202106/b7cbecbeee599fbea42d72ab40d77a20.png) - ② 修改README.md,删除原有的内容,写上自己的内容。 ![](https://cf01.ickimg.com/bbsimages/202106/f92096aa7d0009b076db229ed8639df2.png) - 注:如果不修改,打包时会出现如下图错误: ![](https://cf01.ickimg.com/bbsimages/202106/4dbf6cd5210fbfd6cb0e8d0ba8fa0005.png) 5. 执行上述的打包命令,如下图插件打包成功。 ![](https://cf01.ickimg.com/bbsimages/202106/c2e72b5b3eb448e1cef1b82f47075c30.png) ## 手动添加插件 - 选择打包好后的插件包:rice-vsca-0.0.1.vsix ![](https://cf01.ickimg.com/bbsimages/202106/af6d6fdce4fd3a0a0ee902c4283e76a6.png) ![](https://cf01.ickimg.com/bbsimages/202106/b1d255e83dc56c88bd4c215d6ac6faf0.png) - 安装完之后会显示在插件已安装的目录中: ![](https://cf01.ickimg.com/bbsimages/202106/b49ae3e05966559a2fad41c0c1717cfc.png) ## 运行测试插件包 ![](https://cf01.ickimg.com/bbsimages/202106/b6de2f33e55cc5cf84fdb0384b1f54a4.gif)
关注微信公众号『Rice嵌入式开发技术分享』,后台回复“微信”添加作者微信,备注”入群“,便可邀请进入技术交流群。 ![](https://cf01.ickimg.com/bbsimages/202106/ca476e7cc147168cac7afc1d34fe5b32.png)
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
Rice嵌入式开发
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交