How can I stop tag separation in VSCODE using react?

Question

After saving changes, tags are being separated like this.

import React from 'react';

function App() {
  return ( < div >
    Hello!
    <
    /div> 
  );
}

export default App;

How can I fix this?

Answer 1

It looks like your code formatter is not correctly set up. You can either disable Format on Save or correctly setup your code formatter.

1. Disable Format on Save

2. Correctly setup your code formatter

I like using Prettier as it is fairly simple to set up and helps you keep code neat with almost no previously defined rules.

Here's a guide you can follow to set it up.