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

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

你应该可以使用

来弯曲它

"bracketSameLine": true

在更漂亮的配置中 JSX Brackets

这也可能会有一些帮助

Answer 2

Prettier 有选项 printWidth。您可以在 settings.json 中将其更改为较大的值。虽然有点费力，但确实有效。

"prettier.printWidth": 140

Answer 3

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

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

Stop Prettier formatter from putting each HTML tag on its own line in React JSX files?

html

reactjs

visual-studio-code

prettier