Sublime Text 配置 Emmet 插件后，可通过缩写（如 ul>li*5）按 Tab 快速生成 HTML/CSS 代码；需用 Package Control 安装，启用自动闭合标签、支持 JSX/Vue 语法，并排查文件类型与快捷键冲突。
Sublime Text 配置 Emmet 插件后，能用极简缩写快速生成 HTML 结构和 CSS 属性，大幅提升编码效率。关键是正确安装、触发快捷键、掌握常用语法，而不是装完就完事。
安装 Emmet（推荐 Package Control 方式）
确保已安装 Package Control（如未安装，官网可一键安装）。之后按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）调出命令面板，输入 Install Package 回车，再搜索 Emmet，选择安装即可。安装完成后无需重启，新文件中即可使用。
基础缩写与展开方式
Emmet 的核心是“写缩写 → 快捷键展开”。默认在 HTML 或 CSS 文件中生效：
- 输入 ul>li*5，按 Tab（不是 Enter），立刻生成带 5 个 li 的 ul 列表
- 输入 .container>.row>.col-md-6*2 + Tab，生成嵌套响应式结构
- 在 CSS 中输入 m10 + Tab，自动展开为 margin: 10px;；bd1#f00 → border: 1px solid #f00;
- 想修改默认 Tab 行为（比如与其他插件冲突），可在 Preferences → Key Bindings 中检查是否被覆盖，确保 Emmet 的 tab 键绑定有效
提升体验的实用技巧
光会缩写还不够，这些设置能让 Emmet 更顺手：
立即学习“前端免费学习笔记（深入）”；
-
启用自动闭合标签：在 Preferences → Settings 中添加
"auto_close_tag": true，输入<div>后回车自动补全</div> -
支持 JSX / Vue / Svelte 模板：在对应文件中右下角切换语法为 HTML (Vue) 或 JavaScript (JSX)，Emmet 默认兼容（部分属性需在设置中开启
"syntax_scopes": {...}） - 快速包裹已有内容：选中文本，按 Ctrl+Shift+G（Win/Linux）或 Cmd+Shift+G（Mac），输入 ul>li 即把每行文字包进 li，再包进 ul
- 编辑生成后的代码：用 Ctrl+Alt+→ / ←（跳转到下一个/上一个编辑点），适合批量改 class、href 等重复字段
常见问题速查
遇到不生效？先看这几点：
- 确认当前文件后缀是 .html、.css 或已手动设对语法（右下角显示 HTML/CSS）
- 检查是否误禁用了 Emmet：菜单栏 Emmet → Enable/Disable Emmet 确保是启用状态
- 缩写没反应？试试换用 Ctrl+E（Windows）手动触发展开（可自定义快捷键）
- 想自定义缩写，如把
tb设为<table><tr><td>|</td></tr></table>，可编辑 Preferences → Package Settings → Emmet → Settings – User，添加"snippets": {...}
基本上就这些。Emmet 不是黑科技，但每天省下上百次键盘操作，积少成多就是明显优势。
