一招教你使用vscode中插件搞定整个项目的代码替换(收藏)

之前的文章《深入浅出解析css字体图标的制作和使用(代码分享)》中,给大家了解了css字体图标的制作和使用。下面本篇文章给大家怎么使用vscode中插件搞定整个项目的代码替换,我们一起看看怎么做。

一招教你使用vscode中插件搞定整个项目的代码替换(收藏)

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

微信截图_20210916101737.png

前言

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

playground地址https://play.gogocode.io/

vscode插件https://marketplace.visualstudio.com/items?itemName=mmfe.vscode-gogocode

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

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

下载安装

vscode插件商店搜索gogocode即可

微信截图_20210916102626.png

转换单个文件试试

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

微信截图_20210916102716.png

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

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

微信截图_20210916102811.png

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

批量转换文件

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

微信截图_20210916102922.png

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

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

2、书写转换代码

3、替换原文件:replace可以仅替换当前展示的文件,replaceAll可以替换目录树中所有文件

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

针对这个需求,交流群里小伙伴贡献了一段正则:

微信截图_20210916103032.png

简单的替换用正则确实方便,但是要考虑的边界情况会很多,比如空格、换行、特殊字符等。复杂一些,用正则比较困难的情况,欢迎使用gogocode

赠送一键升级vue2功能

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

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

官网地址:https://gogocode.io/zh

推荐学习:vscode教程

以上就是一招教你使用vscode中插件搞定整个项目的代码替换(收藏)的详细内容,更多请关注www.sxiaw.com其它相关文章!