必须将文件语法设为HTML，右下角状态栏显示HTML才生效；若显示Plain text则Tab仅输入空格，需手动切换语法模式或保存为.html后缀。
怎么让HTML缩写一按Tab就展开
Emmet插件默认启用，但新手常卡在“写了div>p*3按Tab没反应”——根本原因是当前文件没被识别为HTML类型。Atom靠文件后缀或手动设置的语法模式决定是否激活Emmet。
确认方法：看编辑器右下角状态栏，显示HTML才对；如果显示Plain text或Text，就得手动切过去：
- 快捷键
Ctrl+Shift+L（Windows/Linux）或Cmd+Shift+L（macOS），输入html回车 - 或者点击右下角文字，从弹出菜单选
HTML - 保存文件为
.html后缀，下次打开自动匹配
注意：emmet:expand-abbreviation命令只在HTML/CSS/JS等支持的语言中生效，纯文本模式下Tab就是打空格。
为什么输入class="btn"后光标总停错位置
Emmet默认把光标放在属性值引号中间，比如div.class-name展开后变成<div class="|"></div>（|是光标），这不是bug，是设计——方便你直接输类名。但新手容易误以为卡住了。
立即学习“前端免费学习笔记（深入）”；
真正影响效率的是光标跳转逻辑：
- 按
Tab可在各编辑点间循环（如class值→id值→标签内容），这是emmet:next-edit-point动作 - 按
Shift+Tab反向跳转，对应emmet:prev-edit-point - 如果跳转失效，先检查是否多光标干扰：按
Esc退出多光标模式再试
这个跳转链是硬编码在Emmet的lib/emmet.coffee里，改不了，但习惯后比鼠标点快得多。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
装了Emmet却不能补全CSS属性
CSS补全和HTML缩写不是一回事。Emmet只处理dw→display: block这类简写，而autocomplete-css插件才负责属性名、值、单位的智能提示。
必须同时满足三个条件才能触发CSS补全：
- 文件语法设为
CSS（右下角确认） - 光标在花括号内，且前面有冒号（如
color:）或属性名前缀（如back） - 已安装并启用
autocomplete-css（不是Emmet自带的）
常见失败场景：在<style></style>标签里写CSS，但文件仍是HTML模式——此时只有Emmet缩写有效，autocomplete-css不工作。解决办法：把<style></style>块剪切，粘贴到单独的.css文件里写。
怎么快速给现有HTML加class而不手动敲
不用删掉重写，Emmet提供emmet:wrap-with-abbr命令，专治这种“补加结构”的需求。
操作步骤很直接：
- 选中要包裹的HTML片段（比如一段
<p>Hello</p>） - 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）调出命令面板 - 输入
emmet:wrap，选中该命令 - 输入缩写，例如
div.container，回车
结果就是<div class="container"><p>Hello</p></div>。注意：这个命令依赖当前语法模式，选中文本后如果右下角不是HTML，它会静默失败——没有报错，也没反应，这是最容易忽略的一环。
