VSCode中HTML5开发支持需配置扩展、设置、模板、预览和格式化：安装Auto Close Tag等扩展；启用html.suggest.html5；创建html5代码片段；安装Live Server实现热重载；调整html.format相关设置适配HTML5。
如果您在 Visual Studio Code 中编写 HTML 文件时缺少语法高亮、智能补全或实时预览功能，则可能是 HTML5 开发环境未正确配置。以下是实现完整 HTML5 开发支持的具体步骤：
一、安装核心扩展
VSCode 默认不内置完整的 HTML5 语言服务，需通过扩展增强对语义标签、属性校验及 ES6+ 模板字符串的支持。
1、点击左侧活动栏中的扩展图标（或按 Ctrl+Shift+X）。
2、在搜索框中输入 Auto Close Tag，点击安装并启用。
立即学习“前端免费学习笔记（深入）”；
3、搜索 Auto Rename Tag，安装后重启编辑器生效。
4、搜索 IntelliSense for CSS class names in HTML，安装以支持 class 名自动提示。
二、配置用户设置支持 HTML5 语法
通过修改 settings.json 可激活 HTML5 特有标签（如
1、按下 Ctrl+, 打开设置界面，点击右上角的“打开设置（JSON）”图标。
2、在大括号内添加以下配置项：
3、输入 "html.suggest.html5": true，确保 HTML5 元素和属性出现在代码补全列表中。
4、添加 "html.validate.scripts": false（可选），避免对内联 ES6 脚本报错。
三、创建 HTML5 快捷模板
利用 VSCode 的用户代码片段功能，可一键生成符合 HTML5 标准的文档骨架，省去手动输入 doctype 和基础结构。
1、按下 Ctrl+Shift+P，输入 Preferences: Configure User Snippets 并回车。
2、选择 html.json（若不存在则新建）。
3、在 "body" 数组中插入以下内容：
4、输入 "html5": { "prefix": "html5", "body": ["","",""," "," ","
四、启用实时预览功能
无需切换浏览器即可查看 HTML 修改效果，依赖轻量级本地服务器或内建预览机制。
1、安装扩展 Live Server（作者 Ritwick Dey）。
2、右键任意 HTML 文件，在上下文菜单中选择 Open with Live Server。
3、VSCode 将自动启动本地 HTTP 服务，并在默认浏览器中打开 http://127.0.0.1:5500/xxx.html。
4、保存文件后，页面将自动刷新，且控制台输出实时请求日志。
五、调整格式化行为适配 HTML5
默认 HTML 格式化可能破坏自闭合标签或属性顺序，需指定兼容 HTML5 的格式化规则。
1、打开设置 JSON 文件（Ctrl+, → 右上角“打开设置（JSON）”）。
2、添加配置项："html.format.wrapLineLength": 120，防止长属性换行断裂。
3、添加："html.format.unformatted": ["pre", "code", "textarea", "script"]，保留这些标签内部原始缩进。
4、添加："html.format.contentUnformatted": ["pre", "code", "textarea", "script"]，避免自动格式化脚本内容。
