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

【问题标题】：VSCode Prettier reformat adds {" "} when adding new line between html tagsVSCode Prettier 格式在 html 标签之间添加新行时添加 {" "}
【发布时间】：2019-05-17 09:15:45
【问题描述】：

我正在尝试为 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"]
}

关于为什么会发生这种情况的任何想法？

【问题讨论】：

标签： reactjs visual-studio-code eslint prettier

【解决方案1】：

通常，它会添加{" "}，以确保在截断尾随空格后，在输出 HTML 中仍然存在位于行尾的空格字符。

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

【讨论】：

你知道有什么方法可以关闭它吗？有点分散注意力。
不确定，您的设置是什么。很少发生在我身上，当它发生时，它实际上很有用。