结论是Live Server、Auto Rename Tag、Prettier三插件加Emmet和自动保存即可高效开发HTML：Live Server实现保存即刷新，Auto Rename Tag同步更新成对标签，Prettier自动格式化，Emmet快速生成结构，files.autoSave确保实时生效。
直接上结论：不用装一堆插件，Live Server + Auto Rename Tag + Prettier 这三个就够用，再配好自动保存和 Emmet，5 分钟内就能跑起一个可实时刷新、结构清晰、改起来不手抖的 HTML 开发环境。
Live Server 是唯一不可替代的核心
它不是“锦上添花”，而是让 HTML 开发从“保存→切窗口→刷新”变成“敲完就看到效果”的关键。没有它，所有可视化编辑、CSS 调试、JS 交互测试都会卡在第一步。
- 安装后右键 HTML 文件 →
Open with Live Server，浏览器自动打开http://127.0.0.1:5500/xxx.html - 默认端口是
5500，冲突时会在控制台报错Port is already in use，这时点右下角状态栏的端口号可手动换一个 - 它只服务当前工作区根目录下的文件；如果 HTML 在子文件夹里，路径会自动带上子路径，比如
/pages/index.html→ 访问地址就是http://127.0.0.1:5500/pages/index.html - 不支持
file://协议下的跨域请求（比如本地 AJAX），这点和浏览器直接双击打开一样，别误以为是插件问题
Auto Rename Tag 和 Prettier 解决最常踩的两个坑
新手写 HTML 最容易犯两类错误：标签配对错乱、格式混乱导致嵌套看不清。这两个插件就是专治这两类“手抖型失误”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
Auto Rename Tag：改<div>为<section>，对应的</div>立刻变</section>；但注意它不处理自闭合标签（如<img>）或模板语法（如 Vue 的<template>） -
Prettier：启用editor.formatOnSave后，每次保存自动缩进、换行、空格对齐；建议在settings.json中加一行："html.format.wrapLineLength": 120，避免单行过长被强行折行 - 别开
editor.formatOnType—— 它会在你打字中途就格式化，Emmet 展开时容易错乱
Emmet + 自动保存 = 写 HTML 的最低成本启动
不需要记完整标签，也不用手动补全 </body></html>，靠内置功能就能快速搭骨架。
立即学习“前端免费学习笔记（深入）”；
- 新建
.html文件后，第一行输入!+Tab（不是回车），立刻生成带DOCTYPE、lang、UTF-8、viewport 的标准 HTML5 结构 - 输入
div.container>ul.list>li.item*3+Tab，直接展开成三层嵌套列表，比手敲快 5 倍以上 - 务必开启
files.autoSave（设为afterDelay或onFocusChange），否则Live Server刷新不了——这是新手最常忽略的一环 - Emmet 默认只在
html、css、javascript等语言模式下生效；如果文件没识别成 HTML（左下角没显示HTML），右键选择Change Language Mode→HTML
复杂点在于：所有这些配置都依赖 VS Code 正确识别文件类型和工作区范围。比如 Live Server 不会跨文件夹服务，Prettier 的规则可能被项目级 .prettierrc 覆盖，而 Emmet 在某些语言模式（如 Markdown）里压根不触发——别急着查文档，先看左下角语言标识和状态栏有没有异常提示。
