如何使用Prettier正确格式化HTML代码且不拆分标签？

Prettier拆分HTML标签大多是因为默认的换行长度限制，或是HTML格式化规则导致的，以下是几种可行的解决方法：

• 调整换行长度阈值
  Prettier默认会在代码超过80字符时自动换行拆分标签。你可以把这个阈值调大，让短标签保持单行：

  • VS Code内操作：打开设置（快捷键Ctrl+,），搜索prettier.printWidth，修改数值为120或更大的数值。
  • 项目配置文件设置：在项目根目录创建或修改.prettierrc（或.prettierrc.json）文件，添加如下配置：

    {
      "printWidth": 120
    }
    

• 禁用单属性强制换行
  如果调整换行长度后仍有问题，可以强制关闭单属性换行规则，让多个属性保持在同一行：
  在项目配置文件中添加：

{
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "ignore"
}

singleAttributePerLine设为false会取消单属性单独占一行的规则，htmlWhitespaceSensitivity设为ignore会忽略HTML空格敏感性，减少不必要的换行拆分。

• 针对HTML文件单独配置
  如果只想对HTML文件生效，可以用overrides做针对性设置：

{
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "printWidth": 150,
        "singleAttributePerLine": false
      }
    }
  ]
}

配置完成后，重启VS Code或使用快捷键Ctrl+Shift+I重新格式化文档，就能看到标签保持正常的单行显示了。

内容的提问来源于stack exchange，提问作者SazD