VS Code 中的 Prettier 正在到处添加 {" "}

Question

每次我保存（保存时格式化）一个文件，Prettier 决定给我添加这个（谈论用 React 在 JS 中编码）：

{" "}

如果有人有解决方案我会很高兴。

Answer 1

好吧，这是不能更漂亮的事情之一，我们可能不得不习惯它。

如果您检查 React documentation，您可以看到使用 JSX 删除了行上尾随和前导的白色space：

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

如果您需要 space 显示在文本和下一行的后续元素之间，则必须添加 {" "}。你无法避免它。丑陋的 space 实际上在语义上对 JSX 很重要。

原文：

<section>
  <ul>
    <li>There is <strong>no problem</strong> with long texts without inline elements starting on new lines. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vero enim eos iste! Odio deserunt id quam.</li>
    <li>But if there are inline HTML elements on new lines... Soluta culpa dolor <a href="#officia">officia omnis</a> fugiat ipsa! Corporis, ex amet hic incidunt explicabo? Alias <strong>libero temporibus, corporis recusandae</strong> <em>voluptatibus</em> eligendi.</li>
  </ul>
</section>

格式化：

<section>
  <ul>
    <li>
      There is <strong>no problem</strong> with long texts without inline
      elements starting on new lines. Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Laboriosam vero enim eos iste! Odio deserunt id quam.
    </li>
    <li>
      But if there are inline HTML elements on new lines... Soluta culpa dolor{" "}
      <a href="#officia">officia omnis</a> fugiat ipsa! Corporis, ex amet hic
      incidunt explicabo? Alias{" "}
      <strong>libero temporibus, corporis recusandae</strong>{" "}
      <em>voluptatibus</em> eligendi.
    </li>
  </ul>
</section>;

VS Code 中的 Prettier 正在到处添加 {" "}

Prettier in VS Code is adding {" "} everywhere

jsx

reactjs

visual-studio-code

prettier