按 tab 生成 html5 骨架需同时满足:文件为 .html/.htm 后缀、语言模式为 html、光标在空行或行首;缺一不可,否则 ! 无响应。

! 按 Tab 就能生成标准 HTML5 骨架,前提是文件是 .html 后缀、语言模式为 HTML、光标在空行或行首——其他所有操作都是绕路。
为什么敲了 ! 没反应?三个硬性条件缺一不可
Emmet 不是“按了就出”,它只在特定上下文中响应:
- 文件必须已保存为
.html或.htm(新建未保存的 Untitled-1 不生效) - 右下角状态栏必须显示
HTML,不是Plain Text或JavaScript;点它手动切过去最直接 - 光标必须在空行开头,或整个文件为空;写在
<div> 里面、或者行中已有文字,<code>!只会当普通字符处理!和html:5有啥区别?现在只用!html:5是旧写法,VS Code 已标记为废弃;!是官方推荐的快捷别名,语义更清晰、触发更稳定:- 两者都生成相同结构:
+ <code>++ -
!更短,不易误输空格;html:5若中间多打一个空格(如html :5),直接失效 - 不建议混用:团队统一用
!,避免新人查文档时困惑
生成后发现
lang="en"或<title>Document</title>不合需求?别改源码,用用户代码片段VS Code 的默认骨架是只读的,硬改设置或插件源码既不可靠又难维护。正确做法是覆盖它:
- 打开命令面板(
Ctrl+Shift+P/Cmd+Shift+P),搜Configure User Snippets→ 选html - 替换默认内容,例如把
"lang": "en"改成"lang": "zh-CN",<title>Document</title>换成<title>$1</title>($1是光标初始位置) - 加一行
<meta name="viewport" content="width=device-width, initial-scale=1.0">这类团队规范项,一次配置,处处生效
在
.vue或.jsx里想用!?得配emmet.includeLanguagesVS Code 默认只在纯
.html文件里启用 Emmet 骨架生成。在单文件组件或 JSX 中,!不生效是因为编辑器没把<template></template>当 HTML 区域处理:- 打开
settings.json,加这段配置:
"emmet.includeLanguages": { "vue-html": "html", "javascriptreact": "html" } - 两者都生成相同结构:
- 重启窗口(
Ctrl+Shift+P→Developer: Reload Window) - 注意:
vue-html对应<template></template>块,javascriptreact对应 JSX;别写成vue或javascript,否则无效
最容易被忽略的是语言模式识别和空格敏感性——! 后多一个空格、光标不在行首、文件没保存,三者任一出现,Emmet 就静默失败。它不报错,也不提示,只当没看见。











