Prettier在.jsx檔案中刪除了大括號"{ }"

Question

我在我的.jsx檔案中有以下程式碼區塊：

<div className="">
        <h1 className="">
          The Next <br className="sm:block hidden" /> {" "}
          <span className="text-gradient">Generation </span> {" "}
          Payment
        </h1>
      </div>

但是 prettier 會移除第二個{" "}，如下：

<div className="">
        <h1 className="">
          The Next <br className="sm:block hidden" /> {" "}
          <span className="text-gradient">Generation </span>
          Payment
        </h1>
      </div>

它也會在程式碼的其他部分移除{" "}。 如果有人能幫我解決這個問題，我將非常感激。

我找到的唯一解決方案是在prettier的配置中使用prettier.bracketSpacing，但沒有幫助。

Answer 1

嘗試這個：

const space = " ";
return ( ...
<div className="">
   <h1 className="">
       下一代<br className="sm:block hidden" /> {space}
       <span className="text-gradient">支付</span> {space}
       付款
   </h1>
</div>