Ctrl+Shift+M 智能扩展括号选区:首次选内容,二次含括号,三次跳父级;Alt+Shift+W 依上下文包裹多行;Ctrl+Shift+L 将选区光标置行尾批量编辑;Ctrl+P+#/@需等索引完成再搜索。

Ctrl+Shift+M 选中括号内容时别漏掉嵌套层级
前端写 HTML、CSS 或 JS 时,常要快速修改某一层结构(比如一个 <div> 里的所有子元素,或某个函数体)。<code>Ctrl+Shift+M 不是只选最外层括号,而是按光标位置智能扩展:第一次按选内层内容,再按一次会把括号本身也包进来,第三次还能往上跳到父级容器——前提是语法识别正确(右下角显示 HTML 或 CSS,不是 Plain Text)。
- 在 Vue/JSX 文件里,如果光标落在
{}内,Ctrl+Shift+M会先选大括号里的表达式,再按一次才选整个{} - 误触后选多了?按
Esc退出选区,别直接删,否则可能删掉标签或属性 - 配合
Ctrl+Shift+J(同缩进块)可快速圈出一段布局区块,比鼠标拖更准
Alt+Shift+W 用标签包裹多行 HTML 时注意作用域
写列表、卡片或表单时,经常要把几行文本快速包进 <li>、<span></span> 或自定义组件。Alt+Shift+W 是快捷入口,但它依赖当前光标所在行的上下文语义:
- 光标在纯文本行(无标签),它会生成完整开闭标签,如
<p>xxx</p> - 光标已在某个标签内(比如
<ul></ul>里),它默认用<li>包裹——这个行为不可配置,想换标签得手动改 - 若选中的是多行且含换行符,包裹后会保留换行;但若原行末有空格,
<li>会紧贴空格生成,导致格式错位,建议先用Ctrl+Shift+L+End+Backspace清尾空格
Ctrl+Shift+L 批量处理 HTML 属性或 CSS 声明值
Ctrl+Shift+L 的真实作用是「把已有选区拆成行末光标」,不是「选多行」——这点混淆会导致布局调优时批量加 class、改颜色值失败。
立即学习“前端免费学习笔记(深入)”;
- 正确流程:先用
Ctrl+L连按选中 5 行 HTML 标签 → 再按Ctrl+Shift+L→ 光标全部落在每行末尾 → 此时输入class="u-mt2",所有行同步追加 - 想改 CSS 的
margin值?先把光标停在所有margin:后 →Ctrl+D逐个加选 → 输入新值,不用删旧值(Sublime 默认覆盖) - 常见坑:某行结尾是
>或;,光标落在符号后,直接打空格会破坏结构;先按←回退一格再操作
Ctrl+P 配合 #: 跳转到 HTML ID 或 JS 函数名时索引延迟
布局调试阶段频繁切换结构和逻辑,Ctrl+P 输 #header 查 ID、输 @init 查函数本该秒出结果,但首次使用或大文件里常卡顿。
- 卡顿是 Sublime 在后台构建符号索引,等右下角状态栏文字消失再输,别狂按回车
- 搜不到
@render?确认右下角语法是JavaScript或Vue Component,Plain Text 下@前缀无效 - HTML 中 ID 含连字符(如
main-content),输#main-就能匹配,不用输全——模糊搜索比正则更实用


















