Vscode Prettier 诡异的格式化换行问题及解决

问题

Prettier 格式化后的效果不符合要求，如图所示

<van-button block native-type="submit" color="rgba(170, 170, 170, 1)"
  >确认注册</van-button
>

期望的效果如下：

<van-button block native-type="submit" color="rgba(170, 170, 170, 1)">
  确认注册
</van-button>

解决

看官方文档：https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

添加下面的配置就可以解决问题了

htmlWhitespaceSensitivity: 'ignore'

项目下添加 .prettierrc.js

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  arrowParens: 'avoid',
  trailingComma: 'none',
  htmlWhitespaceSensitivity: 'ignore',
};

后记

参考文章：Make prettier less uglier - prevent split tags