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


在项目根目录新建 .prettierrc，内容至少包含：{
  "tabWidth": 2,
  "htmlWhitespaceSensitivity": "css"
}


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


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

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

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

在 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 没开、或者状态栏语言模式错了——这三个地方一查一个准。