VSC插件--生成api hooks

927 阅读1分钟

问题来源

在vue3使用场景底下想把请求封装成独立hooks,入参的修改,输出的格式修正,这样代码更解耦简洁。可是如果对每一个api请求都手动copy改一遍又太累了,所以利用vsc插件直接生成去修改一下就好了。

效果展示

show.gif

要点分析

menu添加item项

code.png

菜单位置可以调整group的类型来生效。

生成文件

2.png 这里主要是调用vsc方法获取选中内容,之后就可以自行处理了。

3.png 进行模板替换,流式写入。

发布

  1. 全局下载 npm install -g vsce
  2. 项目打包 vsce package
  3. 项目发布 vsce publish

待优化项

  • 把写入文件path设置成配置文件,提升可用性
  • 结合vueuse的usefetch进行封装,只需要生成文件对入参和输出处理即可。通用的请求用usefecth这个hooks基本可以满足覆盖。

插件名字:vscode-plugin-hooks-generate

最后

如果作者有啥不对可以留言,创作不易点个赞呗👍