Emmet缩写失效主因是文件语言模式错误或快捷键冲突，需确认状态栏为HTML、禁用冲突插件或改用Ctrl+Space；属性须紧贴标签无空格；.vue中需配置emmet.includeLanguages；lorem不支持中文，应使用VSCode内置命令或中文假文插件。
Emmet缩写不生效，按Tab没反应怎么办
VSCode默认已启用Emmet，但常见失效原因是文件语言模式没识别对——比如新建的.html文件被误判为Plain Text或JavaScript。确认右下角状态栏显示的是HTML（不是plaintext），如果不是，点击它手动切换为HTML。
另一个高频原因是设置了冲突的快捷键：某些插件（如Auto Rename Tag）会劫持Tab。临时禁用其他插件测试；或者改用Ctrl+Space（Windows/Linux）或Cmd+Space（macOS）触发Emmet补全。
- 检查设置里
"emmet.triggerExpansionOnTab"是否为true（默认是） - 确保当前光标在
<body>内、且不在引号/注释/JS代码块中 - 如果用
.pug或.vue文件，需额外配置"emmet.includeLanguages"
div.container>ul>li*3生成后class没加到div上？
Emmet对属性解析很严格：div.container里的点必须紧贴标签名，中间不能有空格。写成div .container会被当成两个独立节点，.container会变成子元素的class。
更隐蔽的问题是嵌套层级误解：比如div.container>ul>li*3正确生成的是带container类的div，里面一个ul，再里面三个li；但若写成div.container>ul>li*3却想让ul也有class，就得显式写div.container>ul.list>li*3。
立即学习“前端免费学习笔记（深入）”；
- 属性必须紧跟标签，无空格：
input[type="text"]✅，input [type="text"]❌ - 多个class用点连续写：
div.header.main→<div class="header main"> - id用
#，且只认第一个：div#app.container→<div id="app" class="container">
在.vue单文件组件里写Emmet，为什么template里不生效
VSCode默认不把<template>区块当HTML处理，Emmet缩写自然不触发。必须告诉编辑器：这个区域要用HTML语法补全。
最直接的办法是在VSCode设置中添加语言映射：
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
}
注意：vue-html对应<template>块，vue对应整个.vue文件（含<script>和<style>）。设完后重启窗口或重载窗口（Ctrl+Shift+P → Developer: Reload Window）。
- 如果用了Volar插件，优先用它内置的Emmet支持，无需额外配置
- 老版本Vetur需要手动开启
"vetur.completion.tagCasing": "kebab"避免大小写问题 - 在
<script setup>里写ref()等缩写，得配"emmet.includeLanguages": {"javascript": "javascript"}
写lorem20生成乱码文字，中文环境怎么让它输出中文
Emmet的lorem默认只输出拉丁文，没有原生中文支持。强行用lorem20只会得到一堆Lorem ipsum...英文占位符，跟中文排版完全脱节。
实际替代方案有两个：一是用VSCode内置的「插入 lorem ipsum」命令（Ctrl+Shift+P → 输入lorem），它支持中文段落；二是装Chinese Lorem Ipsum这类轻量插件，输入cl20就能出20字中文假文。
- 别指望
lorem20自动变中文——Emmet规范里就没这功能 - 如果项目用Tailwind，可配合
@apply或class="text-gray-500"快速模拟内容样式，比填假文更高效 - 真要批量造中文内容，用Python脚本或在线工具生成后粘贴，比折腾Emmet更省时间
Emmet本质是语法糖，不是模板引擎。写复杂结构时，过度依赖缩写反而容易漏掉语义标签（比如该用nav却写了div），或者忽略ARIA属性。手敲几行清晰HTML，有时比调半天缩写更可靠。
