Angular项目中Prettier移除HTML元素文本空格如何解决？

1. 全局配置Prettier保留HTML文本首尾空格 #

在Prettier独立配置文件（如.prettierrc、prettier.config.js）中添加HTML文件的覆盖规则：

{
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "whitespaceSensitivity": "strict"
      }
    }
  ]
}

注意：必须将该配置写在Prettier专属配置文件中，ESLint的prettier/prettier规则会自动读取Prettier的独立配置，而非从ESLint配置中读取。strict模式会强制保留文本首尾空格，默认的css模式会遵循CSS空白处理逻辑（对inline元素自动合并/移除多余空格）。

2. 局部元素级保留空格（不影响全局） #

若无需全局修改，仅针对特定元素保留空格，可使用Angular内置的ngPreserveWhitespaces属性：

<span ngPreserveWhitespaces> text </span>

该属性会同时告知Prettier和Angular编译器，需完整保留当前元素的文本空格，不会被自动清理。

3. 配置生效排查 #

• 升级Prettier至最新稳定版（旧版本对HTML的whitespaceSensitivity支持可能存在缺陷）
• 检查ESLint配置中是否存在覆盖Prettier设置的规则，确保eslint-config-prettier等插件正确引入
• 执行eslint --fix命令，确认配置变更已应用

内容的提问来源于stack exchange，提问作者Ami The BeeFrog