按 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 已标记为废弃；! 是官方推荐的快捷别名，语义更清晰、触发更稳定：

  • 两者都生成相同结构：<!DOCTYPE html> + <html lang="en"> + <head> + <body>
  • ! 更短，不易误输空格；html:5 若中间多打一个空格（如 html :5），直接失效
  • 不建议混用：团队统一用 !，避免新人查文档时困惑

  生成后发现 lang="en" 或 <title>Document</title> 不合需求？别改源码，用用户代码片段

  VS Code 的默认骨架是只读的，硬改设置或插件源码既不可靠又难维护。正确做法是覆盖它：

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 打开命令面板（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.includeLanguages

  VS Code 默认只在纯 .html 文件里启用 Emmet 骨架生成。在单文件组件或 JSX 中，! 不生效是因为编辑器没把 <template> 当 HTML 区域处理：

  • 打开 settings.json，加这段配置：

  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascriptreact": "html"
  }

  • 重启窗口（Ctrl+Shift+P → Developer: Reload Window）
  • 注意：vue-html 对应 <template> 块，javascriptreact 对应 JSX；别写成 vue 或 javascript，否则无效

  最容易被忽略的是语言模式识别和空格敏感性——! 后多一个空格、光标不在行首、文件没保存，三者任一出现，Emmet 就静默失败。它不报错，也不提示，只当没看见。