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

In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar. I'm publishing it here for future reference since I didn't find any documentation on this topic.

In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React

Answer 2

change vscode preferences settings > user settings below:

"files.associations": {         "*.js":"javascriptreact"     }