Emmet缩写不生效需检查文件语言模式和触发设置：确保右下角为HTML等支持语言，Tab未被插件覆盖，且在行首使用；!+Tab生成HTML5骨架，组合缩写如html:5>head+nav+main+footer可快速构建结构。
Emmet缩写不生效？检查VSCode的文件关联和触发设置
Emmet在VSCode里默认只对html、htm、jsx、tsx等特定语言模式生效。如果你在.vue或.svelte文件里敲!+Tab没反应，大概率是语言模式没识别对——右下角状态栏点开当前语言标签（比如显示“Plain Text”），手动选成HTML或对应模板语言。
另一个常见原因是触发方式被覆盖：VSCode默认用Tab展开Emmet，但部分插件（如Auto Rename Tag）或自定义keybindings.json可能劫持了Tab。可临时改用Ctrl+Shift+P → 输入Emmet: Expand Abbreviation验证是否语法本身有问题。
- 确保
"emerald.emmet": true未被禁用（旧版设置名，新版已内置） - 检查
settings.json中是否有"emerald.triggerExpansionOnTab": false这类显式关闭项 -
!+Tab必须在空行或行首使用；若前面有空格或字符，Emmet会忽略
快速生成带语义结构的HTML骨架：不只是!
!确实能生成基础HTML5骨架，但它只是html:5的别名。真正省时间的是组合缩写——比如需要带导航栏、主内容区和页脚的结构，直接敲：
html:5>head+nav+main+footer
回车后自动展开为完整结构，且里已含<meta charset="UTF-8">和<title></title>占位符。更进一步，用>（子元素）、+（同级）、^（上一级）能精准控制嵌套层级。
立即学习“前端免费学习笔记（深入）”；
-
section>h2{标题}+p{段落}*3→ 生成带标题和3段文字的区块 -
ul>li.item$*5→item1到item5，自动编号 -
div.container>(header>h1)+main+footer→ 带类名的语义容器
动态属性与内容填充：用{}和[]减少手动编辑
写div总要补class、id、data-属性？Emmet支持直接内联声明：
div#app.container[data-id="123"]{Vue App}展开后得到：<div id="app" class="container" data-id="123">Vue App</div>。注意：{}包裹文本内容，[]包裹属性键值对，且键值间用=连接（值需加引号）。
- 属性值含空格时必须用单/双引号，否则解析失败（
[data-role=main]可行，[data-role=main nav]不行） -
{}里的内容支持简单变量替换，如span{Item $}+*3→Item 1、Item 2… - 避免在
{}里写复杂HTML，它只渲染纯文本；嵌套结构请用>操作符
在非HTML文件中启用Emmet：比如Markdown或CSS里的快捷片段
Emmet不止于HTML。在.md文件里写ul>li*3，再按Tab，会生成Markdown列表语法（- 开头）；在.css里输m10→margin: 10px;，bgc#f00→background-color: #f00;。这些依赖VSCode对不同语言的Emmet支持配置。
- 确认
settings.json中有"emerald.variables": { "lang": "markdown" }之类（新版无需手动配，但需语言模式正确） - CSS中常用缩写：
bd1s#000→border: 1px solid #000;，fw700→font-weight: 700; - Markdown中
a[href=]{link}展开为[link](href)，但注意括号必须用英文半角
最常被忽略的一点：Emmet的CSS缩写只在style标签内部或.css文件中生效，在script块里敲dn不会变成display: none——它只认当前语言上下文的语义环境。
