VS Code中React文件正则替换className为CSS Modules格式求助

嘿，我之前做CSS Modules迁移的时候也碰到过这个需求，VS Code的正则替换功能完全能搞定，给你说具体操作步骤：

一、开启正则替换模式 #

打开VS Code的替换面板：

• Windows/Linux：按下 Ctrl+H
• Mac：按下 Cmd+H
  然后点击面板右上角的 .* 按钮，开启正则匹配模式。

二、精准匹配div标签的单引号className #

搜索正则表达式： #

<div\s+className='([a-zA-Z0-9_-]+)'

替换内容： #

<div className={styles.$1}

正则解释： #

• <div\s+：确保只匹配div标签开头的className，不会误改其他元素的类名
• className='：匹配你原来的单引号写法
• ([a-zA-Z0-9_-]+)：这是捕获组，会把中间的类名（比如random_class_name）存起来，后面用$1调用
• '：匹配结尾的单引号

三、批量替换所有文件 #

如果要一次性处理所有React文件，点击替换面板右侧的「Replace All in Files」按钮（就是那个文件夹图标），然后选择你的项目中存放React文件的目录，就能批量完成替换了。

补充说明 #

1. 如果你的代码里有双引号写法的className="xxx"，可以把搜索正则改成：

<div\s+className="([a-zA-Z0-9_-]+)"

替换内容保持不变。
2. 如果需要扩展到其他标签（比如p、span），只要把正则里的<div改成对应的标签名就行，或者去掉<div\s+部分来匹配所有元素的className。
3. 建议替换前先通过「Find All」按钮预览匹配结果，确认没有误匹配，或者先备份文件/确保代码在版本控制中，避免意外问题。

内容的提问来源于stack exchange，提问作者Tom