Live Server 和 Auto Rename Tag 是 HTML 开发中最不可跳过的两个插件，前者需通过 http://127.0.0.1:5500 访问以避免跨域错误，后者仅对合法闭合的成对标签生效且依赖正确语言模式。
Live Server 和 Auto Rename Tag 是 HTML 开发中最不可跳过的两个插件，其他插件可以按需启用，但这两个直接决定你写标签时是否频繁出错、是否反复手动刷新。
Live Server 启动后页面空白怎么办
这不是插件坏了，而是你误用了 file:// 协议打开文件。Live Server 必须通过它自己启动的本地服务地址（如 http://127.0.0.1:5500/index.html）访问，否则浏览器会拦截跨域请求，控制台报错 Cross-Origin Request Blocked。
- 关掉所有已用“右键 → Open with Live Server”之外方式打开的 HTML 标签页
- 确保右下角状态栏显示 “Live Server on http://127.0.0.1:5500” —— 没有这行字说明没真正启动
- 端口被占用？在
.vscode/settings.json里加一行："liveServer.settings.port": 3000，改个空闲端口
Auto Rename Tag 修改标签后另一侧没同步
常见于嵌套过深或标签不闭合时失效。它只作用于成对的、语法合法的标签，比如 <div><p>xxx</p></div>；但对 <img>、<br> 这类自闭合标签无反应，也不处理 <div><p>xxx</div> 这种错位闭合。
- 检查当前文件语言模式是否为
HTML（右下角状态栏显示，不是Plain Text或JavaScript） - 确认插件已启用：设置里搜
auto rename tag，确保editor.autoRenameTag是true - 如果修改的是带属性的标签（如
<div class="box">），重命名后属性保留，但不会自动更新 class 名 —— 它只管标签名本身
HTML 缩进混乱，格式化后反而更难读
VSCode 默认的 HTML 格式化器（html.format.*）对嵌套深度大、含内联 JS/CSS 的 HTML 容易“过度换行”，导致视觉断层。Prettier 更可控，但必须显式配置才能生效。
立即学习“前端免费学习笔记（深入）”；
- 安装
Prettier插件后，在项目根目录建.prettierrc文件，内容至少包含：{"tabWidth": 2, "htmlWhitespaceSensitivity": "ignore"} - 禁用 VSCode 内置 HTML 格式化器：在设置里把
html.format.enable设为false，否则它和 Prettier 会打架 - 保存即格式化？确认
editor.formatOnSave为true，且当前文件类型识别正确（.html后缀 + 正确 language mode）
view-in-browser 和 Open in Browser 功能重复？
二者本质不同：view-in-browser 是简单快捷的单次打开，走 file:// 协议；Open in Browser（或 Open in Default Browser）是同源插件，也走 file://，但支持指定浏览器。它们都不提供热更新能力 —— 这正是 Live Server 不可替代的地方。
- 调试静态资源（如图片路径、相对 CSS 引入）时，
file://打开会失败，必须用 Live Server - 如果你习惯用 Chrome 调试，可在设置里配
"openInBrowser.default": "chrome"，让Open in Browser插件默认调起 Chrome -
view-in-browser已多年未更新，部分新版 VSCode 可能兼容异常；优先用官方推荐的Open in Browser或直接依赖 Live Server
真正影响 HTML 标签规范性的，从来不是插件数量，而是你是否理解每个插件生效的前提条件——语言模式识别、协议限制、格式化器冲突、配置覆盖层级。这些细节不解决，装十个插件也白搭。
