Ad

Why Does Visuall Studio Code Auto Add {" "}?

I am working on a React Native App and I noticed some weird behavior in VSCode.

When I write some JSX code and I auto-format it, sometimes the IDE auto adds a " {" "} " between my code.

The app doesnt break but removing it also doesnt change the behavior of the app.

Is it just a VSCODE thing? Is it there so I can read the code better or smthn?

For example:

This Code:

return {
    headerTitle: "Favorites",
    headerLeft: <HeaderButtons HeaderButtonComponent={CustomHeaderButton}> <Item title="Menu" iconName="md-menu" /> </HeaderButtons>
  }

gets changed to:

 return {
   headerTitle: "Favorites",
   headerLeft: (
     <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
       {" "}
       <Item title="Menu" iconName="md-menu" />{" "}
     </HeaderButtons>
   )
 };

I am using Prettier for code formating.

Ad

Answer

It's to add an explicit space in your rendered output. It sees the space in your code:

...derButton}> <Item ti...

And {" "} this ensures a space gets rendered to the output.

Ad
source: stackoverflow.com
Ad