用这个vscode插件,分分钟搞定整个项目的代码替换

2,768 阅读2分钟

image.png

前言

gogocode 工具开源以来,就听到了社区小伙伴对 vscode 插件的呼吁,于是我们复用了 playground 的能力,与本地文件及目录结构结合,开发了 vscode 插件

用起来的感受就是:应该早点听掘友的话,真香!

现在插件已经成形,介绍一下该怎么使用 GoGoCode 插件来方便的进行批量代码转换和修改。

下载安装

vscode 插件商店搜索 gogocode 即可

image.png

转换单个文件试试

  1. 右键文件,“用GoGoCode转换”打开插件窗口

image.png

  1. 书写转换代码:我想改写component的引入方式,把 (resolve) => require([xxx], resolve) 形式的代码改为 () => import(xxx)

如果你有更复杂的处理场景,都可以基于gogocode来编写转换逻辑,参考文档,目前支持对js、html、vue的转换

image.png

  1. 替换源文件:转换效果立竿见影,点击 replace ,文件就被修改成功了~

批量转换文件

gogocode 插件同样支持在整个项目或选中的多个文件中进行替换image.png

  1. 选中文件夹:文件目录右键,“用gogocode转换”

如果想屏蔽选中的某些文件或文件夹,可以ctrl点选多文件再批量移除

  1. 书写转换代码
  2. 替换原文件:replace可以仅替换当前展示的文件,replaceAll可以替换目录树中所有文件

replaceAll时,只有转换成功的文件会被replace,转换出错的文件不会被replace

针对这个需求,交流群里小伙伴贡献了一段正则:image.png简单的替换用正则确实方便,但是要考虑的边界情况会很多,比如空格、换行、特殊字符等。复杂一些,用正则比较困难的情况,欢迎使用 gogocode。

另外,vscode+gogocode对于代码分析也是天作之合,有类似场景的小伙伴欢迎入群交流,QQ群:735216094 钉钉群:34266233

赠送一键升级vue2功能

除了非常便捷的批量替换之外,安装gogocode插件的朋友,可以免费享受到一键将vue2代码升级为vue3的权益!

只需要文件夹右键,选择“vue2升级为vue3”,不需要敲命令,不需要复制粘贴路径,就可以一键转换代码,更多vue升级相关可以戳这里:阿里妈妈又做了新工具,帮你把 Vue2 代码改成 Vue3 的

开源项目持续打磨中,希望得到社区小伙伴们的反馈,gogocode工具和 vue2 升级工具的问题欢迎给我们留言或者提issue,成功转换的小伙伴们,我们也期待听到你们声音~

Github:github.com/thx/gogocod… 求 star 支持 o(////▽////)q

官网:gogocode.io

QQ群:735216094 钉钉群:34266233

playground:play.gogocode.io/