HTML格式化配置：在VS Code中统一Prettier插件规则的方法-html教程-PHP中文网

根本原因是VS Code默认不将Prettier设为HTML语言的默认格式化器，需在工作区settings.json中显式配置"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}，并禁用内置HTML格式器（html.format.enable: false）及冲突插件（如Vetur），同时确保.prettierrc位于项目根目录且含printWidth、tabWidth、htmlWhitespaceSensitivity等必要配置。

html格式化配置：在vs code中统一prettier插件规则的方法

VS Code 里 HTML 文件没被 Prettier 正确格式化，根本原因不是插件没装，而是它默认不接管 HTML —— 即使你已设 editor.defaultFormatter 为 esbenp.prettier-vscode，HTML 仍可能走 VS Code 内置格式器或 Vetur（如果装了）。

为什么 HTML 默认不走 Prettier？

Prettier 插件对不同语言有默认启用策略：JS/TS 开箱即用，但 HTML 需显式绑定。VS Code 自带的 HTML 格式器（vscode.html-language-features）优先级更高，除非你明确把它“让位”给 Prettier。

常见错误现象：Ctrl+S 后 .html 或 .vue 中的没变化，或缩进混乱、属性换行不一致
检查方法：右键文件 → “Format Document With…” → 看列表里是否出现 Prettier；若只有 Configure Default Formatter，说明未绑定
关键点：editor.defaultFormatter 是全局开关，但 HTML 必须单独在语言设置块中声明，否则不生效

如何让 HTML 文件真正用上 Prettier

必须在 .vscode/settings.json（工作区设置）里加语言专属配置，不能只靠顶层设置。

打开命令面板：Ctrl+Shift+P → 输入 Preferences: Configure Language Specific Settings → 回车
选择 html → 在弹出的 JSON 块中写入："editor.defaultFormatter": "esbenp.prettier-vscode"
如果项目含 .vue 文件，再选 vue → 同样写入该行（vue 语言块需单独配，不会继承 html）
若同时用了 Vetur，必须关掉它的 HTML 格式器："vetur.format.defaultFormatter.html": "prettier"，否则会和 Prettier 冲突

`.prettierrc` 对 HTML 的影响比你想的大

HTML 格式效果高度依赖 printWidth、tabWidth 和 htmlWhitespaceSensitivity 这三个配置，缺一不可。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

printWidth 太小（如默认 80）会导致标签属性强制折行，比如 v-if 和 v-for 被拆到两行，破坏可读性
tabWidth 必须和 VS Code 的 editor.tabSize 一致，否则保存后缩进错位（例如 tabWidth: 2 但 VS Code 设为 4，会多缩进一倍）
htmlWhitespaceSensitivity 推荐设为 "css"：保留标签内文本缩进，但忽略元素间空白——这是最贴近真实渲染行为的选项
示例 .prettierrc.json 片段：{"printWidth": 100,"tabWidth": 2,"htmlWhitespaceSensitivity": "css"}

容易被忽略的兼容性陷阱

HTML 格式化失效，常因底层解析器不匹配或路径问题，而非配置本身写错。

Prettier ≥ 3.0 才完整支持 Vue SFC 中的，旧版本会跳过或报错 Unexpected token
必须用本地安装的 Prettier："prettier.prettierPath": "./node_modules/prettier"，全局安装在 Windows 上常因权限或路径分隔符（\ vs /）失败
prettier.requireConfig 必须设为 true，否则 VS Code 会退回到内置 HTML 格式器，且不报任何提示
如果 .prettierrc 放在子目录（如 src/），Prettier 不会向上查找——必须放在项目根目录