使用 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 的正则替换


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

    ((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