VSCode adds spaces inside HTML tags inside React code

Question

Starting to learn React from ground when I saved the code below VS Code formatted it as in the image.

ReactDOM.render(
    
         Hi there  {name}  
          your lucky number is {num} 
    ,
    document.getElementById("root")
);

Line breaks with spaces formatted sample code from VSCode:

I've googled it but some time later I realized that it was the file format that caused this problem.

Thanks Guillermo, the VSCode extension JS-CSS-HTML Formatter was the cause, uninstalling it and using prettier instead solved the problem.

user_17237661 · Answer

I solved by the following steps:

For more detail please view the under link:

How to disable the default HTML formatter.

user_12888470 · Answer

Maybe you're using a formatter for js files that doesn't get well along with React.

You could try to add this line to your settings.json file:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}