WebStorm中Emmet分HTML/CSS双模式：HTML模式支持!、>、*等缩写，需文件为.html且设置HTML5 Profile；CSS模式仅支持.class、#id等基础选择器，不支持嵌套操作符；class/id混写推荐显式标签名，序号生成需${}包裹内容。
WebStorm 里 Emmet 不是“按 Tab 就能随便写”，它分 HTML 模式和 CSS 模式，且各自生效条件、支持语法、常见失效点完全不同——直接混用会卡住、报错、或生成意料外的代码。
HTML 文件中 !+Tab 不生效？检查这三件事
最常遇到的是新建 .html 文件后输 ! 再按 Tab，没反应。不是插件坏了，大概率是以下任一条件不满足：
- 文件后缀必须是
.html（.htm或未关联类型的文件不会触发 HTML 模式） - Settings → Editor → Emmet → HTML 中，“Expand abbreviations on Tab” 必须勾选
- “Profile” 下拉框必须设为
HTML5（若选了 XHTML 或 HTML4，!会展开成旧标准结构，甚至不响应）
另外，html:5 和 ! 功能完全等价，但后者更短；如果 ! 失效而 html:5 有效，说明当前文件语言识别异常，右键文件 → “Override File Type” → 选 “HTML” 即可修复。
div>p、ul>li*3 在 CSS 文件里不工作？这是设计如此
在 .css 或 .scss 文件里输入 div>p + Tab 报 “no matching abbreviation”，不是 bug，是 WebStorm 的明确限制：CSS 模式下 Emmet 只解析基础选择器，不处理嵌套操作符 >、+、~。
能用的只有：
-
.btn→.btn { } -
#header→#header { } -
ul→ul { } -
ul>li→ 不支持，会报错；想写父子关系，得手敲或用原生补全
顺带提醒：ul>li*3 这类嵌套批量写法，只在 HTML 模式下有效（比如在 .html 或 .vue 的 <template> 块中），硬塞进 CSS 文件里只会失败。
class/id 同时写却只出一个？注意顺序和隐式标签规则
输入 div.box#main + Tab 能正确生成 <div class="box" id="main"></div>，但输 .box#main 却可能变成 <div class="box" id="main"></div> 或 <span class="box" id="main"></span> ——取决于光标所在上下文。
原因在于 WebStorm 的“隐式标签”机制：
- 单独写
.box，默认补全为<div class="box"></div> - 但如果光标在
<ul>内部，.item就会变成<li class="item"></li> -
#main.box这种 ID 在前的写法，部分旧版本 WebStorm 会忽略 class，建议统一用标签名.类名#ID格式
安全起见，显式写出标签名（如 section.header#top）比依赖隐式推断更可控。
生成带序号的列表 ul>li.item$*5 总是少内容？补全后手动加 {}
输入 ul>li.item$*5 + Tab，WebStorm 默认展开为：
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
但如果你想要 <li class="item1">项目1</li> 这种带文本的，必须在缩写里显式加 {}：
ul>li.item${项目$}*5 + Tab 才能生成带内容的完整结构。
这里容易漏掉两点：
-
$必须在{}内才参与内容替换，写成li{项目$}.item$是错的 -
*5要放在整个表达式末尾，不能拆开，否则只重复最后一项
复杂嵌套里，括号 () 和花括号 {} 的作用完全不同，混用会直接破坏结构——前者控制 DOM 层级，后者填充文本内容，这点在快速建模时最容易被忽略。
