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

Question

我正在尝试为React，ESLint和Prettier设置VSCode，这很有趣，我不确定为什么。

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

<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>之间没有空格。