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(
    <div>
        <h1> Hi there  {name} </h1> 
        <p>  your lucky number is {num} </p>
    </div>,
    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.

Answer 1

I solved by the following steps:

• Install the Prettier-Code formatter.
• Disable the default HTML formatter in settings.
• After that restart your VS-Code.

For more detail please view the under link:

How to disable the default HTML formatter.