如何在 VS 代码拆分属性中阻止 Prettier 到多行？答案

【问题标题】：How do you stop Prettier in VS code splitting attributes onto multiple lines?如何在 VS 代码拆分属性中阻止 Prettier 到多行？
【发布时间】：2019-10-10 23:22:37
【问题描述】：

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

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

<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?

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

【问题讨论】：

我认为这一定与您的printWidth 设置有关，因为如果您超过printWidth 限制，它只会将您的属性分成多行。你可以在更漂亮的操场上进行测试：prettier.io/playground 如果你超过了printWidth，我认为你不能做任何事情来防止属性在使用 prettier 时跨越多行。

标签： html visual-studio-code formatting prettier

【解决方案1】：

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

对 html 文件禁用 prettier 并使用默认格式化程序由 VS 代码提供。
根据要求设置行长。（一世将其设置为 100)

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

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

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

【讨论】：

【解决方案2】：

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

1：转到扩展设置：

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

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

您可以直观地检查设置here

【讨论】：

【解决方案3】：

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

  "prettier.printWidth": 160,

【讨论】：

【解决方案4】：

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

{
    printWidth": 160,
}

【讨论】：

【解决方案5】：

prettierrc.json 中的{"printWidth": 100} 已经足够好了。

【讨论】：

【解决方案6】：

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

【讨论】：

在尝试了各种方法并被烦了几个月之后，这救了我！感谢您发布此信息！ :D

【解决方案7】：

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

所以你应该告诉漂亮的我有太多的空间。

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

{
 "printWidth": 600
}

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

【讨论】：