写前端, 还是要解决自己需求才好玩。
起因
当我快乐的CRUD的时候,我注意到了一个很没意义的操作:
- 当写src/view/xxxx文件时
- 总会跑到src/http/api/xxxx 或者 src/tools/xxx 文件, 去看看那个文件 export 的变量名
- 然后切回src/view/xxxx 来写 import xxx from ‘xxxx’.
- 重复 1-3 N次
我感到疲惫,所以我在想有没有更方便的方式。
比如文件目录中,展示这个文件的exports
然后还能直接拖拽, 拖拽时顺便带上import xxx from xxx
开整
–
于是我开始研究vscode插件
的开发教程, 打开官方文档,霍,很简单嘛,也就两句命令.
code.visualstudio.com/api/get-sta…
接下来就是漫长的调研学习,不得不说vscode插件资料比较少,参考了下面的教程:
- vscode 插件 官方教程中文翻译
- vscode 插件 Treeview 开发教程
- vscode Webview 完美集成 Webpack 热更新
- 案例: 掘金一下
- 案例: 代码提示
- 案例: vscode+solidjs
学完发现,其实重要的就是两个逻辑:
- 遍历文件目录
- AST分析脚本
逻辑1就不说了,比较常规(常规到我直接用chatgpt生成), 大致如下:
1 | javascript复制代码async getDirectory(message) { |
核心还是在逻辑2上,想了想可能有两个办法:
- 通过动态import,进行运行时分析
- 通过Bable的AST进行静态语法分析
哪么选择哪一个逻辑更好呢? (小孩子才做选择,大人我全都要 !)
- 对于动态 import,经朋友推荐,调研使用了 antfu 大佬开源的 pkg-exports 以及 local-pkg 库。
- 对于BabelAST,找到了以下资源学习:
大致流程就是先babel.parser,再babel.traverse,最后分析AST就完事:
1 | js复制代码export async function solveExports(code) { |
最后就是漫长的踩坑,写业务逻辑和业务调试,我后续再依次更新。
- 比如如何配置工程化
- 比如如何用solidjs开发webview
- 比如支持vue,调研学习了vue-compiler
- 比如分析出export的变量类型,以方便导入import
- 等等等等
进度
目前感觉初步解决自己的需求,已发布体验版到VSCode商店.
VScode 插件商店搜索 XMouse 即可使用(也可以点击下方链接)
marketplace.visualstudio.com/items?itemN…
未来
- 准备进一步分析文件export,以方便更好的使用。
- 准备集成VSCode原生文件目录的核心功能,就不用来回切换面板。
- 等等等等,期待建议
最后
我是尘码,曾鹅厂打工5年,现裸辞自由职业家里蹲 ing.
如对 Xmouse 有兴趣,欢迎私聊or提issue
本文转载自: 掘金