2

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.

Gama11
  • 24,825
  • 7
  • 56
  • 81
Yair Shachar
  • 25
  • 6
  • 1
    You probably didn't configure prettier to understand JSX syntax – Bergi May 07 '20 at 07: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 May 07 '20 at 07: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 May 07 '20 at 08:04

1 Answers1

2

I also faced a similar issue as shown here:

issue

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

fixed

Gino Mempin
  • 12,644
  • 19
  • 50
  • 69
Subhajit
  • 21
  • 2