直接搜.card会漏掉或误中,因ctrl+f是纯文本搜索,不识别css语义,会匹配.card-header、recard、js字符串或注释中的card;应使用正则class\s=\s["']1?\bcard\b1?["']并点亮.图标,where填./src//.html等限定路径,动态添加类需人工核查或专用工具。"' ↩

为什么直接搜 .card 会漏掉或误中?
因为 Sublime 默认的 Ctrl+F 是纯文本搜索,不理解 CSS 语义。搜 .card 会命中 .card-header、recard、JS 字符串里的 "card",甚至注释里的 /* .card { */——这些都不是“类被使用”的真实位置。真正要找的是 HTML 或模板中 class 属性值里出现的 card,且得排除它只是定义在 CSS 文件里但没被用的情况。
class\s*=\s*["'].*?\bcard\b.*?["'] 这个正则怎么写才稳?
这个表达式专为匹配 class 属性值设计,不是泛搜字符串:
-
\s*吃掉等号前后任意空格(包括换行) -
["']同时兼容单双引号,比只写"可靠 -
.*?是非贪婪匹配,防止跨标签吞到下一个引号 -
\bcard\b锚定单词边界,避开cardinal或mycard
注意:必须点亮查找面板右下角的 .* 图标,否则整个表达式当字面量处理,一个都搜不到。
全局搜时 Where 框必须填什么?
不填或乱填路径,等于让 Sublime 扫整个项目目录树,包括 node_modules、package-lock.json 甚至图片文件——不仅慢,还可能误改二进制内容。正确做法是显式限定:
- HTML 类使用处:
./src/**/*.html, ./src/**/*.htm, ./src/**/*.vue, ./src/**/*.jsx - 若用 Pug/Jade:
./src/**/*.pug,但上述正则无效,需换插件 - 排除干扰:
-./node_modules -./dist -./public
路径中的 ** 表示递归子目录;逗号分隔多个后缀;减号前缀表示排除。缺一不可。
查到了但类其实被 JS 动态加了,怎么办?
正则只能抓静态字符串,对 el.classList.add('card')、className={isActive ? 'card active' : ''} 或模板字符串里的拼接完全无感。这类情况:
- 无法靠 Sublime 原生功能覆盖,得结合 IDE 的符号引用(如 VS Code 的 “Find All References”)
- 或用专用工具:PurgeCSS(配合构建流程)、Chrome DevTools 的 Coverage 面板看未用样式
- 人工扫关键 JS 入口文件 + 搜索
classList、className、class字符串更实际
别指望一个正则解决所有动态场景——它只负责把静态使用痕迹捞干净,剩下的得靠人盯逻辑链。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











