VS Code 的 Emmet 缩写无需新学语法，只需确保语言模式正确（如 HTML/CSS）、emmet.triggerExpansionOnTab 为 true、光标位于可触发位置，且自定义缩写按 JSON 格式配置并重启窗口。
VS Code 的 Emmet 缩写不是“需要学的新语法”，而是你 already 在用的 HTML/CSS 习惯写法 + 按下 Tab 就展开——关键在是否启用了默认配置、有没有被其他插件干扰、以及缩写是否符合当前语言模式。
确认 Emmet 在 HTML 文件中已自动启用
VS Code 从 1.40 版本起默认开启 Emmet 支持，但只对正确 language mode 生效。如果你敲 div.container 按 Tab 没反应，先检查右下角状态栏是否显示 HTML（不是 Plain Text 或 Auto）。如果不是，点击它 → 选择 HTML。
- 新建文件后缀必须是
.html，否则即使内容是 HTML，Emmet 也可能不触发 - 如果用了
emeraldwalk.runonsave等插件，某些保存时的格式化动作会清空未保存的 Emmet 展开临时态，导致“按了没反应” - 检查设置里是否有禁用项：
emmet.triggerExpansionOnTab必须为true（默认就是）
CSS 中写 m10 为什么不出 margin: 10px;
CSS Emmet 缩写依赖属性前缀推断，m10 是合法缩写，但需满足两个前提：光标必须在 CSS 作用域内（即 <style> 标签里、或 .css 文件中），且语言模式设为 CSS。
-
m10→margin: 10px;，mt5→margin-top: 5px;，df→display: flex; - 在
<style>块里写缩写时，确保光标不在引号、注释或选择器冒号后面——Emmet 只在声明值位置生效 - 如果缩写后多出
;或自动补全了错误单位，检查emmet.preferences是否被自定义覆盖，比如误加了"css.propertyEnd": ","
嵌套缩写如 ul>li*3 不展开？检查光标位置和语法层级
这类结构化缩写（带 >、+、*）只在 HTML 模式下有效，且光标必须位于标签可插入位置，不能卡在属性值中间或闭合标签之后。
立即学习“前端免费学习笔记（深入）”；
-
ul>li*3→ 按Tab展开为一个<ul>包含三个<li></li> -
section#main>.content+p→ 先建<section id="main">，再进内部写<div class="content"></div><p></p> - 常见失败场景：你在
<div class="|"这里按 Tab，光标在属性值开头，Emmet 会尝试补全 class 名而非展开缩写——移到标签外或标签结束符>后再试
自定义缩写被忽略？优先级和 JSON 格式必须严格
通过 emmet.variables 或 emmet.snippets 添加自定义缩写时，VS Code 对 JSON key 和嵌套层级极其敏感。例如想让 flex 展开为 display: flex; justify-content: center; align-items: center;，必须写在 emmet.syntaxProfiles 对应语言下，而不是顶层。
- 推荐做法：打开设置（
Ctrl+,），搜emmet extensions→ 点击Edit in settings.json→ 在"emmet.syntaxProfiles"下为"html"或"css"单独配 snippets - 键名必须小写、无空格，值必须是字符串（不能是对象或数组）；
"flex": "display:flex;justify-content:center;align-items:center;" - 改完配置后，**必须重启 VS Code 窗口**（仅重载窗口不够），否则新缩写不会注册
最常被忽略的一点：Emmet 不是全局监听器，它严格绑定 language mode 和光标上下文。写错文件类型、卡在属性值里、或用了未激活的自定义 snippet，都会让缩写“失效”——这不是功能坏了，而是它根本没被触发。
