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.

Darren Zhang · Accepted Answer · 2021-10-25 03:03:48Z

2

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.

edited Oct 25, 2021 at 3:03

answered Oct 25, 2021 at 2:51

Darren Zhang

413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillermo Brachetta · Accepted Answer · 2021-01-31 14:58:22Z

0

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"
}

(Provided you have Prettier installed)

answered Jan 31, 2021 at 14:58

Guillermo Brachetta

4,9735 gold badges29 silver badges45 bronze badges

1 Comment

bbgo Over a year ago

This has worked for me afterall, I've used create-react-app to be sure of any syntax errors, when I changed the default formatter to prettier, it has added several spaces usign this format {" "}. Even though the default formatter is prettier, this old extension JS-CSS-HTML Formatter was preventing new files to be formatted with prettier. Uninstalling JS-CSS-HTML Formatter solved my problem. Thank you @guillermo-brachetta

Abbas Akhter · Accepted Answer · 2022-11-28 19:31:20Z

0

Change the file type from javascript to javascript react

https://i.sstatic.net/f7hYJ.png

edited Nov 28, 2022 at 19:31

answered Nov 28, 2022 at 19:30

Abbas Akhter

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

VSCode adds spaces inside HTML tags inside React code

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related