emmet是sublime text中开箱即用的高效html/css缩写补全插件,支持嵌套、属性、编号及css缩写,安装需通过package control精确搜索“emmet”(作者sergeche),避免误装旧版emmett。

Sublime Text 默认的代码补全能力很弱,尤其对 HTML/CSS 快速编写支持不足;直接装 Emmet 就能解决 80% 的重复输入问题,它是目前 Sublime 上最稳定、兼容性最好、无需额外配置就能用的补全插件。
Emmet 是什么,为什么不是其他补全插件
Emmet 不是普通语法提示工具,它把缩写(如 ul>li*3)实时转成完整结构(<ul>
<li>
<li>
<li>
</ul>),支持嵌套、属性、编号、CSS 属性缩写等。相比 AutoFileName 或 SublimeCodeIntel,它不依赖项目索引、不卡顿、不报错,且对 .html/.css/.jsx 文件开箱即用。
- 不依赖 Python 环境或本地 server,安装完重启即生效
- 支持 Sublime Text 3 和 4,Windows/macOS/Linux 全平台一致行为
- 不会和
Tab键默认补全冲突(可保留原 Tab 行为,仅在特定上下文触发 Emmet) - 社区维护活跃,最新版已适配 Sublime Text 4 的
sublime-syntax规则
怎么正确安装 Emmet(避坑关键步骤)
别用 Package Control 搜索 “Emmet” 后随便点 Install——它会装错成已停更的旧版 Emmett(注意多一个 t),导致 CSS 缩写失效、JSX 不识别等问题。
- 打开 Command Palette(
Ctrl+Shift+P/Cmd+Shift+P),输入Package Control: Install Package - 搜索并安装 Exactly 名为
Emmet的包(作者是 sergeche,GitHub 仓库名emmetio/sublime-text-plugin) - 安装后不用重启,但需确保当前文件有正确 syntax:HTML 文件必须是
HTML(不是Plain Text或Vue Component),CSS 文件必须是CSS,否则Tab不触发缩写 - 验证是否生效:新建
.html文件,输入div.container>ul>li*3,按Tab,应立刻展开为嵌套结构
常用缩写和容易被忽略的触发方式
Emmet 默认只响应 Tab,但部分场景下你可能想用 Enter 或鼠标点击——这些需要手动改 Key Bindings;另外,某些缩写(比如 @ 开头的 CSS 值)只在 CSS 文件中有效,HTML 里输会静默失败。
立即学习“前端免费学习笔记(深入)”;
-
div#header+p.text-blue→<div id="header"></div> <p class="text-blue"></p> -
h1{Hello}+p{World}→<h1>Hello</h1> <p>World</p>({}插入文本) -
span[title="tip"]→<span title="tip"></span>(属性必须用方括号) - CSS 中输
m10+Tab→margin: 10px;;w100p→width: 100%; - 如果
Tab没反应,先检查右下角 syntax 是否为HTML或CSS,再检查是否在字符串或注释内(Emmet 在这些区域禁用)
Emmet 的真正门槛不在安装,而在习惯——比如写完 ul>li*5 后本能去按 Tab,而不是手敲 5 次 <li>。很多人装了却不用,是因为没意识到它只在“光标位于缩写末尾且非引号/括号内”时才工作,这个边界条件比想象中严格。










