Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Prettier automatically adds {" "}

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 {" "}

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search