VSCode HTML自动缩进需配置formatOnSave、defaultFormatter及语言模式：优先级为工作区>用户设置>内置服务，通过Format Document With...确认默认格式化器，设editor.defaultFormatter为vscode.html-language-features或esbenp.prettier-vscode，并配.prettierrc与html.format.indentInnerHtml等参数。

VSCode 默认就能对 HTML 标签做基础缩进，但“自动缩进”真正生效，靠的不是插件本身，而是插件与编辑器格式化机制的配合。单独装个插件不配置，formatOnSave 不开、defaultFormatter 不指定，照样缩进失效。

怎么确认当前用的是哪个 HTML 格式化器

VSCode 会按优先级选格式化工具：工作区配置 > 用户设置 > 内置语言服务。如果装了 Prettier、Beautify 等多个插件，很容易互相覆盖。

• 打开命令面板（Ctrl+Shift+P），输入 Format Document With...，看弹出列表里哪个被标为“默认”
• 点开右下角状态栏的语言模式（比如显示“HTML”），点击它 → “Configure Language Specific Settings...” → 查看 "[html]" 下是否设置了 "editor.defaultFormatter"
• 如果没设，VSCode 可能随机选一个；设成 "vscode.html-language-features" 就用内置引擎，设成 "esbenp.prettier-vscode" 就走 Prettier

Prettier 插件必须配 .prettierrc 才管用

只装 Prettier 插件，不建配置文件，它会用默认规则——而默认对 HTML 的缩进行为和很多人预期不符（比如不缩进 和 ）。

• 在项目根目录新建 .prettierrc，内容至少包含：

  {
    "tabWidth": 2,
    "htmlWhitespaceSensitivity": "css"
  }

• tabWidth 控制缩进空格数，htmlWhitespaceSensitivity 决定是否把换行当空白处理（设为 "css" 更贴近浏览器渲染逻辑）
• 别漏掉 "editor.formatOnSave": true，否则保存时根本不会触发 Prettier

内置 HTML 格式化器的隐藏开关：html.format.indentInnerHtml

VSCode 自带的 HTML 格式化器有个关键参数，默认是 false，导致 里面的 和 不缩进，看起来像平铺。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 在 settings.json 里加这段：

  "[html]": {
    "html.format.indentInnerHtml": true,
    "html.format.preserveNewLines": true
  }

• indentInnerHtml: true 让 和 相对于 缩进一层，结构更直观
• preserveNewLines: true 防止格式化时把手动换行全抹掉，保留你原本想留的空行

缩进错乱？先盯住状态栏右下角那三个词

很多问题其实和插件无关，纯粹是编辑器没认对文件类型或缩进模式。

• 看状态栏：如果显示的是 Plain Text 或 PHP，哪怕文件名是 index.html，VSCode 也不会应用 HTML 格式化规则 —— 点击它，选 HTML
• 看缩进指示器：右下角显示 Spaces: 4 还是 Tab？混用空格和 Tab 是缩进跳位的头号原因，统一设成 "editor.insertSpaces": true
• 检查文件后缀：有些模板文件用 .htm 或 .xhtml，需在 files.associations 里显式关联：

  "files.associations": {
    "*.htm": "html"
  }

真正卡住人的，往往不是插件装没装，而是 defaultFormatter 没指定、formatOnSave 没开、或者状态栏语言模式错了——这三个地方一查一个准。