插件开发之VSCode

欢迎各位大家关注本人微信公众号:程序员JC,小程序:RobotJC 里面包含很多本人之前做的小案例,也许这里有你想要的东西哦。

鉴于我前两周研究了并开发了一个VSCode插件的情况,这次就讲一下插件开发。这篇文章,**强烈推荐大家转发学习哦!**谢谢!因为我觉得任何开发人员都应该或多或少的掌握一些插件开发知识,当然更多的是因为我觉得这篇文章写的比较好一点(嘿嘿,自夸一下),所以好东西当然要和大家分享啊。

好了,开始这篇文章的正式讲解!这篇文章,我将从两个方面进行阐述:关于插件&什么是插件,一个VSCode插件的具体制作,插件开发模式。

关于插件&什么是插件

首先,说明一下插件的称呼习惯,常用插件扩展两个称呼,其实使用扩展这个称呼更将准确,但鉴于我的习惯,本盘文章中我都将采用插件这个称呼(正如标题)。关于插件定义,我不是很想用官方话语来解释,这个网上都有,这里不做说明。用我自己的话来说,插件就是一个基于宿主程序进行二次开发的程序。例:Windows操作系统的QQ应用程序,这里的Windows系统就是宿主程序,QQ应用程序就是插件程序;微信应用中的智行火车票小程序,这里的微信应用就是宿主程序,智行火车票小程序就是插件程序。通过上述两个例子,想必各位同僚都知道插件是个什么玩意了吧。这里例举一种特殊的情况,例:浏览器中的插件程序和网页,这里的网页其实也是插件程序。可能有的同僚会问道?网页基本可以运行在任何浏览器上(如:谷歌、火狐、IE等),那为什么还叫插件。我的回答是,只要是基于宿主程序的二次开发的程序均可称之为插件,只不过网页这种形式的插件运行环境很兼容而已,这和定义本身无关。经过我上述的一番说明,软件开发人员基本开发的都是插件程序(即二次开发),嵌入式开发人员除外(这里设一个下限,直接面向硬件编程的开发人员我在这里算做一次开发)。

所以就目前来说,绝大多数的程序员都是开发的插件程序。只不过各程序员的开发所依赖的宿主程序不同而已。有开发windows程序的程序员(宿主程序:Window操作系统),有开发基于Unix内核程序的程序员(宿主程序:主流Ubantu、MacOS、Linux以及CentOS操作系统等),有开发移动应用的程序员(宿主程序:主流IOS、Android的操作系统),有开发微信小程序、小插件以及小游戏的程序员(宿主程序:微信应用)、有开发网页的程序员(宿主程序:各种浏览器)等等,这些都是目前基于各种宿主程序的主流插件开发。

虽然,都是在开发插件,但是不同的宿主程序,开发方式或者说模式也不一样。在这里,我将插件主要分为两类,一类是普通插件程序(方便任何用户使用),一类是IDE插件程序(方便程序员开发使用)。IDE有多种,但是每种IDE的适应很局限,比如Pycharm(主打Python),PHPStorm(主打PHP、HTML、CSS、JS)、WebStorm(主打HTML、CSS、JS),CLion(主打C、C++)、eclipse(主打Java),Myeclipse(主打Java)、VC(主打C、C++),Visual Studio(主打C、C++、C#),XCode(主打C、C++)等等,太多太多了,上述例举的IDE都是本人都用过的,而且这些IDE基本都可自定义开发插件。那么问题来了,如何选择开发IDE插件。这里本人给出两点建议,一是如果你觉得你的学习能力足够强,可以选择几款主流的IDE进行插件开发学习;二是如果你的学习能力一般,你主要学习你用的IDE就好了。不管怎样,上述的建议都太过局限,所以这里给大家推荐一款为IDE程序而生由微软研发的依靠插件驱动的VSCode软件。该软件就目前来说很适用,也许他不能像上述例举的IDE功能强大,但是该软件的通用性胜过上述任何一宽IDE,轻量小巧,能满足程序员大部分需求(好吧,也许只是我的个人倾向)。

那么插件程序能干吗或者说为什么要开发插件程序?的确,我上面说的比较笼统,这里给各位举实例说明。就拿我个人来说,本人之前上班的一家公司自主研发了一门脚本语言,但是没有开发该脚本语言的IDE、我记得每次写代码都只能当做记事本去写代码,习惯使用过强大IDE的我们,写的肯定不爽啊。后来我的领导基于VSCode开发了一个属于该脚本语言的插件,我之后写脚本代码就感觉方便很多,比如语法高亮,函数跳转,提示等等。那会我才意识到了IDE插件开发是多么重要。也许有的同僚会问,那你们公司为什么不为自研的这个脚本语言开发一款IDE呢?我想各位应该知道,开发一款IDE需要大量的开发时间和成本的,但是一个IDE插件也许只要两天就完成了。还举个例子来说,本人前段时间开通了我的个人微信公众号,但是没有留言功能,到网上一搜,原来是微信官方自2018年3月起,新申请的公众号(也欢迎各位关注我的公众号:程序员JC,和我的小程序:RobotJC,里面有很多开源的小案例和技术知识点)去掉了留言模块,但是我每次写的文章很想知道反馈,所以就开发了一个留言插件(微信上也有很多留言插件,但主要有两个特点,一个是广告多,一个是收费,所以我就自己写了一个,哈哈)。

这里简单说一下我的个人感受,我觉得程序员开发程序所面对的用户,可以多一点面向我们自己(其实就是开发的程序给程序员使用,提高程序员开发面对普通用户的程序效率),例如工具、插件之类的。我觉的有很大的提升空间(仅个人观点)。

一个VSCode插件的具体制作

先说明一下这个VSCode插件,是为了提高我的开发效率我才做的。我会给各位同僚详细说明为什么要做这个VSCode插件和做的时候是怎么想的,以及具体实现过程,希望对各位同僚有所帮助。还有就是,我这个VSCode插件暂不提供源码,只给出安装包(最后给出下载地址),但是给出网上的资料和源码(因为资料比较少,这是本人觉得相对较好的文章,凑合点用,哈哈)。

为什么要做这个VSCode插件?

这源于我在前几周学习单片机开发的时候(这算做是本人的第二次学习、算是温习吧),单片机开发用的也是C语言,不过和标准C语言有些区别,新增了一些关键字。所以得用专门的IDE进行开发,不能用常规开发C语言的IDE,诸如VC,VS之类的,这里用的是Keil。不过这个Keil工具开发环境不是很友好,就像VC一样(用过VC的同僚应该知道),反正就是和我目前用的IDE没法比。所以想着有没有什么办法能提高我开发单片机程序的效率呢?考虑目前一直使用VSCode做为开发IDE,我就想着要是能在VSCode上像写C系列程序那样写单片机程序就好了。当时我也知道VSCode上都是靠插件驱动的,但我不知道的是学习VSCode插件开发的时间要多久,所以还有点犹豫。正在犹豫之际,我想到了我之前公司的领导为自研的脚本语言开发的插件案例,而且他之前也没接触过,前后只花了几天。所以我想着我自己也没他笨,估计也只需要几天,觉得可行,就决定为Keil开发一个插件(一来提高自己的开发效率,二来学习一下VSCode开发的相关知识,为以后工作做铺垫,况且VSCode目前很流行)。

这个插件需要哪些功能呢?

先给各位同僚看一张VSCode的大致布局图:
在这里插入图片描述
上面的绿色框框是我这个VSCode插件涉及的区域。这里我开始开发的时候有两个版本,第一个版本是想自己做想在菜单栏做一个菜单,就像资源管理器那样的菜单,专门对keil工程进行管理,但是我在开发到一半的时候,因为不知道如何使用资源器中新建文件的控件(在网上找了好久,都每找到相关说明),最后不得不得放弃,见下图:
在这里插入图片描述
第二个版本是基于资源管理器实现的,也就是我的最终版本。所以接下来的说的功能需求都市是第二个版本的,我将需求功能分为这么两类用于区别。一是核心功能,二是辅助功能。核心功能有:能创建Keil工程,能编译keil工程,能创建源文件、能创建头文件,能预览工程引用的头文件和源文件,能预览源文件和头文件被哪些工程引用,能移除工程引用的头文件和源文件、能将头文件和源文件添加至工程;辅助功能有:支持源文件和头文件语法高亮,支持代码函数、头文件以及宏定义跳转,支持代码提示、支持文件图标主题,支持新语言,支持右键菜单模式,支持快捷键编译,监视文件状态、支持可配置。

这个插件的功能的具体如何实现?

好了,知道了做什么功能,接下来面临的问题就是如何去做,这也是最重要的。当然也是最耗时的,顺便说一下,开发VSCode插件需要使用Javascrip语言或者Typescript语言,微软官方建议使用Typescript语言进行开发,好像说是能完美的支持。而且Typescript语言是微软研发的,微软就是微软,到底给自己留了一手啊,哈哈。不过这个Typescript语言用了之后也挺不错的,像微信小程序、插件、小游戏开发也可以用Typescript语言开发,所以说还是有点适用空间的,这里简单说一下Typescript语言和Javascript语言的区别。Typescript语言基本是支持Javascrip语言的语法的,又称为Javascript语言的超集,我个人觉得二者之间最大的区别就是,Typescript语言有着严格的类型检测(这很微软,我个人比较喜欢这种),也有对象的概念class,其他的有感兴趣的同僚去网上自行了解。

在正式开发功能前,当然需要搭建环境,以及如何创建VSCode插件工程。我给的资料链接里都有说明,这里不做说明。这里需要提醒一下的是,VSCode插件工程需要关注两个文件,基本所有功能的开发都离不开这两个文件:一个是入口文件,extension.js或extension.ts这个取决于你使用什么语言;另一个是json配置文件,package.json。其实还有一个文件叫备注文件README.md,开发的时候不需要关注,打包的时候需要关注,就是给插件进行说明。切记不要更改这些文件名。环境搭建完成,才能开始下面的功能开发了,下面我按照上面写的功能顺序进行说明。

创建keil工程,要想能创建Keil工程,就必须知道keil工程的结构。我的做法是,先用现有的keil IDE创建一个工程,然后分析工程配置文件,找的重要的字段后,然后抽象出一个工程模板文件,在每次创建工程的时候就把拷贝。最后抽样的模板文件,简单给大家看看!
在这里插入图片描述
@**@就是在创建的时候需要替换的,这里字段太多,我并不需要全部弄清楚,只需要我想要的就行,比如@KEIL-NAME@表示工程名等等,只要最后把字段替换成功后并且,能用keil IDE编程成功就行了。如何触发创建工程这个,这里需要配置package.json。见下:
在这里插入图片描述
这里是声明指令(里commond字段就是指令,VSCode插件是通过命令驱动的方式实现的),声明之后需要使用的,我这个是想通过视图菜单区进行显示,那么还需要配置见下图:
在这里插入图片描述
红框中表示在资源管理器菜单中,视图菜单区显示。对了,这里各个字段的一是,我给的资料链接里都有,不做讲解。这样配置完成后,就可以显示,其效果见下图:
在这里插入图片描述
最后就是如何获取上述红框中的【keil】创建工程(
.uvproj)点击触发事件,这里给大家简单说明一下,在package.json中声明的指令,要想获取触发事件需要使用API vscode.commands.registerCommand注册,这个API有个触发回调函数,这时我将之前写好的创建工程的代码模块,在回调函数调用就行了。这里之所以说的很粗糙,是因为我给的资料链接里有这些,我只做个提示而已。后续的声明指令,使用指令,以及注册指令不再进行说明了。因为手累,哈哈。

编译keil工程,当然不是我手撸写编译Keil工程的程序,真要是去开发这个,可能需要很长一段时间才能开发完。我这里是想通过命令行来编译Keil工程,所幸Keil IDE是支持命令行调用的(就是不用显示UI视图,直接执行keil IDE编译程序)。命令行的执行必须要有终端,VSCode官方创建终端的API,vscode.window.createTerminal。这样我们只需将需要执行的命令发送到终端上执行就行了,但是这里有个问题。因为VSCode终端执行是异步执行的,也就是说当编译命令发送到终端后,终端立即显示执行完成了,但是实际情况是Keil工程还在编译,所以这里我将命令写了个批处理*.bat(因为批处理是同步的),这样终端回等待批处理文件执行完成后才会执行完,这样我们就可以和实际终端的执行情况同步了。见下图:
在这里插入图片描述
在这里插入图片描述
创建源文件,这里和创建Keil工程功能类似,但比它要简单。因为只需要创建一个*.c的空文件而已,但如果你想加些内容进去也可以(我这里是空文件)。但是有个问题,因为资源管理器菜单本身是支持新建文件的,所以我们在新建文件的时候只需将后缀名改为*.c不就行了吧。这里是不行的,因为这样创建的文件是没有关联到工程的,所以我这里给出了创建源文件这个功能。这个菜单只有在是keil工程文件的情况下才会显示。见下图:
非Keil工程文件菜单:
在这里插入图片描述
Keil工程文件菜单:
在这里插入图片描述
至于如何配置,参见when字段,可以对文件后缀名进行判断。

创建头文件,这个功能基本和创建源文件功能一样,这里不做说明了。之所以给出两个,一是为了用于区别,二是为了以后方便添加模板内容。

预览工程引用的头文件和源文件,我在编译时,可能需要知道该工程下关联了多少头文件和源文件,不可能每次都直接去查看工程配置文件。这样可读性不仅差,而且很容易看错。我是在插件最开始的时候,解析当前工作目录下所有.uvproj文件,并记录下来,这样就知道.uvproj下的头文件和源文件了。效果见下图:
在这里插入图片描述
预览源文件和头文件被哪些工程引用,这个功能基本和上个功能基本一样。我在重构代码时,可能会去除不必要的源文件,这时就得需要知道这个源文件或者头文件被那些工程引用,以免其它工程再次编译时受影响。

移除工程引用的头文件和源文件,有时可能我需要从工程中移除头文件或者源文件,以免工程关联一些不必要的头文件和源文件。而且我开发的这个插件是基于资源管理器开发的,本身支持删除文件操作,当头文件和源文件被删除的时候,我得修改工程文件。这里提出一个疑问,如何知道文件删除?(后面给出解答)

将头文件和源文件添加至工程,这个功能是必须的,因为我开发的这个插件是基于资源管理器开发的,但是资源管理器本身支持新建文件操作,当使用本身的新建文件功能创建的源文件和头文件时,这时的文件并为加入对应工程文件中,这时需要留有手动将文件添加至工程文件中。只有*.h和*.c文件才有会出现菜单,见下图:
非*.h和*.c文件菜单视图:
在这里插入图片描述
.h和.c文件菜单视图:
在这里插入图片描述
至于如何配置,参见when字段,可以对文件后缀名进行判断。

核心功能小结,咋一看其实都是在操作文件相关。的确,都是围绕keil工程配置文件写的相关功能,至于如何编写代码就是逻辑了,所以我在这里只给出了某个功能的API而已。完成上述的功能开发后,只能算做这个插件可以直接用VSCode进行编写Keil程序了(单片机程序)。但是原生Keil IDE一样都有这些功能,所以接下来的辅助功能才是起到方便作用的(也是真正发挥VSCode实力的时候,哈哈)。

源文件和头文件语法高亮,需要说的是,VSCode本身自带多种语言语法高亮识别,如果这里使用VSCode本身自带C语言识别的话,还是有点小问题的,因为单片机C语言并非标准C语言,二是在其基础上有扩展了一些关键字,这些特定关键字标准C语言不会识别,会当做普通文本处理,所以我就得自己配置。那么如何配置呢?首先需要在package.json中配置如下:
在这里插入图片描述
上图中language字段是所属语言(这个在之后的功能中会具体说明),因为你如果配置语法的话,说明是一门新型语言。path字段,是新语言的语法解析配置表。一个C语言的语法,是很庞大的,你如果自己去纯手动去配置的话不仅费时,而且还可能会出错。这里给一个便捷的方法,考虑到标准C语言语法VSCode是本身支持,所以在VSCode的安装目录下能找到先关语法配置表,见下图:
在这里插入图片描述
在这里插入图片描述
图中用红框框出来的就是C语言语法解析配置表。找到之后,直接拷贝到你的语法配置文件中,这时我只需要将单片机关键字添加到新语言的语法解析配置表中就行了。至于怎么添加,先给大家截个标准C语言的配置表图:
在这里插入图片描述
首先别的不说,光看行数就会吓死人,三千多行。就别说那些奇奇怪怪的字段了,都不知道是什么意思,对于初学者来说,短期内几乎不能知道如何去手动配置语法表。但是如果你只是添加某些特定的关键字或者某个匹配模式,还是很容易实现的。我现在就是将单片机C语言的新增的关键字加入到其中,那么我去搜索诸如int、return关键字样,看看标准C语言是将这些关键配置在哪些地方的,多搜索几个以防万一,因为毕竟不是很明白。这种办法是不是觉得很可行,嘿嘿,站在前人的肩膀上开发效率就是不一样啊。最后附上一张效果图:
在这里插入图片描述
上图中的sbit关键字就是单片机中的新关键字,发现高亮,惊不惊喜、意不意外。

代码函数、头文件以及宏定义跳转,我相信目前几乎所有的程序开发人员所用的IDE都支持函数跳转吧,如果说现在让我去使用一个无法对函数跳转的IDE是很不习惯的。所以为了方便,以及提高开发效率,我当然要在我这个插件中加入这些功能啊。要想实现跳转定义,我必须得实现vscode.DefinitionProvider接口中的provideDefinition方法。简单代码演示:

import * as vscode from 'vscode';

class JumpDefinition implements vscode.DefinitionProvider
{
    provideDefinition(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken) {
        //这是待跳转词
        const word = document.getText(document.getWordRangeAtPosition(position));

        return new vscode.Location(vscode.Uri.file(这里是跳转的文件路径), new vscode.Position(跳转至第几行, 跳转至第几列));
    }
}

//然后对其进行注册就可以了
vscode.languages.registerDefinitionProvider(语言名字, new JumpDefinition());

所以是不是很简单,这也是VSCode的强大之处了。我简单说明一下,当我们在代码中按住Ctrl+鼠标左键时,就会VSCode会系统调用provideDefinition方法,并把你要跳转的词的传入到provideDefinition方法中。这是如果有返回值的话,说明这个词是可以跳转的,在代码中的表现有下滑线出现;如果没有返回值,说明不可跳转。下面给出可跳转示图:
在这里插入图片描述
当如果可以跳转,就会想图中那样,高亮并显示下划线,还有提示。所以知道这个接口如何使用,我得围绕provideDefinition方法的返回值做文章了。所以接下来面临的问题,如何知道传入的词是函数?是头文件?是宏定义?或者是其他?我这里的做法是在最开始会解析(如何解析,这个得自己去写正则表达式,做法不唯一)工作路径下的所有源文件和头文件,比如函数你就得解析出函数名,并把文件路径,函数名以及位置对应存储起来;当我按下Ctrl+鼠标左键时,这是就将传入的待跳转词和我存储的函数名信息去匹配,如果找到就把文件路径以及位置按照上述的方式进行返回就行了,头文件和宏定义跳转也是类似的。这里提出一个疑问,解析的跳转信息如何更新?(后面给出解答)

代码提示,当我写代码时有时会希望,写出前面几个字母,会给出相关的联想提示。并且有的API名字太长我是记不住的,只能记住个大概。要想实现这个功能,我得需要在package.json这个配置文件中,做出如下配置:
在这里插入图片描述
上图中language字段是所属语言(这个在之后的功能中会具体说明),因为配置代码提示也是和语言相关的。extension字段是代码提示会出现在哪些扩展名的文件。path字段,针对这个语言的代码提示配置表。如何配置这个提示表,先给大家看看配置表信息的截图:
在这里插入图片描述
我这个配置表中没有包含API的配置,仅仅是关键词的配置,也有四五百行,如果让光去配置工程量也是有一些的。这里的字段比较少,我也不做说明,到时再源文件里,写一个关键词就能看出哪个字段显示在哪里。这里给大家提供一种简单偷懒的方法,有时如果语言语法很像时我们并不需要自己全去配置。我的这个插件是单片机C语言,我只需要标准C语言的提示配置表,然后加上单片机新增的C语言关键字配置信息,就完成了。那么如何去找C语言的提示配置表呢?我的做法是去网上下一个C/C++语言的相关插件并安装(前提是这个插件是配置了提示表的),找到插件的安装位置,并找到配置提示表进行直接拷贝即可。见下图:
在这里插入图片描述
这里只给出了插件安装的位置,具体的代码提示表示,你得去打开插件的package.json文件搜索snippets字段即可。当然你也可以去VSCode系统支持的语言里去找(前提是你想要的语言提示表VSCode系统里有),至于去哪里找?就是上面给出语法解析配置表的地方找。再一次证明站在前人的肩膀上开发效率会高很多,哈哈。最后附上一张效果图:
在这里插入图片描述
上面是当我打出e这个字母时给出的联想,所以到这里自己对应看提示信息就可以得知之前输的代码提示表的字段是什么意思了。

文件图标主题,为了和VSCode系统支持的标准C语言有所区别,这里我就想对*.h、.c以及.uvproj文件给出特定的图标进行标识。但是我又想,不能影响别的文件,别的文件还是得按照VSCode系统给出的图标进行标识。所以得自己去配置文件图标主题,首先得package.json文件中配置如下:
在这里插入图片描述
这里path字段就是文件图标主题配置文件,关于这个文件的命名,官方说的是尽量采用*-icon-theme.json的方式命名,这样能更好的处理。至于id和label字段我不做过多说明,稍后会给出一张图进行说明。当我将上述的内容配置完成后,就会出现下图的效果:
在这里插入图片描述
上图的id和label字段是不是清除了。好吧,前面这些都不是该功能的重点,重点是如何写这个文件图标主题的配置文件。这里依然有很方便的方法,从上图中可以看出Seti-keil(Visual Studio Code)这个文件图标是我的这个插件配置的,另外两个是VSCode系统本身自带的,所以一想到系统能自带,很有可能在安装路径下能找到。果不其然,真的有这个配置表(和之前那个语法文件路径截图在同一个路径,这里就不截图演示了)。还是先看看配置表内容:
在这里插入图片描述
两千多行,包含了各种语言的图标以及深色、浅色主题的配置。所以我不能因为安装我的这个插件而导致其他语言的无法识别,所以只能在这个主题配置文件的基础上加以修改,这样能最大的兼容支持。在这里我只需要将原来的*.h、.c以及.uvporj修改和添加即可。至于如何修改和添加,你就搜索原有*.c和*.h文件配置,对应的看很快就会了。附上一张效果图:
在这里插入图片描述
新语言,我想让源文件、头文件以及工程文件有自己的图标标识,有代码提示以及语法识别,只要需要满足这其中一个条件,我都要配置一们新语言。那么如何配置呢?当然还是要从package.json文件出发,见下图:
在这里插入图片描述
id字段就是语言标识,extensions是哪些文件做为这种语言识别,aliases是配置在面板中查看的(稍后给出图),configuration字段是是语言相关一些配置。文件配置内容很少见下图:
在这里插入图片描述
主要就是当你点击左侧花括号时,另一个匹配的花括号会被标识。还有就是快捷键注释等,这个配置文件内容也可以在VSCode安装路径下找到,如果你不想配置的话(前提是你的新语言有相似的),我这里是直接拿的C语言的配置表。语言配置完成后能在哪看呢或者设置呢?还是截图说明:
在这里插入图片描述
在这里插入图片描述
从上图可以看到,我们配置的语言C51了。底部显示是当前文件被识别的语言类型。

右键菜单模式,在前面讲述的核心功能基本都是通过邮件菜单模式驱动的,也简单说明了一下。这里还是在简单提一下,当然还是在package.json文件配置。首先得在commands字段中声明指令,然后在explorer/context字段中使用(因为我的插件是基于资源管理的视图菜单区开发的),最后调用API vscode.commands.registerCommand注册。

快捷键编译,这个只需要为需要快捷键触发的指令绑定即可。依然还是在package.json文件中配置。见下图:
在这里插入图片描述
我这里配置的是按F5键进行编译运行。

监视文件状态,前面的说的关于工程以及代码定义跳转相关功能,基本都和该功能有关。当有源文件和头文件删除时,我需要知道哪些文件被删除了,因为需要修改Keil工程,并将头文件和源文件从Keil工程中移除;也需要更新代码跳转存储信息,确保代码跳转位置的正确性。当有源文件和头文件重名命时,也需要更新Keil工程以及更新代码跳转存储信息。当新建源文件和头文件时也需要更新代码跳转存储信息。当文件内容发生变化时依然需要更新代码跳转存储信息。那么如何做了,VSCode官方有相关API事件:vscode.workspace.onDidDeleteFiles(删除文件),vscode.workspace.onDidRenameFiles(重命名文件),vscode.workspace.onDidCreateFiles(创建文件),vscode.workspace.onDidChangeTextDocument(文件内容发生变化),vscode.workspace.onDidSaveTextDocument(保存文件)。尽管这些事件有的能在操作性系统资源管理器修改文件时能监听到,但我在这里并不推荐大家这样做。为避免错误发生,请尽量在VSCode工作区修改文件,如果直接在操作系统目录进行修改了的话,为避免错误发生,建议重新加载工作目录即可。

可配置,考虑到Keil IDE的安装路径在每个用户的电脑上都可能不相同,所以得让用户能进行手动修改,以及系统头文件路径、单片机型号、厂商。要想实现可配置的数据,依然需要配置package.json文件,具体配置见下图:
在这里插入图片描述
这里说明一下title字段,这里是在插件设置标题,方便在VSCode的设置区查找,见下图:
在这里插入图片描述
下面就需要监听配置什么时候发生变化并且如何进行修改了,这里配置发生变化的事件vscode.workspace.onDidChangeConfiguration,设置和获取配置内容的APIvscode.workspace.getConfiguration().update(更新配置内容),vscode.workspace.getConfiguration().get(获取配置内容),知道API后就容易实现了,所以到这里可配置功能就完了。

辅助功能小结,考虑到不给源码的情况,这块的功能基本都是用图片进行说明的,我个人觉得更形象一些。但是有很多说的很粗糙,比如API参数说的不怎么相信,或者怎么使用,以及某些功能没说具体怎么做等。本人之所以这样,是因为觉得功能怎么做和VSCode本身无关,这个和程序员的能力有关;API之所以没给出参数说明,是因为本人觉得你知道API后你就可以跳转到源码,可以自己看参数说明(官方比我说的好)。

在前面我说过,还得需要关注README.md文件,这个文件没法直接预览。需要你打包完成后,然后安装才能看见。关于打包教程我给的资料链接里面,我这里不做说明。给个预览图:
README.md配置文件:
在这里插入图片描述
安装打包后的插件效果图:
在这里插入图片描述
好吧,到这里这个插件也算完成了,真不容易啊(哈哈,其实还好)。

总结,如果你之间没有这种靠配置文件驱动程序的编写经验,你在刚开始编写时,可能不知所措,但是没关系,这只是短暂的;如果你之前没有了解Typescript语言,甚至连Javascript语言也没了解过,刚开始看官方的API(虽然比没什么卵用,个人觉得哈)以及源码会有点吃力,编码方式也会有不习惯,但是没关系,因为你有其他编程语言经验,这个会很快上手的。我个人觉得我写这个插件最困难之处是因为不知道调用哪些API,而且在网上很难找到相关资料,给的都是比较大众化的(就像我分享的资料链接,我目前觉得最好的了),比较局限。VSCode官方也给出了比较详细的文档,但都是以小功能案例给的(到具体实现有很多注意事项,对初学者看官方文档去开发,这个有点困难),作用不是很大;所以很多API是我自己跳转源码一个个试出来的,在上述的功能中,我把我这个插件需要的一些相关API都给枚举了(这样如果你想开发学习VSCode插件,会节省不少时间)。我个人感觉,微信官方的API文档较微软官方的API文档而言更容易理解(可能外国人思路和我们中国人思路不一样吧,也许是我自己没法理解,哈哈),因为在开发微信小程时我就是边看API文档边进行开发,直到最后完成。说了这么多,大家也不要感到害怕,什么东西不都是由会到会吗,加油!

插件开发模式

这个就像很多程序的熟悉的设计模式一样(诸如观察者、工厂、单例模式等),也能算做一种模式。我记得之前每次和同行(也包括同学)聊开发相关的问题时,什么跨平台,什么兼容性,什么扩展性。这些对当时来说,仅仅只是一知半解(只知道这些术语,并没深刻体会)。但是现在不一样,通过我开发了几个微信小程序以及这个VSCode插件,我觉得我对这个插件开发模式有了新的认识了。下面我简单说一下我个人的看法,和大家分享交流一下:

我个人觉得,目前很多软件都是提供扩展开发的。也将核心程序和UI展示程序彻底分开。比如:浏览器、我这次的Keil IDE。就像我之前说的Python无头浏览器,如果不将核心程序和UI展示成具体分开,我每次请求url都会打开浏览器界面;如果开发Keil IDE的团队最开始将编译程序集成在IDE里,那么我这次开发的VSCode插件每次编译都会启动Keil IDE(并且Keil IDE还要支持命令行启动,不然我没法传参等)。这样都不是我想要的,这其实也就是多进程开发,恰恰是我们接触很少(至少我接触很少)。尽管我也参加过实际工作项目,大家有的也是,但是里面扩展开发模式我想大多数都不知道(包括我自己),因为这些公司都有牛人基本都写好了,而且我们又会觉得自己都很忙,不会太愿意看这部分的代码(更谈不上去专研),所以就会觉得这个插件开发模式熟悉而陌生了,只能用于交流,不会实践编写。

借我这次的VSCode插件经验,我也认识到了插件开发模式很重要,我也希望和大家一起加油学习(万一你哪天参与一个从零到一的软件开发项目,并且担任负责人职位,这还是很有必要的哈)!

到这里,本篇文章算完结了。打字太累了,忘各位同僚体谅一下作者,支持转发一下,谢谢!

资料链接:https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html

demo源码及VSCode插件安装包地址:https://pan.baidu.com/s/1-uyw6-2QsP3PNTeke3b9WQ 提取码:2tb3

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值