VS Code 中应通过修改用户级 html.json 配置自定义 HTML 片段，而非依赖插件；推荐定义含 viewport 和 charset 的精简 html5 片段，prefix 为 "html5"，支持语言参数 ${1:zh-CN} 和光标定位 ${0}。
在 VS Code 中配置自定义 HTML 片段（不是“模板文件”）
VS Code 本身不支持创建可双击打开的独立 HTML 模板文件（比如点一下就生成带 html5-boilerplate 的新文件），但它能通过 snippets 快速插入预设的 HTML 结构——这才是你实际需要的“模板”能力。
直接改 html.json 是最稳定的做法，比装插件更可控、无兼容风险，也避免被第三方 snippet 覆盖或过时。
- 片段生效范围：仅在
.html文件中按Tab触发，不自动创建新文件 - 不推荐用
File → New File → Choose Template类功能——VS Code 原生没这选项，所谓“模板插件”多数只是帮你新建空文件再塞内容，不可靠 - 路径必须是用户级 snippets 目录：
~/.vscode/snippets/html.json（macOS/Linux）或%USERPROFILE%\AppData\Roaming\Code\User\snippets\html.json（Windows）
怎么写一个带 viewport 和 charset 的基础 HTML 片段
别抄网上五年前的“完整 html 模板”，现代项目通常不需要 <html lang="en"> 这种固定写法——语言值应由项目决定，硬编码反而容易出错。
真正值得固化的是那些重复率高、易漏、有规范要求的部分，比如 <meta charset="UTF-8"> 和响应式 <meta name="viewport">。
立即学习“前端免费学习笔记（深入）”；
{
"html5-essential": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"${1:zh-CN}\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>${2:Document}</title>",
"</head>",
"<body>",
" ${0}",
"</body>",
"</html>"
],
"description": "Minimal HTML5 structure with viewport and charset"
}
}
-
${1:zh-CN}表示第一个 tab 停留位置，默认值zh-CN，可直接回车跳过或编辑 -
${0}是最终光标落点，常放在<body>内，方便立刻写内容 - 不要加多余空行或注释——VS Code 的 snippet 引擎对格式敏感，空行可能中断渲染
为什么不用 html.suggest.html5 或插件替代？
VS Code 默认开启的 html.suggest.html5 设置，只影响属性补全（比如输 div cl 提示 class），它不提供任何结构级模板。装 “Auto Rename Tag” 或 “HTML Boilerplate” 这类插件，往往带来副作用：
- 部分插件会劫持
Enter或Tab行为，和你已配的 emmet 冲突 - “一键生成模板” 功能实际是新建文件后执行
InsertSnippet，但路径、编码、BOM 等细节不可控 - 插件更新滞后，比如还在塞
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>这种过时引用
常见错误：片段不生效？检查这三处
90% 的“我配了但没反应”问题都出在这几个地方，不是 VS Code 坏了。
- 文件名写成
html.snippets.json或my-html.json—— 必须是html.json，且放在正确 snippets 目录下 - JSON 格式错误：多了一个逗号、少了一个引号、用了中文标点，VS Code 不报错但直接忽略整个文件
- 当前文件没识别为 HTML：右下角状态栏显示的是
Plain Text而非HTML，点击切换或保存为.html后缀
复杂点在于：snippet 的 prefix 是大小写敏感的，Html5 和 html5 是两个东西；而容易被忽略的是，如果你在 TypeScript React 项目里编辑 .tsx 文件，即使写了 html.json，它也不会触发——得单独配 javascriptreact.json 或 typescriptreact.json。
