阻止 Prettier 格式化程序将 React JSX 文件中的每个 HTML 标签放在自己的行上？

Question

当我使用 prettier 格式化 HTML 文件时，它看起来像这样：

<nav>
  <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About">About</a></li>
    <li><a href="#" title="Sign Up">Sign Up</a></li>
    <li><a href="#" title="Contact">Contact</a></li>
    <li><a href="#" title="Careers">Careers</a></li>
  </ul>
</nav>

但是当我将相同的标签放入 JSX 文件中时，它会像这样重新格式化：

import React from "react";

const Demo = () => {
  return (
    <nav>
      <ul>
        <li>
          <a title="Home">Home</a>
        </li>
        <li>
          <a title="About">About</a>
        </li>
        <li>
          <a title="Sign Up">Sign Up</a>
        </li>
        <li>
          <a title="Contact">Contact</a>
        </li>
        <li>
          <a title="Careers">Careers</a>
        </li>
      </ul>
    </nav>
  );
};

export default Demo;

我怎样才能阻止这种行为？即使价值很高，也会发生这种情况prettier.printWidth

Answer 1

经过更多阅读后，我得出结论这是不可能的。HTML 对空格敏感，因此它会被保留，但由于 JSX 不是，它总是会自动格式化，而且 Prettier 无法选择将标签保留在同一行。