Prettier 是一款流行的代码格式化工具，旨在通过统一的代码风格提高代码可读性和可维护性。然而，在某些情况下，Prettier 的默认配置可能无法满足所有需求，甚至可能产生不符合预期的格式化结果。例如，在使用 Prettier 2.6.2 格式化 HTML 代码时，可能会遇到 head 标签的闭合位置发生改变的情况，导致代码结构出现异常。
问题分析
这种异常行为通常与 HTML 中的空白处理有关。Prettier 默认情况下会根据 HTML 结构和标签之间的空白来调整格式。在某些特定情况下，这种处理方式可能会导致 head 标签的闭合位置发生错误，例如将 移动到
标签之后。<p><strong>解决方案：调整 <a style="color:#f60; text-decoration:underline;" title="html" href="https://www.php.cn/zt/15763.html" target="_blank">html</a>WhitespaceSensitivity 配置</strong></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了解决这个问题，我们可以通过调整 Prettier 的 htmlWhitespaceSensitivity 配置项来控制 HTML 中空白的处理方式。htmlWhitespaceSensitivity 选项控制 Prettier 如何处理 HTML、Vue 和 Angular 中的空格敏感度。</p>
<p>该选项有三个可选值：</p>
<ul>
<li>
<a style="color:#f60; text-decoration:underline;" title="css" href="https://www.php.cn/zt/15716.html" target="_blank">css</a>：(默认) 遵守 CSS 显示属性的默认值。</li>
<li>strict：空格被认为是敏感的。</li>
<li>ignore：空格被认为是不敏感的。</li>
</ul>
<p>将 htmlWhitespaceSensitivity 设置为 "ignore" 可以告诉 Prettier 忽略 HTML 中的空白敏感性，从而避免 head 标签闭合位置发生改变的问题。</p>
<p><strong>配置方法</strong></p>
<p>可以通过以下两种方式配置 htmlWhitespaceSensitivity 选项：</p>
<ol>
<li>
<p><strong>命令行参数：</strong></p>
<p>在运行 Prettier 命令时，添加 --html-whitespace-sensitivity ignore 参数：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1217" title="Magician"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b7a0e58687b789.png" alt="Magician"></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1217" title="Magician">Magician</a>
<p>Figma插件，AI生成图标、图片和UX文案</p>
</div>
<a href="/ai/1217" title="Magician" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class="brush:php;toolbar:false;">prettier --write "./src/**/*.{ts,html,scss}" --html-whitespace-sensitivity ignore</pre></li>
<li>
<p><strong>.prettierrc.<a style="color:#f60; text-decoration:underline;" title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js</a>on 配置文件：</strong></p>
<p>在 .prettierrc.<a style="color:#f60; text-decoration:underline;" title="json" href="https://www.php.cn/zt/15848.html" target="_blank">json</a> 文件中添加 htmlWhitespaceSensitivity 选项：</p><pre class="brush:php;toolbar:false;">{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "auto",
"bracketSpacing": true,
"printWidth": 120,
"htmlWhitespaceSensitivity": "ignore"
}</pre><p>建议使用配置文件的方式，以便在整个项目中保持一致的格式化规则。</p>
</li>
</ol>
<p><strong>示例</strong></p>
<p>假设有以下 HTML 代码：</p><pre class="brush:php;toolbar:false;"><html>
<head>
<title>X
