HTML怎么做代码格式化_html Prettier代码格式化配置【超详细】
VS Code 里 Prettier 不格式化 HTML 文件？
很多开发者都遇到过这个情况：插件明明装了，.prettierrc 配置文件也写了，但在 HTML 文件上右键选择“格式化文档”，却根本找不到 Prettier 的选项。
问题出在哪里？其实，这并非配置错误，而是 VS Code 的一个默认设定：它禁用了 Prettier 对 html 文件类型的自动接管。换句话说，你需要手动“授权”一下。
具体操作很简单：
- 随便打开一个
.html文件。 - 在编辑区右键，选择 Format Document With…，然后点击 Configure Default Formatter…。
- 在弹出的列表中，找到并选择
Prettier - Code formatter。 - 顺手再把“保存时格式化”的开关打开（路径：
Settings → Text Editor → Formatting → Format On Sa ve）。
这里有个细节需要注意：如果你的项目里存在 settings.json 文件，务必检查一下里面是否包含了 "html.format.enable": true 这一行。这个设置是 VS Code 内置 HTML 格式化器的开关，如果它被启用，就会和 Prettier 产生冲突，导致后者失效。
HTML 格式化后属性乱换行？调 printWidth 和 htmlWhitespaceSensitivity
配置好了，格式化能用了，但新的烦恼又来了：一个原本紧凑的标签，比如 ，被 Prettier 硬生生折成了三四行，阅读起来反而更费劲。
这其实不是 Bug，而是 Prettier 在严格执行它的规则。它会根据 printWidth（默认值是 80 个字符）来判断一行是否过长，一旦超过就会主动换行。对于属性繁多的 HTML 标签来说，80 这个阈值确实太容易触发了。
立即学习“前端免费学习笔记（深入）”；
要解决这个问题，关键在于调整两个核心配置：
printWidth: 100—— 建议将这个值设为 100。相比 Ja vaScript，HTML 标签的属性通常更多，80 的默认值容易导致“误伤”。当然，也别设得太小，比如 60，那基本上就意味着放弃让属性保持在同一行了。htmlWhitespaceSensitivity: "css"—— 这个设置必须加上。如果不设置，Prettier 可能会错误地处理行内元素之间的空格，例如把text
- 另外，不建议设置
bracketSameLine: true（这个选项会把结束标签的>放在最后一行的末尾）。当标签属性很多时，这种格式会让标签的结束位置变得难以辨认。
一份推荐的 .prettierrc 配置片段如下：
{
"printWidth": 100,
"htmlWhitespaceSensitivity": "css",
"tabWidth": 2,
"useTabs": false
}
为什么 ![]()
align 或 style="float:right" 没被处理？
有时候你会发现，即便格式化了，图片的对齐方式似乎也没变化，align="right" 或者内联的浮动样式依然原封不动。
这就对了。因为 Prettier 的职责范围非常明确：它只负责代码的**结构格式化**，比如标签的缩进、属性的换行与排序、引号的统一等等。至于代码的**样式语义**，它一概不解析，也绝不修改。
这意味着：
- 像
- 像
- 图片最终在页面上是居中、环绕还是响应式，完全取决于你编写的 CSS 规则和 HTML 结构本身，与 Prettier 的格式化行为毫无关系。
所以，如果感觉图片对齐“失效”了，排查方向应该直奔 CSS：是不是忘了给父容器设置 text-align: center？或者是不是没给图片加上 display: block 使得 margin: 0 auto 无法生效？问题的根源，通常不在格式化工具上。
命令行批量格式化 HTML 文件失败？检查三件事
想在项目里一次性格式化所有 HTML 文件，结果运行 npx prettier --write "**/*.html" 后要么报错，要么毫无反应？别急，大概率是下面三个环节出了岔子：
- Prettier 版本过旧：运行
npx prettier --version确认一下。如果你的 Prettier 版本低于v2.0，那它可能根本不具备解析 HTML 的能力。 - 安装的包不完整：如果是在全局安装，请使用
npm install -g prettier命令。避免使用某些只包含核心功能的精简版或 CDN 版本。 - 没有显式指定解析器：为了更稳妥，可以在命令中明确指定使用 HTML 解析器：
npx prettier --parser html --write src/**/*.html。
如何快速验证配置是否生效？有个很直接的办法：新建一个只有简单两行代码的 hitest.html 文件，运行一次格式化命令。观察它是否会将像
说到底，HTML 格式化的真正难点，并不在于复杂的配置项，而在于理解并接受它的定位：Prettier 的核心价值是让**代码看起来整齐、一致**，减少因缩进、换行不统一导致的低级错误。但它绝不负责，也无法保证你的**页面看起来正确、美观**。图片对齐、响应式布局、语义化结构——这些关乎最终视觉效果和代码质量的核心任务，依然需要开发者依靠扎实的 CSS 和语义化 HTML 知识来完成。格式化工具，只是你追求代码整洁之路上的一个好帮手。
