vscode中更漂亮的是将内容包装在html标记中，这会导致它忽略空格

Question

我正在使用vscode。我当前的扩展名更漂亮，我的文件是JavascriptReact(JSX(。当我手动选择格式化代码或在保存时激活格式时，它会接收这样的内容：

<p>
This type of cancer is also called
<Definition
term="upper tract urothelial cancer"
id="upper_tract_urothelial_cancer"
/>
(UTUC). Get to know more about the urinary tract, your cancer, and the
different types of treatment options available. And be sure to talk to your
doctor about what's right for you.
</p>
;

并将其转化为：

<p>
This type of cancer is also called{" "}
<Definition
term="upper tract urothelial cancer"
id="upper_tract_urothelial_cancer"
/>{" "} (UTUC). Get to know more about the urinary tract, your cancer, and the
different types of treatment options available. And be sure to talk to your
doctor about what's right for you.
</p>

这样做的问题是，定义组件周围的空间应该被视为文字空间(即 (或{' '}(。但更漂亮的格式去掉了间距，所以我的<Definition/>组件将其子级封装在一个具有一些工具提示功能的特殊span标记中，它周围不再有间距，所以单词看起来都在一起运行(例如This type of cancer is also called upper tract urothelial cancer(UTUC)(。

如何防止格式化程序弄乱这些行？

Answer 1

Prettier是opinate，如果你找不到任何调整更漂亮配置文件的解决方案，那么就忽略那些你不想格式化的行

const x = (
<>
{/* prettier-ignore */}
<p>
This type of cancer is also called <Definition term="upper tract urothelial cancer" id="upper_tract_urothelial_cancer" /> (UTUC). Get to know more about the urinary tract, your cancer, and the different types of treatment options available. And be sure to talk to your doctor about what's right for you.
</p>
</>
)