live server改html不自动刷新是因为它只监听已保存文件的变更,未手动保存(ctrl+s)则无触发;需确认服务启动(右下角显示端口)、禁用浏览器缓存(devtools勾选disable cache)、且必须通过http://而非file://协议访问。

Live Server 为什么改了HTML不自动刷新?
不是插件没装好,而是它只监听文件保存事件——没保存,它就当没改。常见误操作是写完代码直接切到浏览器看效果,忘了 Ctrl+S。
实操建议:
- 确认已启用
editor.formatOnSave,避免格式化后忘记保存 - 右下角状态栏看到
Live Server正在运行(显示端口号),才代表服务已启动 - 若仍不刷新,检查浏览器是否启用了缓存:按
Ctrl+Shift+R强制硬刷新,或在 DevTools 的 Network 标签页勾选Disable cache - 不要用
file://协议双击打开 HTML——Live Server 必须走http://才能注入热更新脚本
Auto Rename Tag 在嵌套很深时失效怎么办?
它只作用于当前光标所在标签对,不跨层级追踪。比如你在 <div><section><article><h2></h2></article></section></div> 里改 <h2></h2>,它只会同步闭合的 ,不会动外层的 。
容易踩的坑:
- 别指望它修复错位闭合,例如把
<div><p></p></div>自动纠正成合法结构——它只做“配对同步”,不做语法修复 - 如果标签被注释包裹(
<!-- <div> -->),插件会跳过,不触发重命名 - 多个同名标签连续出现时(如连续三个
<span></span>),它只响应光标所在的那一组
Prettier 和 VSCode 内置 HTML 格式化器冲突怎么选?
二者规则不一致时,VSCode 默认优先用 Prettier(如果已设为默认 formatter),但前提是项目根目录有 .prettierrc 或 package.json 里定义了 prettier 字段。
关键判断点:
- 检查设置里
html.format.enable是否为true—— 若为false,VSCode 内置格式化器彻底禁用,全靠 Prettier - Prettier 默认把属性挤在一行(
<div class="a" id="b"></div>),而内置格式化器倾向每行一个属性(可配html.format.wrapAttributes) - 若团队用 ESLint + Prettier 统一 JS/HTML/CSS,就别开
html.format.*配置项,全部交给 Prettier 管理
indent-rainbow 看起来炫酷,但真能帮排版吗?
它不改变缩进行为,只给已有缩进上色。颜色本身不传递语义,只是视觉辅助——缩进错了,它照样画彩虹;缩进对了,它才帮你一眼识别层级断点。
实用场景:
- 快速定位
<table> 里漏写的 <code>:某行突然少了一层颜色,说明闭合标签缺失或错位 - 对比两段结构相似的 HTML,看嵌套深度是否一致(比如两个
<form></form>下的<fieldset></fieldset>层级是否对齐) - 配合
editor.detectIndentation: false使用,避免因混用 Tab/Space 导致颜色跳变失准
真正影响 HTML 排版质量的,从来不是颜色或动画,而是缩进单位是否统一、格式化时机是否可靠、以及插件职责是否清晰——插件只是工具,人得知道它在哪起作用、在哪会沉默。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











