如何防止 WebStorm/prettier 在 .jsx 中的花括号 {" "} 中随机插入 space 字符串?

How to prevent WebStorm/prettier from inserting randomly a space string in curly braces {" "} in .jsx?

当使用 prettier 自动格式化 .jsx 时,我随机插入了 {" "}。 据我所知,它发生在 jsx 元素之间有一些空的 space,并且自动格式化程序将尾部元素移动到新行。

例如这个:

自动格式化为:

但是如果尾随元素已经在下一行,那么元素之间的 space 将被删除。我认为这是正确的行为。

是否可以关闭 {" "} - 插入?

在命令行中使用 Prettier 格式化代码时,您将面临同样的问题。这是设计使然,请参阅 https://github.com/prettier/prettier/issues/4223#issuecomment-380093772 的解释:

使用 jsx,一行的尾部和前导白色space 在渲染时被移除:

<span>
    a
        <strong>tag</strong>
</span

变成“atag”。

如果 space 出现在行尾或行首,则必须添加 {" "}

避免显式 space 的唯一方法是不要 leading/trailing whitespace,而是保留所有需要保留的 whitespace在任何给定行的标签之间:

<span>
    a <strong>tag</strong>
</span

这将产生“一个标签”,就像 HTML 一样。