VSCode运行代码html格式错乱怎么办？代码规范与运行检查-VSCode-PHP中文网

prettier不格式化html的根本原因是vs code未将html类型交由prettier处理，需手动设为默认格式器并禁用内置html.format.enable；关键配置printwidth设为100、htmlwhitespacesensitivity设为"css"，且二者必须同时生效。

vscode运行代码html格式错乱怎么办？代码规范与运行检查

HTML 格式错乱不是代码写错了，而是 VS Code 没按你预期的方式解析和渲染它——核心问题通常出在格式化配置、语言识别或浏览器加载方式上，而非 HTML 语法本身。

VS Code 所有格式化和缩进行为都依赖右下角状态栏显示的语言模式。如果它显示的是“Plain Text”“JavaScript”或空着，html.format.enable 和 editor.defaultFormatter 就不会生效。

点击右下角语言标识（如 “Plain Text”），选 “Configure File Association for '.html'…” → 设为 HTML
或快捷键 Ctrl+K M，输入 html 回车
验证：打开一个 .html 文件，按 Ctrl+Shift+P → 输入 “Developer: Inspect Editor Tokens”，看 Language ID 是否为 html

Prettier 默认不处理 HTML；即使装了 esbenp.prettier-vscode，没配插件和敏感度，它会静默跳过文件，导致“格式化点了但没反应”。

项目根目录必须有 prettier.config.js，内容至少含：

module.exports = {
  htmlWhitespaceSensitivity: 'ignore',
  plugins: ['prettier-plugin-html']
};

运行 npm install --save-dev prettier-plugin-html（不是 prettier 本体）
设置里搜 html.format.enable，确保为 true；再搜 editor.defaultFormatter，展开 [html] 项，填入 esbenp.prettier-vscode（不能留空、不能写 prettier）

VS Code 支持细粒度的语言专属设置，[html].editor.formatOnSave 的优先级高于全局 editor.formatOnSave。很多人开了全局自动格式化，却忘了 HTML 单独关掉了。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

打开设置（Ctrl+,），搜 [html].editor.formatOnSave，确保值为 true
如果同时启用了 editor.codeActionsOnSave（比如 “source.fixAll”），它可能抢在格式化前执行修复，造成冲突；建议先清空该字段测试
禁用非必要扩展（尤其是旧版 auto-rename-tag、html-snippets），重启后逐个启用排查

所谓“运行代码 HTML 格式错乱”，90% 实际是：你在 VS Code 里看的源码排版乱（格式化失效），或浏览器里打开后样式/结构异常（file:// 协议限制、路径错误、JS/CSS 加载失败），这两者完全无关。

若只是编辑器里缩进/换行乱：专注上面三项配置，不用管浏览器
若浏览器打开后布局崩溃、控制台报 CORS 或 404：别折腾格式化，改用 Live Server 扩展启动本地 HTTP 服务（http://localhost:5500），绕过 file:// 安全限制
若浏览器里看到的是未格式化的紧凑 HTML（如 <div><p>text</p></div>）：那是浏览器渲染结果，和 VS Code 格式化无关；你看到的“错乱”其实是正常渲染，不是 bug

最易被忽略的一点：Prettier 的 htmlWhitespaceSensitivity 值一旦设错（比如设成 strict 或漏写），它就直接放弃整个 HTML 文件——连报错都不会抛，只会“假装格式化成功”。务必确认这个字段存在且值为 ignore 或 css。