在VS Code编辑器中实现 JSDoc 函数注释插件2.0

前言

接上回，函数注释插件在本地打包好之后给群里提出问题的朋友使用，用着挺好。发现 Document This 插件是不支持非 JS 或 TS 文件，当前插件想要在任何函数声明的地方都可以进行使用，不限于文件格式，那样就可以发布到插件市场了。

问题

1. 之前在解析 Vue 文件使用 vue/compiler-sfc，svelte 文件的解析需要 svelte，解析一种格式的文件就需要其对应的工具，这会导致插件越来越大，是否可以换一个方式来做这件事情呢？
2. 针对 Babal 处理之后的 TS 类型解析，这个真的有必要吗？毕竟插件的目标是指向于生成函数注释，所需内容在函数声明的位置就可以获取到，通过 babel 的解析转换成其特有的数据格式再进行转换回原有的数据格式，这样反而是绕了一大圈。

输出：注释及其插入位置

最终想要得到的内容

interface Snippet {
  comment: string
  startLine: number
}

// 在编辑器中执行以下命令即可插入代码片段
editor.insertSnippet(
  new vs.SnippetString(comment),
  new vs.Position(startLine, 0)
)

输入：VS Code 编辑器光标位置和当前窗口代码

const editor = vs.window.activeTextEditor
if (!editor) {
  return
}
// 光标所在行数
const { line } = editor.selection.active
// 当前文件的内容
const text = editor.document.getText()

中间处理的过程

1. 获取到光标位置和当前窗口代码
2. 将代码根据换行符分割为数组
3. 根据获取到光标位置和代码字符串数组判断光标所在的位置是否为函数（因习惯在函数声明的上一行位置执行命令，所以此处需判断下一行位置的代码是否为函数）
4. 判断是否为箭头函数和是否为 TS 类型函数
5. 是函数的情况下获取函数的参数和返回值部分即可，判断的依据是 function 声明的函数依据{，箭头函数的依据 => 来进行判断
6. 解析函数参数部分，通过正则从函数声明头部部分中提取出参数部分，TS 类型的依据 : 来进行分割参数名和其类型
7. 解析函数返回值部分类型，如果没有则为空字符串
8. 组装所需数据结构并返回

问题解决

1. 不使用第三方包的情况下，插件大小缩小至 27kb，缩小近 300 倍。
2. 通过对当前代码解析可以实现插件的目标，思路来自于 babal 解析过程中的 tokens，此处无需细颗粒化。

该插件已发布至编辑器插件市场，欢迎下载使用，贡献代码提问题请移步至function-comment。