VSCode保存HTML时自动格式化需启用editor.formatOnSave并确保语言模式为HTML；Live Server仅负责预览刷新，二者功能独立，须分别配置。
VSCode 运行 HTML 代码时，**自动格式化和预览是两个独立功能，必须分别配置才能同时生效**；只装 Live Server 插件不会自动格式化，只开 editor.formatOnSave 也不会启动服务器或刷新页面。
怎么让保存 HTML 文件时自动格式化
VSCode 默认支持 HTML 格式化，但需显式启用并确认语言模式正确：
- 确保当前文件右下角显示
HTML（不是Plain Text或JavaScript），否则格式化规则不触发 - 在设置中开启
editor.formatOnSave：快捷键Ctrl+,→ 搜索该选项 → 勾选 - 如需统一缩进风格，推荐在
settings.json中加这段（避免不同文件混用 tab/空格）：{ "[html]": { "editor.tabSize": 2, "editor.insertSpaces": true, "editor.detectIndentation": false } } -
html.format.wrapLineLength控制单行最大字符数，默认 120；若常写长属性（如 Tailwind 类名），可调高到 150 避免强制换行
为什么点了 Go Live 却没自动刷新
Live Server 的自动刷新依赖「文件保存」动作，而不是编辑即刷新。常见断点如下：
- 文件未保存：编辑后没按
Ctrl+S，或Files: Auto Save没开（建议设为afterDelay，延迟 1000ms） - 工作区缺失：单独拖一个
.html文件进 VSCode，Go Live按钮可能灰掉或报错 —— 必须把文件放在一个文件夹里（哪怕空文件夹），再用 VSCode 打开该文件夹 - 端口被占：默认用 5500 端口，若提示
Port 5500 is already in use，可在设置里改liveServer.settings.port为 5501 - 路径含中文或空格：某些旧版 Live Server 对非 ASCII 路径解析异常，临时解法是把项目移到
C:\dev\或~/code/这类纯英文路径
Visual Editor 和 Live Server 能一起用吗
能，但行为有叠加风险，尤其涉及脚本和资源加载：
立即学习“前端免费学习笔记（深入）”；
-
webVisualEditor.allowScript默认为true，而 Live Server 启动的服务器会执行所有<script>；若你在 Visual Editor 里删了某个按钮，它写的源码改动会立刻被 Live Server 捕获并刷新 —— 这是预期行为 - 但若页面依赖
fetch读取本地 JSON，而 JSON 文件不在 Live Server 的根目录下（比如在../data/），Visual Editor 预览能显示，Live Server 刷新后却 404 —— 因为两者资源解析路径不同 - 推荐做法：用 Visual Editor 快速调布局，关掉
allowScript避免干扰；真正测交互时切回纯代码 + Live Server
格式化后结构乱了？可能是 Prettier 冲突
如果你装了 Prettier 插件，它会接管格式化逻辑，覆盖 VSCode 内置规则，且默认配置和 HTML 原生格式化器不兼容：
- 现象：保存后
<div><p>xxx</p></div>被强行拆成多行，或属性顺序重排 - 验证方式：命令面板输入
Format Document With...→ 看默认格式化器是Prettier还是Default Formatter - 解决：要么禁用 Prettier 的 HTML 支持（在
settings.json加"prettier.disableLanguages": ["html"]），要么用.prettierrc显式配置htmlWhitespaceSensitivity: "ignore"
真正容易被忽略的是：Live Server 的「自动刷新」只监听文件系统变化，不感知剪贴板粘贴或 Visual Editor 的 DOM 拖拽 —— 这些操作写回源码后，仍需一次保存才触发刷新。别以为拖完元素就完事了。
