VSCode插件实现HTML标签自动缩进设置-VSCode-PHP中文网

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

vscode插件实现html标签自动缩进设置

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 的缩进行为和很多人预期不符（比如不缩进和）。

anything-to-html

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

下载

在项目根目录新建 .prettierrc，内容至少包含：
```
{
  "tabWidth": 2,
  "htmlWhitespaceSensitivity": "css"
}
```
tabWidth 控制缩进空格数，htmlWhitespaceSensitivity 决定是否把换行当空白处理（设为 "css" 更贴近浏览器渲染逻辑）
别漏掉 "editor.formatOnSave": true，否则保存时根本不会触发 Prettier

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

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

在 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"
}
```