eslint-plugin-prettier修复后换行的格式很乱。

Question

背景：我们的项目是 vue 项目，使用 eslint 和 prettier 结合保证代码风格和质量。
问题描述：
近期发现当代码行字符超过了 printWidth的时候和提示 eslint(prettier/prettier)的告警，保存文件后自动修复，但是修复的代码并不符合预期

fix 之后：

Answer 1

看一下这篇文章 空格敏感

对于行内/行内块元素

$<span>111</span>$

<!-- render -->

$111$

但是加上回车就变成了：

$<span>
    111
</span>$

<!-- render -->

$ 111 $

111前后就多了空格

所以prettier有一个参数可以配置 html-whitespace-sensitivity

有3个值可以设置：

• css 默认值，会根据是行内元素还是块元素来判断
• strict 不能有任何空白
• ignore 用户不关心空白带来的影响

因为默认是css，所以题主的span元素就没有空白
如果想换行并且可以接受这种空白影响可以设置ignore