在html标记之间添加新行时，VSCode Prettier重新格式化添加{“”}

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

通常，只要想要确保在尾部空格被截断后，输出HTML中仍然存在行尾的空格字符，它就会添加{" "}。

不完全确定为什么它将它添加到上面的代码片段中，你在<header className="App-header">和<p>之间没有空格。