Prettier是一款流行的代码格式化工具，它可以自动调整代码风格，使其保持一致。然而，在处理HTML代码时，有时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”是一个安全且有效的解决方案。
以上就是Prettier格式化HTML时出现意外的空格调整：原因与解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575689.html
微信扫一扫 
支付宝扫一扫 
