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

Question

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

我的主要问题是它将属性拆分为多行。

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

我更喜欢它看起来像这样

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

我在文档或 SO 上找不到任何内容

如何防止 VS Code 将长 HTML 行分成多行？

有没有办法做到这一点或我可以使用不同的工具，以便我可以拥有适合我的感受的自定义格式规则？

Answer 1

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

所以你应该告诉更漂亮的我空间太大了。

为此，只需在根文件夹中创建.prettierrc.json文件并添加

{
 "printWidth": 600
}

并保存您的文件。这将清除您的问题。

Answer 2

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

  "prettier.printWidth": 160,

Answer 3

快速解决方法是转到更漂亮的扩展设置（ctrl + shift + X）并在更漂亮的扩展设置中搜索“打印宽度”将其设置为 250 或任何适合您的值。

1：进入扩展设置：

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

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

您可以在此处目视检查设置

Answer 4

在尝试了很多之后，我想出了以下解决方案。

1. 禁用 prettier for html 文件并使用 VS code 提供的默认格式化程序。
2. 根据要求设置线长。（我设置为100）

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

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

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

Answer 5

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

Answer 6

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

Answer 7

您需要取消选中“Prettier：每行单一属性”复选框

Answer 8

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

{
    printWidth": 160,
}