一恍又大半年没更新了,再不更新大家或许就会忘记我了吧。

最近四个月一直在开发一款vscode插件,目前已经开发完毕了,是一款测试脚本IDE插件,能够实现测试脚本的编写管理调试等功能。

界面如下:

ui自动化IDE

这个IDE插件是配合我写的嵌入式linux ui自动化测试核心来用的。整套工具应该是目前嵌入式linux上最强大的ui自动化测试工具了。大家如果感兴趣可以私聊我。

现在回到标题,写了四个月的vscode插件,中间踩了太多的坑,有很多心得想与大家分享,接下来打算一周写一篇文章来介绍一下vscode插件开发。今天这第一篇当然就是hello world了。

vscode插件的开发还是很好上手的。微软官方的文档写得非常详细:https://code.visualstudio.com/api

只要按照教程一步一步走就可以了。https://code.visualstudio.com/api/get-started/your-first-extension

首先当然是要下好vscode,一般在官网下最新的版本就可以了。如果有特别的需求比如要支持win7的话,那就只能用v1.70.3及以下版本了,再高的版本不支持win7了。

接下来是下好git(https://git-scm.com/)和node(https://nodejs.org/en/),node用最新的LTS版就可以了。

装好必要的软件后就可以开始开发了。

按照vscode的教程,第一步是安装项目生成器,通过它可以一键生成一个vscode插件项目,并提供好基本的项目框架。

npm install -g yo generator-code

安装好后就可以敲yo code来创建项目了。它会问你插件所用的语言、名字、标识符、描述、创不创建git仓库、用什么包管理器等问题,这个根据自己的需要填写就好,我的建议是语言用ts、包管理器用npm。

1、插件的类型,vscode的插件分为好多种,见名知意分为扩展、主题、语言、代码片段、键盘映射、扩展包、网络扩展、笔记本渲染等,最主要的就是扩展了。
yo code

项目创建好之后,用vscode打开刚建好的那个项目文件夹,之后就可以点击调试按钮或者按F5来调试插件了。

开启调试后会新开一个vscode的窗口,它会作为插件的宿主,原来的窗口会进入调试模式,可以在调试窗口中设置断点查看打印输出。

宿主窗口:
host

原窗口:
origin

通过项目生成器生成的项目本身是一个可以运行的项目。在插件宿主中打开命令面板,输入Hello World就会激活插件,它会在右下方弹出一个提示框显示【hello world】的字样。

打开命令面板:
command panel

输入 hello world:
hello world

右下方弹出提示信息,说明插件激活成功了!
在这里插入图片描述

在原来的vscode窗口中的调试控制台中可以看到console.log输出的信息:
在这里插入图片描述

这就是一个最简单的vscode插件。

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐