使用 VsCode 正则替换

需求背景：

需要把 antd-mobile 的 InputItem 组件做一层封装，然后替换项目中原来所有用到 InputItem 的地方。

import { Flex, InputItem, Button, Toast } from 'antd-mobile';

替换为

import { Flex, Button, Toast } from 'antd-mobile';
import InputItem from '@src/components/common/InputItem';

搜索了一下，发现有100多个文件需要更改

而且还发现有一些格式是多行的

import {
  Flex,
  Button,
  InputItem
} from 'antd-mobile';

一个个改是不可能的，所以这里我用到了 VSCode 的正则替换

解决办法

1. 先替换多行格式
   先用正则匹配出多行格式的结果

((import\s\{\n(.*\n)*).*)\sInputItem,\n((.*\n)*.*from 'antd-mobile';)

• \s：空白符
• \n：换行符
• .*：匹配任意次数的除了回车符和换行符以外的所有字符
• ()：分组，后面可以用$1、$2...进行捕获

然后将匹配结果进行替换

$2$4\nimport InputItem from '@src/components/common/InputItem';

使用前面 () 捕获的 $2、$4 把 InputItem 前后的代码拼接到一起，再通过换行符 \n 往底下插入新的一行 import

2. 替换剩下的单行格式
   也是差不多的思路

// 匹配
(.*)InputItem,(.*)
// 替换
$1$2\nimport InputItem from '@src/components/common/InputItem';

最后得到想要的结果