emmet缩写不展开需先确认语言模式为html且光标位置正确：右下角选html或保存为.html，光标不能在引号、注释、js表达式或属性值内，必须位于标签外或合法模板上下文。
缩写不展开？先盯住语言模式和光标位置
Emmet 的 HTML 缩写（如 ul>li*3）只在文件被识别为 html 模式时生效。右下角状态栏显示 Plain Text 或 JavaScript 就注定按 Tab 没反应。点击它手动选 HTML，或把文件保存为 .html 后缀——VS Code 才会加载对应语法支持。
光标也必须“站对地方”：
- 不能在引号内、注释里、JS 表达式中（比如 Vue 的
{{ }}或 React 的{}里） - 不能卡在属性值中间（如
class="|"）；得在标签外、或紧贴后（<code><div.container>）、或行尾空位</div.container> - 不能已有完整闭合结构（如
<div></div>|后面按Tab，Emmet 不会再插内容）
嵌套语法怎么写才被正确解析
Emmet 的 HTML 缩写本质是“选择器式路径”，不是自由文本。它靠符号定义层级关系，写错一个就展不开或展错：
-
>表示子元素嵌套：section>header+h1+main>p→<section><header></header><h1></h1> <main><p></p></main></section> -
+表示同级兄弟：div+p+span→ 三个并列标签 -
*表示重复次数：li*5生成 5 个<li>，但li*0或负数无效 -
#和.直接映射id和class：div#app.container→<div id="app" class="container"></div> -
{}插入文本内容：a[href="#"]{首页}→@#@#@#@#@#@#@#@#@#@0；含空格或特殊字符时用单引号：a[href='https://example.com']{点我} -
[]添加任意属性：img[src="logo.png"][alt="Logo"]→ 带两个属性的<img>
别写 div class="box" —— 这是普通文本，Emmet 完全无视。
CSS 属性缩写在 HTML 里也能用？不能
很多人误以为在 HTML 文件里输入 m10 或 d:f 也能补全样式，其实不会。Emmet 的 CSS 缩写（如 m10 → margin: 10px;）只在以下位置触发：
-
.css文件中 -
<style></style>标签内部（且语言模式为CSS） - 必须位于声明块内、冒号
:之后、分号;之前
例如，在 <style></style> 中写 margin:，然后空格 + m10 + Tab，才会变成 margin: 10px;。在 HTML 标签内写 style="m10" 是无效的——Emmet 不解析字符串值。
Vue/JSX 等非标准文件里怎么启用嵌套缩写
Vue 单文件组件的 <template></template> 默认支持 Emmet，但 <style></style> 块若用的是 scss 或 less，就得显式告诉 VS Code：“把这种语言当成 HTML/CSS 来处理”：
- 打开
settings.json - 添加或确认
"emmet.includeLanguages"配置：
"emmet.includeLanguages": {
"vue": "html",
"javascriptreact": "html",
"typescriptreact": "html",
"scss": "css",
"less": "css"
}
改完后重载窗口（Ctrl+Shift+P → Developer: Reload Window），否则不生效。注意："javascript" 对应的是纯 JS 文件，而 React/TSX 应用 "javascriptreact" 或 "typescriptreact"，写错就白配。
真正容易被忽略的是：嵌套缩写（如 div>ul>li*3）在 JSX 中默认不工作，除非你启用了 "emmet.includeLanguages": {"javascriptreact": "html"}，且光标在 JSX 元素的顶层作用域（不在 {} 内、不在 props 字符串里）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
