Sucha's Blog ~ Archive for May, 2021

21年5月24日 周一 22:10

编写 VSCode Extension

如果只是搭一个框架,VSCode Extension 的编写没有想象中那么无从入手,照着文档 VSCode插件开发全攻略 一步一步往下学就是了。

其实我的要求有 2 个

至于 language server 的支持,自然是不敢想的。

语法高亮

先说语法高亮吧,用不到 typescript 编程,只需要会正则就好,但是这个正则的规则,是跟 TextMate 一样的,文档在这里

这个正则默认是行匹配的,不会跨行,如果需要跨行,就需要设置 begin、end capture,另外,这个正则匹配,在设置的时候,就需要指定高亮颜色,偏偏 VSCode 提供的几种高亮颜色其实不怎么够用,我是想抄 EmmyLua 的一些高亮,比如全局变量的高亮,没学会人家是怎么搞的。

一些实践来的经验:

"strings_long": {
	"name": "string.quoted.single.name",
	"begin": "\\[(=*)\\[",
	"end": "\\]\\1\\]",
	"patterns": [
		{
			"name": "constant.character.escape.name",
			"match": "\\\\."
		}
	]
}

侧边栏大纲

这个需要 typescript 编程了,我的 typescript 小学生水平都可以搞出来 outline,想必是不难的。

先吐槽一下,typescript 是要编译成 javascript 才能用的,另外有引入库的话,记得 npm install,否则会像我一样,浪费了大量的时间在这些基础上面。

outline 其实已经是 language server 的范畴了,只不过我们简单处理,将这个抽象借口部署在本地,就是简单的文本处理就好。

不贴代码了,反正可以在网上找到大量的的例子,比如一个行处理,split 空格拿到 token 关键字的 LS,其实不堪用,但是我是没办法,暂时先这么用着了,毕竟海没学会更好的处理方法。

然后呢,最外层的循环用的是变量 i,我是刚开始不小心,里面一层小循环也用变量 i 了,然后这个 typescript 停不下来了,也是无语,没有语法 scope 的吗,难过。

分析 token 语法的结构,是提供给 VSCode 一个带层次的 node 列表,首层是 outline 第一级,如果需要二级的画,比如 class node 里面再塞入 funciton、property 之类的,就是在这个一级 node 的 children 列表里面塞入 node,VSCode 就会帮你将这个 outline 画出来。

对了,这些 node 需要指定类型,比如是 class,还是 function,还是 field,其实还有很多,property,namescope 之类的,但是实话说,只有前面这 3 个是比较好看的,其他的应该是我比较少见,不明白这些个 icon 是想干嘛。

有了上面这些基础,我也终于理解了好些 Lua extension 为何只用上面这 3 个 outline 类型了,另外,我还知道了为何这些 Lua extension 列出了一大堆 local 变量,明明更重要的应该是全局变量呀。

有个坑必须要说一下。

不晓得是不是 outline 默认了一个 node 就是一行的原因,同一行塞入多个 node,会造成接下来的行拿不到内容,我猜测是我小学生水平的 typescript 哪里搞错了,但具体到底是哪里,目前无从知晓。

先这样吧。