VSCode怎么配置Prettier让HTML标签的属性过长时强制换行显示

HTML属性换行靠htmlWhitespaceSensitivity，不是printWidth

你是不是也遇到过这种情况？在VSCode里写HTML，一个标签的属性多到快溢出来了，满心期待Prettier能帮你自动换行整理，结果保存一看，所有属性还是密密麻麻挤在一行。这时候，很多人第一反应是去调printWidth，或者改tabWidth，但折腾半天发现，根本不管用。

问题出在哪儿？其实，真正掌控HTML属性换行“生杀大权”的，是一个叫htmlWhitespaceSensitivity的配置项。它决定了Prettier如何理解HTML代码中空格和换行的语义，这才是关键所在。

它的默认值是"css"。在这个模式下，Prettier会尽量保持标签单行显示——哪怕一个标签里塞了十几个属性，它也会硬着头皮全挤进去。而想要实现属性自动换行，你需要把它改成"strict"。一旦切换到这个模式，只要标签加上所有属性的总长度超过了printWidth的设定值（比如常见的80个字符），Prettier就会毫不犹豫地把每个属性拆到独立的一行。

简单来说，这三个模式的区别是这样的：

• "strict"：强制每个属性独占一行，不太考虑视觉上的紧凑性，非常适合追求严格、统一代码风格的团队。
• "ignore"：几乎完全忽略空白符的敏感性，换行行为比较“懒散”，接近旧版Prettier的逻辑。
• "css"（默认）：按照CSS选择器的逻辑来判断是否换行，对普通的HTML标签最不“友好”，换行意愿最低。

VSCode里必须关掉html.format.enable

好了，配置项找到了，但先别急着改。这里还有一个几乎人人都会踩的“坑”：VSCode自带的HTML格式化功能。这个由html.format.enable控制的原生格式化器，会和Prettier“打架”。

想象一下这个场景：即便你在Prettier里配好了htmlWhitespaceSensitivity: "strict"，但只要VSCode自带的格式化还开着，当你保存文件时，代码会先被VSCode“暴力压平”一次（把所有属性挤到一行），然后再交给Prettier处理。结果就是，Prettier收到的已经是一行“铁板一块”的代码，换行自然就失效了。

所以，必须关掉它。具体操作很简单：

• 打开VSCode设置（快捷键Ctrl+,），搜索html.format.enable。
• 直接取消勾选，或者更推荐的做法是，在项目或全局的.vscode/settings.json文件里明确加上一行：

  "html.format.enable": false

• 最后，别忘了确认一下，当前工作区的默认格式化工具已经切换成了Prettier（可以查看编辑器右下角的状态栏）。

printWidth要配合htmlWhitespaceSensitivity: "strict"才生效

现在，让我们回头说说printWidth。它并非对HTML换行毫无作用，但它的作用是有前提的——必须和htmlWhitespaceSensitivity: "strict"搭档才能触发换行逻辑。

具体机制是这样的：当模式设为"strict"后，Prettier会计算“标签名 + 所有属性字符串”的总长度。一旦这个总长度超过了printWidth设定的阈值，它就会启动“拆分程序”，把属性逐个折到新行。

这里有几个实用的经验：

• 建议将printWidth设为80或100。如果设得太小，可能会导致一些非常简单的标签（比如
  ）也被强制换行，反而影响可读性。
• 绝对不要设置printWidth: 0或负数，Prettier会直接忽略这些无效值，退回默认行为。
• 值得注意的是，这套规则在JSX里同样适用。不过，React组件的属性换行还会受到jsxSingleQuote等其他配置的影响，相比之下，处理纯HTML标签的逻辑会更清晰、干净一些。

立即学习“前端免费学习笔记（深入）”；

配置文件优先级：项目级.prettierrc > VSCode设置

配置都懂，但改了就是不生效？这很可能是因为配置的优先级问题在作祟。请记住这个原则：项目根目录下的Prettier配置文件，优先级高于VSCode的编辑器设置。

也就是说，即使你在VSCode的GUI设置或者用户的settings.json里把htmlWhitespaceSensitivity改成了"strict"，但如果你的项目里存在一个.prettierrc文件，并且里面写的是别的配置，那么最终生效的将是项目里的配置。

排查和解决步骤：

• 检查项目根目录下是否存在.prettierrc（或prettier.config.js）文件。它的内容可能类似这样：

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

• 如果使用的是prettier.config.js，确保导出的配置对象里明确包含了htmlWhitespaceSensitivity字段。
• 想要快速验证配置是否真的生效，可以打开终端，在项目目录下运行一个测试命令：npx prettier --write --html-whitespace-sensitivity strict index.html，观察文件的实际变化。

说到底，Prettier处理HTML换行的逻辑确实有点“深藏不露”。htmlWhitespaceSensitivity这个配置项名字不够直观，再加上VSCode原生格式化工具的干扰，绝大多数人调试时，都会在这两个地方卡住。理清它们之间的关系和优先级，问题也就迎刃而解了。