直接搜.card会误改CSS选择器、图片路径和JS字符串，因纯文本匹配无语义；应限定文件类型并用正则class\s*=\s*["'].*?\bcard\b.*?["']匹配HTML/JSX中的类名使用处。
为什么直接搜 `.card` 会改错地方
Ctrl+F 输入 .card 默认是纯文本匹配，它不管上下文：既会命中 class="card"，也会匹配 /* .card { */、url(/assets/card.png)，甚至 JS 字符串里的 "card"。这种“无脑扫”在重构中极危险——你本想改 HTML 中的类名，结果把 CSS 文件里选择器和图片路径全干掉了。
真正安全的做法是限定语义范围：
- 在 HTML/JSX 文件中找类名使用处，用正则：
class\s*=\s*["'].*?\bcard\b.*?["'] - 在 CSS/SCSS 文件中找类定义，用
Ctrl+R（Goto Symbol）直接跳转选择器，不依赖字符串匹配 - 务必先用
Ctrl+Shift+F打开 Find in Files 面板，Where 框填*.html,*.jsx,*.tsx，避免误触样式文件
怎么用正则把 className="card" 换成 className={styles.card}
这个替换看着简单，但实际有三类坑必须分清：
- 单类名（安全）：
className="([a-zA-Z0-9_-]+)"→className={styles.$1}，适用于card、btn-primary这类 - 多类名（不能硬套）：
className="card header active"不能用className="([^"]+)"→className={styles.$1}，否则 $1 是整个字符串，styles["card header active"]必然报错 - 带空格或引号嵌套（必须人工）：
className={"card " + (isActive ? "active" : "")}这类模板字符串，正则根本无法解析逻辑，得手动拆成{styles.card + (isActive ? " " + styles.active : "")}
操作前先点 Find All 预览所有匹配项，重点检查是否混入了动态拼接场景。
立即学习“前端免费学习笔记（深入）”；
驼峰类名批量转 kebab-case 的正则怎么写才不翻车
比如要把 userProfileCard 改成 user-profile-card，不能只靠简单插横线——否则 XMLHttpRequest 会变成 x-m-l-http-request。
正确正则配置（必须勾选 .* 和 Aa）：
- 查找：
([a-z])([A-Z])|([A-Z])([A-Z][a-z]) - 替换：
$1$3-$2$4 - 先
Find All看效果，特别注意缩写词（如URLParser）是否被过度切分 - 若发现
getURL→get-u-r-l，说明需要前置处理：先用([A-Z]+)([A-Z][a-z])→$1_$2把缩写和后续小写分开，再走主流程
别信插件的 camel_to_kebab 命令——Sublime 的 Case Conversion 插件压根没实现这个功能，搜也找不到。
替换后为什么有些文件没生效？三个最常漏掉的检查点
点了 Replace All 不等于万事大吉。以下三点不确认，大概率白忙活：
-
Where框填的是.还是<project></project>？如果只写了src却没加**/*.jsx，那components/Button.jsx就会被跳过 - 目标文件是否为只读？右下角显示
RO的文件不会被修改，需先解除系统只读属性 - 改完没点
Save All（Ctrl+K→Ctrl+B），所有变更都还在内存里，关窗口就丢
尤其要注意：CSS Modules 要求类名哈希化生效，替换后必须验证运行时 DOM 中的 class 属性是否真变成了 card_abc123 类型——光看代码改对了没用，JSX 渲染结果才是最终检验标准。
