简单聊一下开发 VS Code 扩展的一些个人收获

103 阅读3分钟

备注:

  1. 我个人写文有点像流水账一样,所以还是进来缩短文字数目比较好。
  2. VS Code 文章简述为 vsc

VS Code 命令的妙用

在没有接触 vsc 扩展开发之前,我对 vsc 的功能还是停留在浅尝这一阶段,对它的了解大概也就搜索扩展,安装扩展,打开关闭,编辑命令。

后面从 vsc 扩展开发第一课开始接触用 Ctrl + Shift + P搜索已经注册的命令,并调用它。逐渐,我了解到了它的一些功能特性。 这里就简单总结。

  1. 重启 TS 服务器,在实际项目中有不少使用 code Gen 场景,如常见的 api gen 这种,当你在把服务启动命令和 code gen 相关脚本结合在一起,就容易出现一种情况,TS 服务器无法追踪到本次类型更新,项目里引用这些 code gen 产物的类型一片飘红。解决的办法有三,一是code gen 和 启动服务脚本分开,然后 code gen 成功,在打开 vsc;二是把命令在外部 shell 中执行后在打开 vsc;三则是在命令中查询 restart ts server 调用它,即可重新构建 vsc 类型服务。
  2. vsc 命令提供给开发者调用命令来复用功能,所以如果要观察一个插件核心功能大体也可以通过插件功能贡献面板中的提供命令设置项激活事件,了解一个插件大体的运行所需的要求或者功能。之前,对 vsc 扩展没有像现在接触过开发它的经历,仅仅是通过其面板所提供的 readme 文档来了解大致功能,如今多了一个眼界,确实变化挺大的。扩展还是扩展,但我作为观察者有更多的眼界去了解深入它。

TS 相关

  1. 别名使用 alias ,ts 编辑器提供类型路径,但不实际参与模块编译输出,可以使用 tsconfig-paths 或者 ts-alias 来修改别名路径
  2. require 初始模块,项目中则是用来别名修改,在初始化中,读取别名配置,查询是否存在别名路径文件,返回正确的别名路径。
  3. ts 编译流程,token 流 –> ast 语法树 –> 发布 ast,类型检测,类型擦除,代码编译。
  4. ast 结构知识
  5. ts 操作库 ts-morph,作为一个ast 的工具库提供了不少基于 typescript 之上的 api,我前面国际化插件第二版便是基于它所提供的 ast 进行分析和服务。
  6. ts 第二版标准装饰器。

javascript 相关

  1. 正则匹配,提取字符串 /("|')[^\1]*?\1/,从匹配当前字符串相关的单双引号中匹配合适的字符串内容长度,不会出现像 /("|')[^["|']]*?("|')/ 这样匹配一半的情况.

NodeJs 相关

  1. watchFile 监听文件模块,其实有时候不一定需要 nodemon,ts-node-dev 这样的模块,我们也可以引用 node 中的 fs 模块中 watchFile 函数。

glob

  1. 常见的文件和文件夹匹配的库
  2. ignore 语法(有点忘记了)

单元测试

  1. 总结分离基于环境的测试和其它 api 测试的流程

更多的学习目标

  1. ts-morph
  2. language-server-protocol
  3. ast complier

结语

也许还有不少知识点没有列出来,我的笔记干瘪瘪的。