Prettier automatically adds {" "}

Question

When I try to formatting the below code with Prettier:

export default function App() {
  return (
    <View className="h-full flex flex-row justify-center bg-blue-500">
<View className="h-fit">
        <Text className="bg-red-500">THIS WILL BE CENTERED</Text>
  
</View>      <StatusBar style="auto" />
    </View>
  );
}

It becomes:

export default function App() {
  return (
    <View className="h-full flex flex-row justify-center bg-blue-500">
      <View className="h-fit">
        <Text className="bg-red-500">THIS WILL BE CENTERED</Text>
      </View>{" "}
      <StatusBar style="auto" />
    </View>
  );
}

Please note that Prettier automatically adds {" "} between the View and StatusBar tag. I don't want this behaviour to ever occur. How do I fix it?

Want to stop Prettier from writing {" "}

Answer 1

Prettier is adding {" "} because it is probably parsing the line

</View>      <StatusBar style="auto" />

as needing a white space between the innermost View element and the StatusBar element, which is not your intention. You can avoid this problem by leaving a newline between the elements you want to structure, i.e.,

</View>      
<StatusBar style="auto" />

This should "nudge" Prettier to format your code as you intend.

Answer 2

It happens, I'd advise to avoid adding unnecessary space in the codebase.

<View className="h-fit">
  <Text className="bg-red-500">THIS WILL BE CENTERED</Text>
</View>
<StatusBar style="auto" />

You can leave it or ignore if it doesn't mess-up your code.