vscode如何快速生成HTML模板骨架-VSCode-PHP中文网

vs code 中输入 ! 后按 tab 即可生成 html5 骨架，无需插件；需确保文件为 .html/.htm、语言模式为 html、光标在空行或行首，且 emerald.emmettriggerexpansionontab 为 true。

vscode如何快速生成html模板骨架

输入 `!` 后按 Tab 键就能生成完整 HTML5 骨架

VS Code 默认支持 Emmet，不需要装插件、不用改设置，只要光标在空的 .html 文件里，敲 ! 再按 Tab（不是 Enter），立刻出来带、、的标准结构。

常见错误是：在已有内容的行里输 !，或者按了 Enter —— Emmet 只响应 Tab 触发；还有人误以为要先输 html 再 Tab，其实 ! 是快捷别名，更直接。

必须在 .html 或 .htm 文件中，且语言模式设为 HTML（右下角看得到）
光标得在空行或行首，否则 Emmet 可能只补全局部标签
如果没反应，检查设置里 emerald.emmetTriggerExpansionOnTab 是否为 true（默认就是）

想自定义骨架内容？改 `html.suggest.html5` 配置就行

VS Code 的默认骨架是写死的，但你可以用用户代码片段（User Snippets）覆盖它。不是改源码，而是新建一个 html.json 片段文件，把 ! 绑定到你自己的模板上。

使用场景：团队统一加 <meta name="viewport">、预设 lang 属性、插入常用 CSS/JS 引入逻辑——这些都比每次手动补全靠谱。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），搜 Configure User Snippets → 选 html

替换默认内容为：

{
  "HTML5 with viewport": {
    "prefix": "!",
    "body": [
      "",
      "",
      "",
      "  <meta charset='\"UTF-8\"'>",
      "  <meta name='\"viewport\"' content='\"width=device-width,' initial-scale='1.0\"'>",
      "  <title>$1</title>",
      "",
      "",
      "  $2",
      "",
      ""
    ],
    "description": "Custom HTML5 skeleton"
  }
}