前端开发必须掌握的HTML格式化规范-html教程-PHP中文网

html.format.indentinnerhtml必须设为true，否则和与同层缩进，破坏嵌套结构；设为true后才符合语义层级，且需配合editor.insertspaces:true、editor.tabsize:2及关闭editor.detectindentation以避免空格与tab混用。

前端开发必须掌握的html格式化规范

VSCode 的 HTML 格式化不是“开箱即用就整齐”，它默认行为保守，html.format.indentInnerHtml 默认是 false，html.format.preserveNewLines 虽为 true 但不等于“保留你想要的换行”——很多格式混乱，其实是配置没对上语言服务或缩进语义。

为什么 `html.format.indentInnerHtml` 必须设为 `true`

这个配置决定、等根级容器的子元素是否缩进。默认 false 时，VSCode 会把和与写在同一缩进层，破坏嵌套直觉：

设为 true 后才符合结构预期：

仅影响 HTML 文件（需确保语言模式是 html，右下角状态栏显示“HTML”）
不影响属性缩进，那是 html.format.wrapLineLength 和 html.format.wrapAttributes 控制的
若项目混用 Prettier，该配置会被忽略——Prettier 有自己的缩进逻辑，优先级更高

`editor.tabSize` 和 `editor.insertSpaces` 必须配对设置

缩进错乱最常见原因不是“没缩进”，而是空格和 Tab 混用。VSCode 默认根据文件已有缩进自动探测（editor.detectIndentation），但探测失败时会回退到全局 tabSize，而该值可能和当前文件不一致。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

关闭自动探测："editor.detectIndentation": false
强制统一为空格："editor.insertSpaces": true
明确缩进宽度："editor.tabSize": 2（推荐 2，语义清晰且兼容多数 CSS/JS 规范）
若在 [html] 块中设置，只作用于 HTML 文件；全局设置则影响所有语言

哪些标签不该被自动换行？用 `html.format.unformatted` 排除

VSCode 默认会对所有标签内容换行缩进，但像 <code>、<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea> 这类内联或预格式化内容，一旦被拆行，可能破坏原始语义或 CSS 白空间处理（比如 white-space: pre-wrap）。

添加配置："html.format.unformatted": ["code", "pre", "textarea", "script", "style"]
script 和 style 加入排除列表，是因为其内部是 JS/CSS，不应由 HTML 格式化器处理
注意：该配置只跳过内容缩进，不跳过标签自身换行（如 <pre class="brush:php;toolbar:false;"></pre> 标签仍可能被单独成行）
如果用了 Prettier，它用的是 htmlWhitespaceSensitivity 控制类似行为，二者不可混用

保存即格式化失效？检查 `editor.defaultFormatter` 是否被覆盖

即使开了 "editor.formatOnSave": true，格式化仍可能不触发——VSCode 会按语言找默认 formatter，而某些插件（如 Auto Rename Tag、Ember CLI）会悄悄注册自己的 formatter 并抢占优先级。

显式指定 HTML 官方服务："editor.defaultFormatter": "vscode.html-language-features"
确认该 extension 已启用（VSCode 自带，无需安装）
若同时装了 Prettier，必须在项目级 .vscode/settings.json 中加 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，否则全局设置会被忽略
命令面板执行 Format Document With... 可临时验证当前生效的 formatter 是哪个

真正难的不是配哪几行，而是不同工具链（VSCode 原生、Prettier、ESLint、.editorconfig）之间缩进策略的隐式冲突。比如 .editorconfig 设了 indent_style = space 和 indent_size = 4，但 VSCode 的 editor.tabSize 是 2，又开了 detectIndentation，结果打开旧文件就自动切成了 4 空格——这种细节不盯住，协作时 Git diff 就全是空格变更。