What prettier extension settings to use to format my react code?

Question

I'm using VS code editor, I've installed prettier but my code still sticks together instead of moving on to the next line. I tried changing a few settings but didn't work very well. Here's a sample code

return (<>
        <span style={{display:"flex",color:"white"}}>
            <img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl}  onError={(e)=>{e.target.onerror = null; e.target.src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRlsUYbM6jWxjKND6TCCeEE5sBTwEJqyUhtLg&usqp=CAU"}} alt="" style={{borderRadius:"50%",width:30,height:30,border:"None"}}></img>
    <span><h6>{comment.snippet.topLevelComment.snippet.authorDisplayName}</h6>{comment.snippet.topLevelComment.snippet.textOriginal}</span>
        </span>
        <div>{comment.replies!==undefined?<><button className="comment"  onClick={toggle} style={{ marginBottom: '1rem' ,marginLeft:'2rem'}}>replies</button>
        <Collapse isOpen={isOpen}>
          <div>
            <div>
            <Replies replies={comment.replies}/>
            </div>
          </div>
        </Collapse></>:null}
        
      </div></>
    )

Answer 1

Prettier latest version [3.17.0] vs code latest version 1.41.1 Format on Save is 'ON' Default Formatter esbenp.prettier-vscode