I'm using VS code and when I save, it automatically adds extra spaces and rows in tags and other parts of the code. After I change it back to the previous syntax and save again, this problem repeats and then my code couldn't work.

Recently I changed some property in my settings, I think it is connected to a "Prettier" extension, and since then I have this problem, but I don't remember which one to enable now in order to fix it.

For example here is an original code syntax in JS file:

import React, { useState } from 'react';

function App() {
  return ( null);
  <div>

  </div>
}

export default App;

And this is what happens after I save:

import React, {
  useState
} from 'react';

function App() {
  return (null); <
  div >

    <
    /div>
}

export default App;

I can't bring it back to correct syntax (delete unnecessary rows and spaces) when I change it back and save again - it does the same thing. I made changes like the offer here (add rewrap) and there (trim settings), but it didn't help.

I tried to uninstall and then reinstall my program, but it didn't help. My VS code version doesn't have the Tools option that may help.

I'm using VS code and when I save, it automatically adds extra spaces and rows in tags and other parts of the code. After I change it back to the previous syntax and save again, this problem repeats and then my code couldn't work.

Recently I changed some property in my settings, I think it is connected to a "Prettier" extension, and since then I have this problem, but I don't remember which one to enable now in order to fix it.

For example here is an original code syntax in JS file:

import React, { useState } from 'react';

function App() {
  return ( null);
  <div>

  </div>
}

export default App;

And this is what happens after I save:

import React, {
  useState
} from 'react';

function App() {
  return (null); <
  div >

    <
    /div>
}

export default App;

I can't bring it back to correct syntax (delete unnecessary rows and spaces) when I change it back and save again - it does the same thing. I made changes like the offer here (add rewrap) and there (trim settings), but it didn't help.

I tried to uninstall and then reinstall my program, but it didn't help. My VS code version doesn't have the Tools option that may help.

• javascript
• reactjs
• visual-studio-code

• 1 You probably didn't configure prettier to understand JSX syntax – Bergi Commented May 7, 2020 at 7:41
• check your visual studio user settings/preferences. There could be settings like editor.formatOnSave set to true.. you might have to change it to false to disable the auto format – Panther Commented May 7, 2020 at 7:42
• The change of formatOnSave worked, I think. Thanks! @Bergi - I am not sure I understand your answer, though probably disable the formatOnSave was enough. – Yair Shachar Commented May 7, 2020 at 8:04

1 Answer 1

I also faced a similar issue as shown here:

Select "JavaScript React" instead of "JavaScript" as shown here: