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

Question

当我的具有属性的元素变长时，VS Code 似乎将行分成多行：

（我想要三行而不是七行，每个元素一行）

我使用 prettier 进行格式化，并设置了printWidth在 javascript 代码中工作的选项，但对于 HTML，它似乎被 VS Code 覆盖。

我试过摆弄wrapAttributes和html.format.wrapLineLength设置，但这些似乎都没有任何效果。

如何处理这件事？

更新：

非常感谢你的回答。我还没有收到他们的通知，很抱歉没有采取行动。

我已经尝试了您的所有建议，但问题仍然存在。这是我根据您的建议当前的配置。

设置.json：

"html.format.wrapLineLength": 0,
"html.format.enable": false,
"html.format.wrapAttributes": "auto",  
"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
        "printWidth": 300,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}

.prettierrc.json：

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 300,
    "tabWidth": 2,
    "useTabs": true,
    "jsxBracketSameLine": true
}

Answer 1

您可以"html.format.wrapLineLength": 0在 settings.json 中添加。

Answer 2

这对我有用...

在您的“Settings.json”文件中添加行

"prettier.printWidth": 300

Answer 3

我不确定这是否只是内置的 HTML 格式设置，但您可以尝试一下。

如果您不想为 HTML 启用包装：

"html.format.wrapAttributes": "auto",  # wrap only when line length is exceeded
"html.format.wrapLineLength": 0,       # disable max chars per line

如果您有其他 HTML 格式化程序扩展，您可以简单地禁用内置：

"html.format.enable": false,

如果您的 HTML 仍然与*.wrapdisabled 或html.format.enablefalse 分开，那么导致它的不是内置的 VS 代码设置。

Answer 4

Settings -> Extensions -> HTML:
Format: Wrap Line Length
Maximum amount of characters per line (0 = disable).
0

那对我有用。

Answer 5

这就是我所做的。我.prettierrc.json在项目文件夹中创建了文件。然后添加以下设置。

{
  "html.format.wrapAttributes": "auto",
  "html.format.wrapLineLength": 0,
  "printWidth": 1000
}

这里的设置printWidth很重要。根据您的喜好增加/减少它，因为您无法完全禁用它。