Prettier adds space before and after angle brackets of tags in JSX in VS Code

Question

I am trying to prettify a jsx file after save but Prettier is adding space between <>. for example the <p> changes to < p > and this is raising issue on jsx

const elem = <h1> Hello React </h1>;
    console.log(elem);

to

const elem = < h1 > Hello React < /h1>;
console.log(elem);

How can I fix this?

Answer 1

Do you by any chance have Beautify installed as well? There is an issue documenting a known conflict with that extension.

To solve this, add the following to your workspace configuration:

"beautify.ignore": [
    "**/*.js",
    "**/*.jsx"
]