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

Question

I'm trying to set up VSCode for React, ESLint, and Prettier is acting very interesting and I'm not sure why.

If I have code formatted poorly like so:

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

   </header>
</div>

once I save (and run prettier on it) it looks like the following (note the {" "}):

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

Here is my .eslintrc file:

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

any ideas as to why this is occurring?

Answer 1

Generally it adds {" "} whenever it wants to ensure that a space character that was at the end of the line is still present in the output HTML, after trailing spaces are truncated.

Not exactly sure why it adds it in the code snippet above, you don't have space between <header className="App-header"> and <p>.