它可以让我们更快地完成公共函数的导入（import）工作
在现代前端开发中，VS Code 是最受欢迎的编辑器之一。它不仅提供了强大的功能，还支持通过插件扩展其能力。
在开发的时候，我就遇到了这样一个问题：当我正在编写我的业务代码，这时需要使用到一个工具函数，或者一个 hook 函数。我将不得不回到顶部，然后输入
import XX from "XX";
并且有可能这个函数已经导入了，但我不知道。所以也就是白写的。
再举一个 hook 的例子，这是我写的一个分页的 hook，可以看到里面导出的内容很多，这时我一般会去之前写的页面里复制过来：
export function useSlicePage(searchForm, tableData, getListInterface, transfrmData?) {
// ...
return {
pageIndex,
pageSize,
total,
pageSizes,
layout,
sizeChange,
pageChange,
getList,
changeDataSource
};
}
所以我觉得这里应该属于重复性工作，期望能不能一键直接导入想要的工具函数和 hook，并且如果之前已经 import 过这个路径，期望能智能地进行合并。
要实现这个功能，似乎只能借助 VS Code 的力量。
并且我还要知道一个文件里到底导出了什么东西，如何构建 import 语句，如何插入等问题。
尤其是导出还分为 默认导出 和 具名导出，还有 导出与声明在不同位置，这种情况尤其难处理。
所以下面我会回顾一下之前遇到的问题以及尝试
尝试获取文件 export 内容
刚开始我想利用 正则 来处理的，但对于 .ts 文件好像更复杂啊。所以我当时还尝试使用 tsc 转成 js 文件，然后用完了再删掉这些 js 文件。
但是对于 导出与声明在不同位置 这种情况是处理不了的，而且我不太懂 正则，都是请教 GPT 的。
这种缺陷在我心中是难以忍受的，所以后面我又尝试想别的办法。
最后，终于找了一个方法，就是通过 Babel 生成 AST 语法树来获取这些导出节点，然后分析它们。
当然其中细节很多，所以我是单独封装了一个 npm 包，需要解析的时候直接调用里面导出的方法即可。
如何展示在vscode上
VS Code 创建视图一般通过两种方式：TreeView 和 WebView。这里我使用的是 TreeView，因为我们整个解析结果其实可以看成一棵树。
效果就是这样，我们解析的结果就在这两个 tab 下。
并且还可以借助 VS Code 的能力，我们可以自由地打开对应的文件，自动滚动并高亮点击的函数。
如果在函数上面写下注释，将鼠标悬浮在树节点上，能够直接看见这些注释。
掘金上传视频太麻烦了，有兴趣可以看看 GitHub 上的 README。里面包含全部能力
实现一键导入的能力
我准备了一个小按钮,点击这个按钮就可以导入到我们正在编辑的这个文件里
点击之后
这里细节其实还挺多的，例如 已经导入过这个路径，怎么进行合并；没导入过这个路径，则需要考虑他的插入位置等等。
关于转化，我之前是用 @babel/parse， @babel/traverse， @babel/generator，后面发现直接写个 Babel 插件会更好。再后来考虑到性能的进一步优化，学了些 Rust，为了写 SWC 插件。
当然最近我还给他添加了拖拽功能,所以自由度就很高了
node服务
为了锻炼自己，给这个插件还用上了 Koa2 和 MongoDB，因为我想可以在云端共享一些内容，以后如果别的项目要用这个函数可以直接找到。
这块是用 WebView 写的，当然也是可以用现代框架的，这里我用的是 React 比较简洁。最后使用 Vite 进行打包，打包后注意路径要替换成 VS Code 插件 要求的格式。
登录之后大概是这个样子：
一些奇思妙想
为了提高性能，做了数据的缓存。但有点坑，在 VS Code 插件 deactivate 生命周期竟然不能做异步操作。我还提了个 issue，但是回答我没看懂,不知道有没有哪位大佬懂。
关于实时性，做了这些工作。无论是 文件增删，还是 文件内容变化，都能实时性地按需更新 TreeView
结语
三言两语就讲完了，想起来，断断续续差不多开发一年了，独自克服了很多困难。这方面的资源还是太少了，需要自己多看多试，不过终于是把自己的想法做出来了，并且整体也比较让我满意。
感觉我的知识面都扩展了很多，也算是为工程化积累了经验吧，而且我个人也是非常讨厌重复性工作，感觉在浪费时间。利用这些知识又可以解决其他问题了😂。
