Prettier or VSCode formatting with unwanted behavior. Adding {' '}

Question

I have a problem with prettier. The code would format in an unwanted way.

How can I solve this problem?

I have checked prettier docs and tried going through the settings config. After formatting is applied to Figure A there is unwanted formatting behavior in which {' '} curly braces with single quotation of space inside is added. See Figure B

<h1 className='title'>
     Read <Link href="/posts/first-post"><a>this page!</a></Link>
</h1>

Read{' '}
   <Link href='/posts/first-post'>
     <a>this page!</a>
   </Link>

---

Answer 1

That's how whitespace works in JSX. See this question: Best practice when adding whitespace in JSX

If Prettier split the line without adding that space in braces, the output of your code would change: Readt̲h̲i̲s̲ instead of Read t̲h̲i̲s̲.