前言
某天群里问到是否知道在 VS Code 编辑器中可以在 Vue 文件中快速生成类似 JSDoc 注释的插件名称。对于 JSDoc 是明白的，但是使用插件来生成，这个还真一时记不起来了，心想还没有做过编辑器插件，是否可以自己实现一个呢，说做就做。
VS Code 编辑器插件脚手架
npm install -g yo generator-code
yo code
// first one , next, next
new Extension
打开新创建的项目，首先看向的 package.json 文件，对应的 compile 命令执行之后，f5 开启调试模式，默认添加 Hello World 命令，可以在新开的调试 VS Code 编辑器中使用 ctrl+shift+p 来执行。
VS Code 寻找编辑器光标位置
extension.ts 文件中注册命令的回调函数中可以获取到当前的编辑器来获取想要的数据。
const editor = vs.window.activeTextEditor
if (!editor) {
return
}
// 光标所在行数
const { line } = editor.selection.active
// 当前文件使用的语言
const languageType = editor.document.languageId
VS Code 插入代码片段
可以通过查看类型提示查询到 vscode 提供的方法，找到对应的 insertSnippet 方法，尝试下是否可行。
editor.insertSnippet(
new vs.SnippetString(`/**
*
*/
`),
new vs.Position(0, 0)
)
babel/parser 解析成为 AST 再使用 babel/traverse 对其解析
editor.document.getText() 可以获取到当前文本，可以对其处理。使用 babel 处理 typescript 时需要配置对应的插件。
1、因为我们在对函数进行注释时，当光标在函数的范围内时都因生效，所以需要获取到函数开始的位置用于插入 2、函数的参数及其 ts 对应的类型处理 3、是否有返回值及其 ts 对应的类型处理
vue/compiler-sfc 支持 vue 单文件组件
vue 文件需要先使用 vue/compiler-sfc 解析提取其 script 部分再进行下一步 babel 的处理，需要注意函数起始位置。
获得的数据处理为注释代码片段
和在编辑器中自定义代码片段的逻辑是一样的，所以也可以使用 $1,$2... 来控制光标的位置，通过 tab 来跳转光标位置。
意外收获
从有一个想法，到寻找对应的资料途中，无意间发现关注的一位 B 站 up 主阿崔 cxr 有出过一期相关的视频，从那里学习到了特别重要的两点知识：一是小步快走，代码写小部分功能就进行测试；二是：TDD 的思想，在狼叔的某篇文章中说第一层境界是 console ，第二层是 debug ，第三层就是 TDD，一直都有关注 TDD ，在自己码代码时实现的不大好，这次看到使用 Vitest 来进行给我上了生动的一科，以终为始。
该插件实现目前仅为学习使用，未发布至编辑器插件市场，感兴趣的可以移步看源码function-comment。
