How to prevent insert spaces in JSX code

Question

I have just started learning React Native. I am using Visual Studio Code for editing. Whenever I save my file it is inserting spaces in my JSX code. This reduces the readability of the code. This is code before I save the file

Before Saving the File:

This is File after saving:

I have tried editing VS Code settings

"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false

But it did not help.

Is there any solution to this problem?

Please find a detail step-by-step solution for this https://stackoverflow.com/questions/44993808/visual-studio-code-changes-format-react-jsx/67938283#67938283 — CostaIvo, Jul 02 '21 at 15:46

score 14 · Accepted Answer · answered Jul 15 '17 at 06:56

14

I managed to resolve this by manually changing the language of the file to javascriptreact instead of javascript.

Screenshot:

answered Jul 15 '17 at 06:56

Suraj Rao

29,388
11
94
103

score 1 · Answer 2 · answered Aug 18 '20 at 12:35

1

Or you could also rename the file changing its extension from .js to .jsx and VSCode will understand that the file is React.

answered Aug 18 '20 at 12:35

Edu Garcia

21
3

score 1 · Answer 3 · answered Dec 10 '20 at 19:07

1

I had this problem and I solved by making js-css-html formatter extension disable and closing the vs code and restart

answered Dec 10 '20 at 19:07

Raouf Satto

42
6

How to prevent insert spaces in JSX code

3 Answers3

Linked