Visual studio code changes format (React-JSX)

Question

I've the following snippet in my index.js

class App extends Component {
render() {
    return ( <div style = { styles.app } >
        Welcome to React!
        </div>
    )
}

}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:

class App extends Component {
render() {
    return ( < div style = { styles.app } >
        Welcome to React!
        <
        /div>
    )
}

}

How can I solve this? thanks

Answer 1

You can install an extension like react-beautify that helps you format your jsx code.

It is found here

This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.