唯一可靠操作是:! + Tab。需确保文件为.html/.htm、语言模式为HTML、光标在空行开头;html:5已废弃;可通过用户代码片段自定义lang等字段,并用emmet.includeLanguages扩展.vue等文件支持。

敲 ! 后按 Tab 才有效,不是 Enter 也不是空格
VSCode 里生成 HTML5 骨架的唯一可靠操作是:! + Tab。输入感叹号后按 Enter、Space 或写在行中再按 Tab,都不会触发——Emmet 只响应 Tab,且必须在严格上下文中。
常见错误现象:敲完 ! 没反应,或只补全了个孤立的 ! 字符。这不是插件坏了,而是条件没满足:
- 文件必须已保存为
.html或.htm(新建未命名的Untitled-1不生效) - 右下角状态栏语言模式必须显示
HTML(点它手动切换最直接) - 光标必须在空行开头,或整个文件为空;前面有空格、注释、或嵌套在
<div> 里,<code>!就只是普通字符html:5 已废弃,别再试了
html:5是旧版 Emmet 写法,在 VS Code 1.70+ 中已被官方移除。现在输html:5+Tab,VSCode 会当作普通文本补全,不会生成骨架。为什么还看到有人用?因为文档没更新,或旧项目残留习惯。但实际效果是:
-
html:5中间多一个空格(如html :5)直接失效 -
!更短、不易误输,且语义明确:就是“生成基础骨架” - 团队统一用
!,新人查文档时不会困惑
想改默认 lang 或 title?别动源码,配用户代码片段
VSCode 默认生成的
和<title>Document</title>是只读模板,硬改插件源码或设置项既不可靠又难维护。正确做法是覆盖它:
- 打开命令面板(
Ctrl+Shift+P),搜Configure User Snippets→ 选html - 替换内容为自定义结构,例如把
"lang": "en"改成"lang": "zh-CN",加<meta name="viewport"> - 保留
$1和$2占位符,确保光标能跳转到<title></title>和编辑位置
这样每次敲
!+Tab,出来的就是你团队约定的中文默认骨架。在 .vue 或 .svelte 文件里用不了 !?配 includeLanguages
!默认只对纯.html文件生效。.vue的<template></template>块被识别为vue-html语言,.svelte是svelte,都不在默认支持列表里。解决方法很简单:
- 设置里搜
emmet.includeLanguages - 点击
Add Item,填入:"vue-html": "html"(.vue)或"svelte": "html"(.svelte) - 保存后执行
Developer: Reload Window重载窗口
之后在
<template></template>空行敲!+Tab就能用了。注意别写成"vue"或"javascript",键名必须精确匹配语言标识符。真正容易被忽略的是:Emmet 对光标位置极其敏感,它不报错也不提示,只静默失败。写错位置时,你得自己意识到是“没在空行开头”,而不是怀疑插件坏了。
-


















