Visual Studio Code HTML p标签换行规则不一致如何调整对应设置

解决方案 #

你遇到的p标签换行差异是HTML格式化工具的行长度阈值规则导致的，短内容没到阈值就会和标签同行，长内容超过阈值就会自动分行。按照你使用的格式化工具对应修改配置即可：

若使用VS Code内置HTML格式化器

1. 按Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置界面
2. 搜索html.format.wrapLineLength，将值改为0，该配置设为0后不会按行长度限制换行，所有p标签的内容都会强制和标签分行展示
3. 若修改后未生效，搜索html.format.contentUnformatted，确认配置列表中没有p标签，有则删除即可

若使用Prettier作为格式化器

在项目.prettierrc配置文件中添加如下配置：

{
  "printWidth": 1,
  "htmlWhitespaceSensitivity": "strict"
}

• printWidth设为极小值会强制所有长度的p标签内容都触发分行
• htmlWhitespaceSensitivity设为strict可以避免空格规则导致的行合并
  修改完成后按Shift+Alt+F（Windows/Linux）或Shift+Option+F（Mac）重新格式化文件即可生效。

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