VSCode 的 F2 重命名不支持 HTML class、CSS 类选择器和 JSX className 之间的跨文件同步，需确保语言服务生效、文件关联正确，并配合全局搜索与多光标操作谨慎修改，同时手动检查字符串拼接、CSS-in-JS 和注释等漏网情况。
类名改完，CSS 选择器没同步？这是语言服务没生效
VSCode 的 F2 重命名只作用于语言服务能解析的上下文。HTML 中写死的 class="btn-primary"、CSS 文件里的 .btn-primary、JSX 中的 className="btn-primary" —— 这三者默认不互通。TypeScript/JavaScript 项目里，如果 class 是通过变量拼接或动态生成（比如 className={type + '-primary'}），F2 也识别不了。
常见错误现象：F2 按下后无反应，或提示 “No symbol at cursor”；右下角语言模式显示为 Plain Text 或 HTML 而非 TypeScript React / CSS。
- 确认当前文件已正确关联语言：点击右下角语言标识，手动选为
CSS、SCSS、TypeScript或JavaScript React - 确保项目根目录有
tsconfig.json或jsconfig.json（JS 项目），否则 TS/JS 语言服务可能未激活 - CSS 文件中，只有标准类选择器（如
.btn-primary）支持F2；伪类、属性选择器（:hover、[data-id]）不支持
Ctrl+Shift+H 全局替换前必须做的三件事
直接开 Ctrl+Shift+H 替换 HTML/CSS/JS 中的类名，大概率翻车。关键不是“能不能换”，而是“换得准不准”。
- 先用
Ctrl+Shift+F搜索全部匹配项，注意看右上角是否显示 “1000+ results”——VSCode 默认只加载前 1000 条，超量结果被截断，必须点 “Load more” 才能看清全貌 - 勾选
Match Case和Whole Word：避免把button-primary误替成btn-primary，或把btn-primary-text里的btn-primary单独干掉 - 在
files to include栏限定范围，例如填**/*.tsx,**/*.css,**/*.html，排除node_modules和构建产物（dist/**、build/**）
多光标批量改样式名：Ctrl+D 和 Ctrl+Shift+L 的分工
当语言服务不可用，或你只想改当前文件里几处特定类名（比如只改某个组件内的 header-title），多光标是最快路径。
-
Ctrl+D：逐个追加相同文本匹配项。适合边看边选——光标停在第一个header-title上，按一次选中它，再按选中第二个，依此类推，中途按Ctrl+U可撤销上一次添加 -
Ctrl+Shift+L：一次性选中当前文件中所有匹配项。适合确定要全改，且上下文干净（比如一个纯 CSS 文件里所有.card都该改成.panel） - 注意：两者都依赖“所见即所得”的文本匹配，对大小写敏感，且不区分 HTML class 属性和 CSS 选择器语法——
class="card"和.card { }会被一并选中
改完别急着提交：检查这三类漏网之鱼
无论用 F2 还是 Ctrl+Shift+H，总有边缘情况逃过自动处理。最容易被忽略的是：
- 字符串拼接：JS/TS 中
className={`card ${isExpanded ? 'card-expanded' : ''}`}——F2不会识别，全局搜索也容易漏掉带模板字符串的写法 - CSS-in-JS：Emotion、Styled Components 里写的
css`&.card {...}`或styled.div`.card {...}`，不属于标准 CSS 语法，语言服务通常不覆盖 - HTML 注释或旧代码残留：
<!-- legacy: .btn-primary -->会被Ctrl+Shift+H扫到但不该动，需人工跳过
真正耗时的从来不是改名动作本身，而是验证改动是否彻底且安全。每次重构后，建议在终端跑一遍 npm run build 或打开浏览器 DevTools 查看样式是否丢失——很多问题只在运行时暴露。
