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

Question

我正在使用漂亮的代码在VS Code中格式化我的代码，但我真的不喜欢它是如何做到的。

我的主要牛肉是将属性拆分为多行。

MyAbstractClass

我更希望它看起来像这样

<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

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

1. 对html文件禁用更漂亮，并使用默认格式 VS代码提供。
2. 根据要求设置线长。 （一世 将其设置为100）

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

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

仅当长度大于100时，这才会尝试包装HTML属性。 好消息是，即使长度超过100，也不会将每个属性都换行。

Answer 2

一种快速的解决方法是转到“更漂亮的扩展程序设置”，然后搜索“打印宽度”，将其设置为250，以适合您的需要。

您可以直观地检查设置here

Answer 3

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

  "prettier.printWidth": 160,

Answer 4

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

{
    printWidth": 160,
}

Answer 5

{"printWidth": 100} 中的

prettierrc.json 已经足够好了。

Answer 6

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