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

【问题标题】：Stop Prettier formatter from putting each HTML tag on its own line in React JSX files?阻止 Prettier 格式化程序将每个 HTML 标记放在 React JSX 文件中自己的行上？
【发布时间】：2022-01-20 18:36:51
【问题描述】：

当我使用 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 的价值很高，也会发生这种情况

【问题讨论】：

标签： html reactjs visual-studio-code prettier

【解决方案1】：

你应该可以通过使用来弯曲它

"bracketSameLine": true

在更漂亮的配置中 JSX Brackets

这也可能会有所帮助How to disable prettier settings creating new line of > of html tag?

【讨论】：

刚刚试过，但没有解决。它说Put the > ... at the end of the last line instead of being alone on the next line 在这里不适用。我所有的标签都有< 和> 在同一行，但我希望多个标签保持在同一行

【解决方案2】：

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

"prettier.printWidth": 140

【讨论】：

【解决方案3】：

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

【讨论】：