Emmet在.vue文件中Tab不展开,需同时配置emmet.includeLanguages和emmet.syntaxProfiles为{"vue-html":"html","vue":"html"},并确保volar.autoInsertEmmetSupport为true;仅配其一或忽略Volar开关均会导致失效。

Emmet在.vue文件里Tab不展开?检查emmet.includeLanguages和emmet.syntaxProfiles
VSCode更新后,Vue单文件组件中输入div.container按Tab没反应,大概率是Emmet不再默认接管.vue文件。新版本移除了对vue语言的隐式支持,必须显式声明映射关系。
-
emmet.includeLanguages要包含"vue-html": "html"和"vue": "html"两项,缺一不可;只写vue不写vue-html,template区域仍不生效 -
emmet.syntaxProfiles也得同步配:{"vue-html": "html", "vue": "html"},否则某些嵌套缩写(如ul>li*3)解析会出错 - 如果已装Volar插件,确认
volar.autoInsertEmmetSupport设为true,否则Volar会屏蔽原生Emmet配置
!+Tab生成不了HTML5骨架?先验证语言模式和emmet.triggerExpansionOnTab
新建test.html,输入!后按Tab——这是最简验证路径。失败说明基础链路断了,不是.vue特有问题。
- 右下角状态栏必须显示
HTML,不是Plain Text或Vue;点击它手动选一次比靠文件后缀更可靠 - 检查
emmet.triggerExpansionOnTab是否为true,尤其注意工作区settings.json里有没有被覆盖成false - 若
!能展开但div不能,可能是emmet.variables或emmet.preferences被误改,临时清空这两项再试
Tab被其他插件劫持?禁用Auto Close Tag或改editor.suggest.insertMode
Ctrl+Space能唤出Emmet提示,但Tab没反应——说明Emmet服务在跑,只是快捷键被截胡了。常见于装了Auto Close Tag、IntelliSense for CSS class names等补全类插件。
- 临时禁用这些插件,看Tab是否恢复;确认是冲突后,可保留插件但把
editor.suggest.insertMode设为replace,避免插入冗余字符干扰展开 - 检查
keybindings.json是否把Tab绑定到了editor.action.triggerSuggest之类命令上,覆盖了Emmet默认行为 - 折叠区域里敲缩写会被吞掉:比如
<body>已折叠,你在里面输div再按Tab,VSCode直接当普通文本处理——展开前先展开父级
缩写写了但只展开一半?注意运算符空格和属性值引号
像div*3+p只出三个<div></div>、漏掉<p></p>,不是Bug,是语法解析优先级问题。
-
+、^这类操作符必须紧贴前一个缩写,中间不能有空格:div*3+p✅,div*3 + p❌ - 属性值含空格或双引号时,必须用单引号包裹或转义:
input[type='text' placeholder='用户名']✅,input[type="text" placeholder="用户名"]❌(双引号未转义会静默失败) -
lorem20这种占位文本缩写,Tab有时会跳焦点,直接用Ctrl+E强制展开更稳
emmet.includeLanguages配置可能完全被忽略,必须靠volar.autoInsertEmmetSupport开关来激活,而不是反复调settings.json。


















