Why does my App.js code changes itself upon save?

Question

I am trying to build my first React Native app. I am using the default App.js code, the only difference is the output text that I changed from Open up App.js to Hello world!. I have an issue with the code changing itself upon save.

This is how the default function looks before I press Ctrl+S to save the file:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
}

And this is how the default function looks after the save:

export default function App() {
    return ( <
        View style = { styles.container } >
        <
        Text > Hello world! < /Text> <
        /View>
    );
}

Is it a bug or am I doing something wrong?

Its more than likely the ide/editor you are using and the settings within it — Craicerjack, Feb 18 '20 at 10:16
It is because of the autosave format change in the settings. — Praveen Jaya Kumar Ramesh, Feb 18 '20 at 10:16
This has nothing to do with the language or the library you're using, please check your IDE settings. — M0nst3R, Feb 18 '20 at 10:17
I have autosave disabled by default, so I am not sure what should I change in the settings. — CircleMisty, Feb 18 '20 at 10:24
Does this answer your question? [How to prevent insert spaces in JSX code](https://stackoverflow.com/questions/45115112/how-to-prevent-insert-spaces-in-jsx-code) — Suraj Rao, Sep 07 '22 at 06:33

score 1 · Accepted Answer · answered Feb 18 '20 at 10:38

This is based on your IDE. Since you are using Visual Studio Code as IDE try to use code formatting extension to format your code accordingly.

Try to use Prettier - Code Formatter Extension for VS Code -> Here

If you wan to enable auto save add the following to your settings.json file:

"editor.formatOnSave": true

If you wan to disable auto save add the following to your settings.json file:

"editor.formatOnSave": false

score 0 · Answer 2 · edited Dec 23 '21 at 10:22

If you are using VS code... I got the same problem and I just solved it by:

Click on the button in the bottom left probably saying "Javascript"
Click on it and a search bar will appear
Type "react" and choose each of the two either "react (javascriptreact)" or "react (typescriptreact)" depending on what you are using

Hope that helped solve your issue if not...

ctrl+shift+p to open a the search bar
type "open settings"
click "open settings(JSON)"
paste this at the end of the .json file: editor.formatOnSave": false

Htnhan111.IOI. · Answer 3 · 2022-09-07T05:56:55.717

0

*Attention: Select the appropriate language mode.

Please see below for details:

Programming language: Javascript

Programming language: Javascript React

edited Sep 07 '22 at 05:56

answered Sep 07 '22 at 05:53

Htnhan111.IOI.

1
1

Why does my App.js code changes itself upon save?

3 Answers3