如何在 VS 代码中停止 Prettier 将属性拆分为多行？

Question

我正在使用 prettier 在 VS Code 中格式化我的代码，但我真的不喜欢它的工作方式。

我的主要不满是它将属性拆分为多行。

<input
    type="checkbox"
    name="asiaNews"
    id="asiaNews"
    value="asiaNews"
/>

我更喜欢它看起来像这样

<input type="checkbox" name="asiaNews" id="asiaNews" value="asiaNews" />

我在 docs 或 SO

中找不到任何内容

How to prevent VS Code from breaking up long HTML lines into multiple lines?

有什么方法可以做到这一点，或者我可以使用其他工具来拥有适合我个人感受的自定义格式设置规则吗？

Answer 1

经过多次尝试，我想出了以下解决方案。

这是我的 settings.json 经过上述更改后的样子。

{
  "editor.formatOnSave": true,
  "html.format.wrapLineLength": 100,
  "prettier.disableLanguages": ["html"]
}

这将尝试仅在长度大于 100 时包装 HTML 属性。好处是即使长度超过100，也不会把每个属性换行。

Answer 2

快速解决方法是转到 Prettier Extension 设置 (ctrl + shift + X)，然后在 Prettier Extension 设置中搜索“打印宽度”，将其设置为 250 或任何适合您的值。

1：转到扩展设置：

2：根据自己的喜好更改打印宽度的值。

在保存时禁用格式代码。关闭“保存时格式化”并使用 Alt+Shift+F 随时格式化代码。

您可以目测设置here

Answer 3

将此行添加到设置 JSON 以增加最大线宽，

  "prettier.printWidth": 160,

Answer 4

在位于您项目中的 .prettierrc.json 中添加新规则：

{
    printWidth": 160,
}

Answer 5

{"printWidth": 100} 在 prettierrc.json 中就足够了。

Answer 6

我的解决方案是卸载 prettier！！并安装 ESLint 和 typeScript 扩展。它带有一个基本的格式化程序，它完全符合我的要求。您可以通过在设置中搜索格式化程序来禁用和启用它们

Answer 7

发生这种情况是因为 prettier 假设您希望代码宽度为 80 个字符，只是因为它们的默认设置。

所以你应该告诉 prettier 我喝多了 space.

要做到这一点，只需在根文件夹中创建 .prettierrc.json 文件并添加

{
 "printWidth": 600
}

并保存您的文件。这将解决您的问题。

How do you stop Prettier in VS code splitting attributes onto multiple lines?