HTML如何做代码格式化_html Prettier代码格式化配置【超详细】

VS Code 默认禁用 Prettier 处理 HTML，需手动设为默认格式化工具并启用 Format on Save；关键配置为 printWidth: 100 和 htmlWhitespaceSensitivity: "css"；Pretterr 不处理样式语义，仅格式化结构。

VS Code 里 Prettier 不格式化 HTML 文件？

不是插件没装，也不是配置写错了，而是 VS Code 默认禁用了 Prettier 对 html 文件类型的接管。即使你装了官方插件、写了 .prettierrc，右键“Format Document”也大概率不会弹出 Prettier 选项。

必须手动指定默认格式化工具：

• 打开任意一个 .html 文件
• 右键 → Format Document With… → Configure Default Formatter…
• 从列表中选择 Prettier - Code formatter
• 同时勾选设置里的 Format on Save（路径：Settings → Text Editor → Formatting → Format On Save）

注意：如果项目里有 settings.json，确认里面没有写死 "html.format.enable": true —— 这是 VS Code 内置 HTML 格式化器的开关，和 Prettier 冲突。

HTML 格式化后属性乱换行？调 printWidth 和 htmlWhitespaceSensitivity

常见现象：<div class="a b c d e f" data-id="123" title="long text"> 被强行折成 3 行，破坏可读性。这不是 bug，是 Prettier 按 printWidth（默认 80）主动拆分的结果。

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

关键配置项：

• printWidth: 100 —— 建议设为 100，HTML 属性普遍比 JS 多，80 容易误拆；避免设 60，那基本等于放弃单行属性
• htmlWhitespaceSensitivity: "css" —— 必须设这个值，否则 Prettier 可能把 <p><img>text</p> 错误地拆成多行，破坏行内元素布局逻辑
• 不要设 bracketSameLine: true（即把 > 放在最后一行末尾），HTML 标签多属性时它会让结尾变得极难定位

示例正确配置片段（.prettierrc）：

{  "printWidth": 100,  "htmlWhitespaceSensitivity": "css",  "tabWidth": 2,  "useTabs": false}

为什么 <img> 的 align 或 style="float:right" 没被处理？

Prettier 根本不碰这些内容。它只格式化标签结构、属性顺序、引号、缩进和换行，**不解析也不修改任何样式语义**。

也就是说：

• <img align="right"> 会被保留原样，不会转成 CSS
• <img style="margin-left:auto"> 不会自动加 class 或提取到外部 CSS
• 图片是否居中、环绕、响应式，完全取决于你写的 CSS，和 Prettier 无关

如果你发现图片对齐“失效”，问题一定出在 CSS 层（比如忘记给父容器设 text-align: center，或没加 display: block 让 margin: 0 auto 生效），而不是 HTML 格式化没做好。

命令行批量格式化 HTML 文件失败？检查三件事

运行 npx prettier --write "**/*.html" 报错或无反应，通常卡在这三个点：

• prettier 版本低于 v2.0 —— 运行 npx prettier --version 确认，旧版根本不支持 HTML 解析
• 没装完整版 Prettier —— 全局安装时用 npm install -g prettier，别用某些精简构建（如只含 JS 的 CDN 版）
• 没显式指定 parser —— 在项目根目录执行时，加 --parser html 更稳妥：npx prettier --parser html --write src/**/*.html

验证是否生效最简单的方法：新建一个只有两行的 test.html，运行一次格式化命令，看它是否把 <div><p>hi</p></div> 自动展开缩进并换行。

HTML 格式化的真正难点不在配置，而在于接受一个事实：Prettier 只负责让代码“看起来整齐”，不负责让页面“看起来正确”。图片对齐、响应式断点、语义层级，这些都得靠 CSS 和语义化 HTML 本身来保证——格式化工具只是帮你少犯低级缩进错误。