代码之家  ›  专栏  ›  技术社区  ›  Aaspreet

Prettier会自动添加{“”}

  •  1
  • Aaspreet  · 技术社区  · 2 年前

    当我尝试用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>
      );
    }
    
    

    它变成了:

    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>
      );
    }
    

    请注意,Prettier会自动添加 {" "} 在“视图”和“状态栏”标记之间。我不希望这种行为发生。我该怎么修?

    想阻止Prettier写{“”}

    1 回复  |  直到 2 年前
        1
  •  4
  •   Jiho Kim    2 年前

    Prettier正在添加 {" "} 因为它可能正在解析该行

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

    因为需要a white space 在最里面的View元素和StatusBar元素之间,这不是您的意图。您可以通过在要构造的元素之间留下换行符来避免这个问题,即。,

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

    这应该“推动”Prettier按照您的意愿格式化代码。

        2
  •  0
  •   Adebayo Anuoluwa    2 年前

    我建议避免在代码库中添加不必要的空间。

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

    如果它不会弄乱你的代码,你可以离开它或忽略它。