VSCode运行html代码自动格式化与预览教程-VSCode-PHP中文网

vscode保存html时自动格式化需启用editor.formatonsave并确保语言模式为html；live server仅负责预览刷新，二者功能独立，须分别配置。

vscode运行html代码自动格式化与预览教程

VSCode 运行 HTML 代码时，**自动格式化和预览是两个独立功能，必须分别配置才能同时生效**；只装 Live Server 插件不会自动格式化，只开 editor.formatOnSave 也不会启动服务器或刷新页面。

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 避免强制换行

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/ 这类纯英文路径

能，但行为有叠加风险，尤其涉及脚本和资源加载：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

webVisualEditor.allowScript 默认为 true，而 Live Server 启动的服务器会执行所有 <script></script>；若你在 Visual Editor 里删了某个按钮，它写的源码改动会立刻被 Live Server 捕获并刷新 —— 这是预期行为
但若页面依赖 fetch 读取本地 JSON，而 JSON 文件不在 Live Server 的根目录下（比如在 ../data/），Visual Editor 预览能显示，Live Server 刷新后却 404 —— 因为两者资源解析路径不同
推荐做法：用 Visual Editor 快速调布局，关掉 allowScript 避免干扰；真正测交互时切回纯代码 + Live Server

如果你装了 Prettier 插件，它会接管格式化逻辑，覆盖 VSCode 内置规则，且默认配置和 HTML 原生格式化器不兼容：

现象：保存后 <div><p>xxx</p></div> 被强行拆成多行，或属性顺序重排
验证方式：命令面板输入 Format Document With... → 看默认格式化器是 Prettier 还是 Default Formatter
解决：要么禁用 Prettier 的 HTML 支持（在 settings.json 加 "prettier.disableLanguages": ["html"]），要么用 .prettierrc 显式配置 htmlWhitespaceSensitivity: "ignore"