如何在浏览器中配置Prettier实现HTML正确缩进格式化

调整方案 #

你只需要修改两个配置参数即可实现预期效果：

• 将htmlWhitespaceSensitivity的取值从"strict"改为"css"
• 新增配置项bracketSameLine: true

调整后的完整配置如下：

import prettier from 'prettier/standalone';
import htmlParser from 'prettier/parser-html';

return prettier.format(source, {
  parser: 'html',
  plugins: [htmlParser],
  tabWidth: 2,
  htmlWhitespaceSensitivity: "css",
  bracketSpacing: false,
  bracketSameLine: true
});

参数说明 #

• htmlWhitespaceSensitivity: "css"会基于标签的CSS display属性判断空格是否需要保留，不会像strict模式为了保留空格强制拆分标签，同时也不会过度删除必要空格
• bracketSameLine: true会强制让标签的闭合尖括号>和最后一个属性放在同一行，解决你当前出现的标签断裂问题

如果调整后不生效，请检查你使用的Prettier版本是否≥2.4.0，该版本才正式支持bracketSameLine配置。

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