阻止 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

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

Answer 2

您应该能够通过使用来弯曲它

"bracketSameLine": true

在更漂亮的配置JSX Brackets

这也可能有一些帮助如何禁用更漂亮的设置，创建 html 标签的 > 新行？

Answer 3

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

"prettier.printWidth": 140

Answer 4

我找到了一个解决方案，确保文件是 jsx 并且在右下角选择了“JavaScript React”。

安装 Prettier 后，将其复制到您的 settings.json：

“[javascript]”：{“editor.defaultFormatter”：“esbenp.prettier-vscode”}，“[javascriptreact]”：{“editor.defaultFormatter”：“vscode.typescript-language-features”}

基本上，您是在告诉 vs code 使用 VS Code typescript 模式而不是 Prettier 来格式化 JSX 文件。 （这不会破坏组件中的 html 标签）

普通的 JS 文件将被格式化为 prettier。