时间戳

首页 > 解决方案 > VSCode Prettier 重新格式化在 html 标签之间添加新行时添加 {" "}

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

问题描述

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

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

标签： reactjsvisual-studio-codeeslintprettier

解决方案

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

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

推荐阅读