ctrl+d改错字符串里的变量,因其仅做纯文本匹配、不区分代码上下文;安全做法是先用ctrl+f勾选whole word查找确认,再alt+enter全选,误操作时用ctrl+u撤销而非esc。

Ctrl+D 选词重命名时,为什么改错了字符串里的变量?
因为 Ctrl+D 只匹配「相同文本」,不区分上下文——user_id 出现在 "user_id=123" 或注释里也会被选中。这不是 bug,是设计逻辑。
- 适用场景:函数内局部变量重命名(3–5 处,且你肉眼确认过无字符串干扰)
- 安全做法:先按
Ctrl+F打开查找面板 → 输入变量名 → 勾选Whole Word(避免匹配count时误中account)→ 再按Alt+Enter全选匹配项 - 误操作后别狂按
Esc:残留光标可能导致粘贴错位;更稳的是按Ctrl+U软撤销,回退到多光标前状态
跨 HTML/CSS/JS 文件批量改 class 名,怎么避免漏文件?
靠单文件 Ctrl+D 或 Ctrl+F 不够,必须用项目级查找替换,但默认会扫所有子目录,包括 node_modules 和构建产物。
- 打开
Ctrl+Shift+F(Windows/Linux)或Cmd+Shift+F(macOS) - 在
Where栏填./src,./public(显式限定路径,比留空更可控) - 务必勾选
Whole Word和Case Sensitive,防止btn匹配到button里 - 先点
Find预览结果:检查是否混入了dist/或build/下的文件;如有,编辑项目配置文件.sublime-project,加入"folder_exclude_patterns": ["node_modules", "dist"]
HTML 结构快速生成和属性补全,哪些快捷键真能省时间?
不是所有 Emmet 缩写都值得记,网页重构高频用的就几个,其余靠查文档反而拖慢节奏。
-
html:5+Tab:生成完整 HTML5 骨架(含和基础 meta) -
div.container>ul>li*3+Tab:生成带嵌套结构的列表,*3是关键,别手动敲三遍<li> -
.btn.btn-primary+Tab:直接展开为<div class="btn btn-primary"></div>,class 多值不用空格分隔 - 光标停在已有标签内(如
<div>|</div>),按Ctrl+Shift+P输入emmet: wrap with abbreviation→ 输section>header+main+footer,整块包裹并拆分
改完一堆 class 后,怎么快速验证 CSS 是否还生效?
Sublime 不校验样式有效性,但能帮你把修改痕迹“可视化”出来,减少来回切浏览器的次数。
- 用
Ctrl+Shift+L把所有新改的 class 名(比如btn-primary)所在行末尾加光标 → 统一输个临时后缀如-new,再全局搜索-new快速定位改动点 - 侧边栏右键文件 →
Open in Browser(需装插件)可跳转预览,但更推荐:改完保存后,用浏览器 DevTools 的Ctrl+F搜新 class 名,看是否命中真实 DOM 节点 - 容易忽略的点:
class="a b c"改成class="x y z"后,如果原 CSS 是.a.b(多类组合选择器),新 class 必须保持相同顺序才能命中——Sublime 不管这个,得你自己盯











