CODEWITHSUNDEEP
visual-studio-codeformatprettier
Sporego
Sporego

Reputation: 416

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

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>

Figure A

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

Figure B

Upvotes: 0

Views: 453

Answers (1)

thorn0
thorn0

Reputation: 10447

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̲.

Upvotes: 1

Related Questions