Vue/Nuxt项目中Prettier格式化原生HTML标签添加多余空白如何解决

问题原因 #

这个格式化差异是Prettier内置逻辑导致的，和ESLint、Nuxt本身没有关系：

• 对于p这类标准原生HTML标签，Prettier内置了标签类型映射，会按照HTML默认规范判定块级元素为「空白不敏感」，格式化时遇到过长行就会主动把插值、文本拆成单独行加缩进，它默认这类调整不会影响最终渲染结果。
• 对于Title这类自定义Vue组件，Prettier没有内置的标签属性判定，默认按「空白敏感」处理，会保留开发者原本写的换行结构，不会主动调整标签内的空白位置。

修复方案 #

方案1：全局修改空白敏感度规则（推荐） #

直接在项目根目录的.prettierrc中添加htmlWhitespaceSensitivity配置，值设为strict即可。开启后Prettier会对所有标签（包括原生HTML、自定义组件）统一按空白敏感规则处理，不会主动给任何标签内的内容添加额外换行、缩进：

{
  "semi": true,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "strict",
  "overrides": [
    {
      "files": ["**/*.yml"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

配置保存后重启IDE的Prettier服务、或者重新执行格式化命令，原生标签和自定义组件的格式化行为就会保持一致，不会再出现额外空白问题。

方案2：仅针对Vue文件生效 #

如果你不想改变项目中纯HTML文件的默认格式化逻辑，可以把规则放在overrides配置里，只对.vue文件生效：

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": ["**/*.yml"],
      "options": {
        "singleQuote": false
      }
    },
    {
      "files": ["**/*.vue"],
      "options": {
        "htmlWhitespaceSensitivity": "strict"
      }
    }
  ]
}

方案3：单段代码跳过格式化 #

如果只有个别位置不需要Prettier调整格式，可以在对应代码前加忽略注释，Prettier会直接跳过这段代码的所有格式化操作：

<!-- prettier-ignore -->
<p class="paragraph">{{
  someMoreText
}}</p>

内容的提问来源于stack exchange，提问作者Théo Lavaux