VSCode Prettier 重新格式化在 html 标签之间添加新行时添加 {" "}

Question

我正在尝试为 React、ESLint 设置 VSCode，而 Prettier 表现得非常有趣，我不确定为什么。

如果我的代码格式不正确：

<div class="example">
   <header className="App-header"><p>
    this is poorly formatted</p>

   </header>
</div>

一旦我保存（并且运行更漂亮）它看起来像下面这样（注意 {" "}）：

<div class="example">
   <header className="App-header">{" "}
    <p>
       this is poorly formatted{" "}
    </p>
   </header>
</div>

这是我的 .eslintrc 文件：

{
   "extends": ["react-app", "plugin:prettier/recommended"]
}

关于为什么会发生这种情况有什么想法吗？

Answer 1

通常它会添加 {" "} 每当它想要确保行尾的 space 字符仍然存在于输出 HTML 中时，在尾随 spaces 被截断了。

不确定为什么它会在上面的代码片段中添加它，您在 <header className="App-header"> 和 <p> 之间没有 space。

VSCode Prettier reformat adds {" "} when adding new line between html tags