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

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

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

前言

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

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

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

用起来的感受就是：应该早点听掘友的话，真香！

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

下载安装

vscode插件商店搜索gogocode即可

转换单个文件试试

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

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

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

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

批量转换文件

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

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

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

2、书写转换代码

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

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

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

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

赠送一键升级vue2功能

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

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

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

推荐学习：vscode教程