emmet在html中无需额外安装，90%不生效问题源于语言模式识别失败或缩写格式错误；需确保右下角显示html、无多余空格、正确使用>+/ *等符号，并在.vue中仅内生效。
Emmet在HTML中根本不需要额外安装，但90%的“不生效”问题都出在语言模式识别失败或缩写格式错误上。
为什么div.container按Tab没反应？
不是Emmet关了，而是VS Code没把它当HTML处理。右下角状态栏显示的如果不是HTML（比如是Plain Text或JavaScript），缩写直接被忽略。
- 新建文件后先保存为
.html后缀，VS Code才会自动切语言模式 - 点右下角语言标识 → 选
HTML；或快捷键Ctrl+K M（Win/Linux）/Cmd+K M（macOS）再输html -
div .container（中间有空格）会被解析成两个节点：<div></div>和<div class="container"></div>，必须写成div.container - 在
.vue文件里，只在<template></template>区域生效；<script></script>里默认不触发
!、>、+、*这些符号怎么用才不出错？
Emmet不是自然语言，每个符号位置都影响解析结果。写错一个空格，整段缩写就废了。
-
!：输入后按Tab生成完整HTML5骨架，等价于html:5，但更快 -
>：子元素，必须紧贴前后标签，ul>li*3✅，ul > li*3❌（空格中断父子关系） -
+：同级元素，header+main+footer生成三个并列块；div>(h2+p)用括号分组才能保证h2和p都在div内 -
*：重复次数，li.item$*3生成item1~item3；$不能单独用，要跟在class或tag名后面
怎么加属性、文本、占位内容？
属性和文本必须紧贴标签，引号和空格稍有不慎就失效。
- 属性用
[]，a[href="#"][target="_blank"]✅；a [href="#"]❌（空格导致解析为两个节点） - 文本用
{}，p{Hello}✅；p {Hello}❌（空格让{}脱离标签） -
lorem只输出英文，lorem20是20词不是20字；中文场景建议用VS Code内置命令：Ctrl+Shift+P→ 输入lorem→ 选Insert lorem ipsum（支持中文段落） -
img[src="logo.png"]能展开，但img[alt=Logo]里的Logo不加引号也行；含空格的值如alt="My Logo"必须加引号
在.vue或.jsx里怎么让Emmet正常工作？
默认只对.html和<template></template>生效，其他区域要靠配置，但别乱加旧版key。
-
.vue文件确认右下角是Vue（不是Vue HTML），Volar已内置支持，不用额外配 -
.jsx或.tsx文件需确保语言模式为JavaScript React或TypeScript React；否则div#app不会展开 - 想强制开启JSX支持，在
settings.json里加："emerald.emmet.includeLanguages": { "javascriptreact": "html", "typescriptreact": "html" } - 删掉过时配置如
"emeraldwalk.runonsave"或"vetur.completion.tagCasing"，它们可能劫持Tab或干扰解析
真正卡住人的从来不是语法记不住，而是语言模式、输入法状态、空格位置、触发键这四者同时出问题——调通一次，后面全是条件反射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
