VS Code 的 Emmet 开箱即用但需确保语言模式正确：HTML 文件右下角须显示“HTML”，Vue/JSX 中需在对应标签内且有语言支持插件；CSS 中用首字母缩写如 d:f→display:flex；常见失效原因依次为语言模式错误、空格/括号位置错误、Tab 被劫持。
VS Code 的 Emmet 不需要额外安装，开箱即用——但默认配置和常见误操作会让它“不生效”或“只部分生效”。
为什么 div.container 按 Tab 没生成 HTML？
最常见原因是当前文件未被识别为 HTML 上下文。VS Code 会根据文件后缀和语言模式决定是否启用 Emmet 缩写解析。
- 检查右下角状态栏：确认显示的是
HTML，不是Plain Text或JavaScript；如果不是，点击它，选择Change Language Mode→HTML - 如果在
.vue或.jsx文件中写模板，需确保光标落在<template>内（Vue）或 JSX 标签内，并已安装对应插件（如 Volar、ESLint 插件不影响 Emmet，但语言支持必须到位） -
Tab键被其他扩展劫持（如 TabNine、Auto Rename Tag）时，Emmet 可能失效；可临时禁用插件验证，或改用Ctrl+Space触发 Emmet 补全
怎样让 ul>li*5 生成带文本的列表？
Emmet 支持动态内容插入，但语法有固定模式，写错就只输出空标签。
- 基础写法：
ul>li*5→ 生成 5 个空<li></li> - 加文本：
ul>li{Item $}*5→$是序号占位符，生成<li>Item 1</li>到<li>Item 5</li> - 嵌套内容：
div.card>h2{Title}+p{Desc}→ 生成带标题和段落的结构块 - 注意：大括号
{}必须紧贴标签名或符号，中间不能有空格，否则会被忽略
如何在 CSS 中用 Emmet 写 flex 相关属性？
Emmet 对 CSS 的支持是另一套规则，和 HTML 缩写分离，且默认启用。
立即学习“前端免费学习笔记（深入）”；
- 输入
d:f+Tab→ 展开为display: flex; -
jc:c→justify-content: center;；ai:c→align-items: center; - 完整前缀映射见官方速查表，但关键点是：CSS 缩写基于属性名首字母，
m开头是 margin，p是 padding，w是 width，h是 height - 若缩写不触发，检查当前语言模式是否为
CSS、SCSS或Less；在.vue的<style>块中同样有效
自定义 Emmet 缩写或禁用冲突快捷键？
VS Code 允许覆盖默认行为，但修改要谨慎——多数问题靠调整设置比重写缩写更可靠。
- 禁用
Tab触发（避免和其他补全冲突）："emmet.triggerExpansionOnTab": false，然后依赖Ctrl+Space - 添加自定义缩写（如想用
card生成特定结构）：在settings.json中加"emmet.variables"或"emmet.snippets"，但优先考虑用ul.card>li*3这类组合缩写，更轻量 - HTML5 文档结构快捷键是
!+Tab，不是html:5（后者已弃用）；输!就够了
真正卡住的时候，90% 是语言模式没对，剩下 10% 是空格或括号位置错了——别急着搜“怎么配置 Emmet”，先看右下角那行小字。
