Prettier是一款流行的代码格式化工具，它可以自动调整代码风格，使其保持一致。然而，在处理HTML代码时，有时Prettier会因为空格的缘故，做出一些不符合预期的调整，例如将闭合标签的>提前到与<head标签的结束标签对齐。这通常与Prettier的htmlWhitespaceSensitivity配置项有关。
htmlWhitespaceSensitivity选项控制Prettier如何处理HTML中的空格。默认情况下，Prettier会根据HTML的结构和语义来调整空格，这可能导致一些意外的格式化结果。
要解决这个问题，可以通过调整htmlWhitespaceSensitivity配置项的值来改变Prettier的处理方式。
解决方案：
立即学习“前端免费学习笔记（深入）”；
将htmlWhitespaceSensitivity设置为"ignore"，可以告诉Prettier忽略HTML中的空格敏感性，从而避免不必要的调整。
方法一：命令行方式
在运行Prettier命令时，添加--html-whitespace-sensitivity ignore参数：
prettier --write "./src/**/*.{ts,html,scss}" --html-whitespace-sensitivity ignore这个命令会告诉Prettier，在格式化HTML文件时，忽略空格敏感性。
方法二：配置文件方式
在.prettierrc.json文件中，添加或修改htmlWhitespaceSensitivity选项：
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "auto",
"bracketSpacing": true,
"printWidth": 120,
"htmlWhitespaceSensitivity": "ignore"
}保存配置文件后，再次运行Prettier命令，即可生效。
prettier --write "./src/**/*.{ts,html,scss}"注意事项：
- htmlWhitespaceSensitivity选项有三个可选值："css", "strict", "ignore"。
- "css": (默认) 根据CSS display属性处理空格。
- "strict": 空格被认为是重要的。
- "ignore": 空格被认为是无关紧要的。
- 选择"ignore"可能会导致Prettier保留一些不必要的空格，但可以避免过度格式化的问题。
总结：
通过调整htmlWhitespaceSensitivity配置项，可以有效控制Prettier对HTML中空格的处理方式，避免不必要的格式化问题。开发者可以根据实际需求，选择合适的配置值，以达到最佳的格式化效果。在大多数情况下，将htmlWhitespaceSensitivity设置为"ignore"是一个安全且有效的解决方案。
