emmet 可快速包裹代码:选中内容后按 ctrl+shift+g(win/linux)或 cmd+shift+g(macos),输入缩写如 div.item 或 ul>li* 即可;需确保有选区且语法模式为 html/javascript,否则失效。

用 Emmet 快速包裹代码块
Sublime Text 默认就支持 Emmet,不用装插件也能直接用。选中一段 HTML 或纯文本,按 Ctrl+Shift+G(Windows/Linux)或 Cmd+Shift+G(macOS),输入缩写比如 div.item 或 ul>li*,回车就自动套上对应结构。
常见错误是光标没选中内容就按快捷键——Emmet 包裹功能必须有明确选区,否则会插入空标签或报错 Emmet: No content to wrap。另外,如果当前语法模式不是 HTML 或 JavaScript(比如在 CSS 文件里),部分缩写可能不生效。
- 确保底部状态栏显示
HTML或JavaScript,右键可切换 - 缩写里带
*时(如li*),会为每行选中内容生成一个标签,适合多行列表 - 想包成
<pre class="brush:php;toolbar:false;"><code>...</code></pre>,直接输pre>code,别漏掉>
手动包裹时避免标签错位
手敲标签最容易出问题的是闭合顺序和缩进混乱,尤其嵌套深的时候。比如想把三行 p 包进 section,手动加头尾容易漏掉 或错贴到某一行末尾。
推荐做法:先在选区上方空行敲开标签 <section></section>,再在选区下方空行敲闭标签 ,最后用 Ctrl+Shift+P 调出命令面板,搜 Indentation: Reindent Lines 统一缩进。这样比边选边敲安全得多。
立即学习“前端免费学习笔记(深入)”;
- 别在选中状态下直接输入
<section></section>——Sublime 会把输入内容插在选区开头,而不是包在外面 - 如果已错位,用
Ctrl+Shift+A全选标签对(前提是光标在标签内),再剪切粘贴调整 <pre class="brush:php;toolbar:false;"></code> 和 <code><textarea></code> 这类标签对空白符敏感,包裹后记得删掉多余换行,否则渲染异常</li> </ul> <H3>自定义快捷键实现一键包裹</H3> <p>默认的 <code>Ctrl+Shift+G</code> 对某些人来说不够顺手,或者想固定用某组标签(比如总要包成 <code><figure><figcaption></code>)。可以自己配快捷键,绑定到特定命令。</p> <p>打开 <code>Preferences > Key Bindings</code>,在右侧用户配置里加一条:</p> <pre class="brush:php;toolbar:false;">[ { "keys": ["ctrl+alt+f"], "command": "emmet_wrap_with_abbreviation", "args": {"abbreviation": "figure>figcaption"} } ]</pre> <p>注意 <code>abbreviation值必须是合法 Emmet 缩写,不能带空格或中文。配完保存,选中文本按Ctrl+Alt+F就直接包成<figure><figcaption>...</figcaption></figure>。- 多个快捷键别冲突,比如
ctrl+alt+f和系统截图快捷键撞了就得换 - 如果缩写含属性(如
div[data-id="1"]),等号前后不能有空格,否则解析失败 - 命令名必须是
emmet_wrap_with_abbreviation,写成wrap_with_emmet之类会无效
非 HTML 文件里怎么处理
在
.md、.js或.py文件里想给一段代码加<code>标签,Emmet 默认不响应。得先临时切语法模式:右下角点当前语言名(如Markdown),选HTML,再用Ctrl+Shift+G;或者更稳妥——用正则替换。比如 JS 文件里有一段字符串要转成带
<pre class="brush:php;toolbar:false;"><code></code> 的 HTML 片段,打开替换面板(<code>Ctrl+H</code>),勾上 <code>.*</code> 按钮,查找:<code>^([^\n]+)$</code>,替换为:<code><pre class="brush:php;toolbar:false;"><code>$1</code></pre>,然后只对选区运行。- 正则里
$1是捕获组,确保括号在查找表达式里,别漏了 - Markdown 文件里用
```包代码块更合适,硬套 HTML 标签反而破坏渲染逻辑 - JSX 文件里包裹需注意引号嵌套,
<div dangerouslysetinnerhtml="{{__html:">${text}`}} /> 这种场景建议用模板字符串拼接,别靠包裹 实际用多了就会发现,最麻烦的不是怎么包,而是包完要不要删空行、要不要补 class、要不要转义特殊字符——这些细节不统一,协作时很容易出样式或 XSS 问题。</div>
- 多个快捷键别冲突,比如











