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

【问题标题】：How to prevent VS Code from breaking up long HTML lines into multiple lines?如何防止 VS Code 将长 HTML 行分成多行？
【发布时间】：2019-09-30 09:31:23
【问题描述】：

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

（我希望这里是三行而不是七行，每个元素一行）

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

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

这件事怎么处理？

更新：

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

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

settings.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
}

【问题讨论】：

没有一个答案符合您的要求吗？

标签： html visual-studio-code vuejs2 formatting vetur

【解决方案1】：

我不确定这是否只是内置的 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 仍然在 *.wrap 禁用或 html.format.enable false 的情况下分解，则不是内置的 VS 代码设置导致它。

【讨论】：

谢谢。我试过你的建议，但没有任何效果。如果我禁用 html 格式，保存 html 文件的所有其他好处都将丢失，因此没有另一个插件可以处理 html 格式：/
仅"html.format.enable": false, 在 200 多个字符之后。谢谢

【解决方案2】：

检查您的扩展，因为我认为 VS 代码编辑器默认没有自动中断功能。也许您安装了一个具有自动换行符的扩展程序。希望对您有所帮助

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

这对我有用。

【讨论】：

【解决方案5】：

这个问题让我发疯了，因为我讨厌我的代码包装我觉得它很难阅读。我读了很多东西，无法让我的代码停止包装。因此，如果您尝试了已经提到的所有内容并且您的代码仍然包装，那么您有一个导致它包装的扩展。所以去文件>首选项>设置

然后单击您的扩展程序并浏览它们并找到导致它们换行的那个。在我的情况下，我使用 Prettier 使用 Vetur（一个 Vue 扩展），这导致我的代码被包装。

您还可以做的和我现在要做的就是安装 Prettier 并将其上的打印宽度设置为屏幕的宽度，这样任何更长的时间都会中断，但在大多数情况下，它会为您将内容保持在同一行。

【讨论】：

【解决方案6】：

这对我有用...

在您的 "Settings.json" 文件中添加该行

"prettier.printWidth": 300

【讨论】：

【解决方案7】：

您应该检查 Visual Studio 代码的扩展并禁用“JS-CSS-HTML 格式化程序”或任何其他有问题的格式化程序

【讨论】：

【解决方案8】：

这一行可以有所作为，它对我有用.. "vetur.format.defaultFormatter.html": "none",

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

在拆分到新行方面，我的情况略有不同。当格式化包含大量 HTML 的文档时，它会将长段文本包装成多行并自动添加空格/制表符缩进。

我在 settings.json 中添加了以下内容：

"html.format.unformattedContentDelimiter": "p, li",

这将<p> 和<li> 标记内的所有文本保持在一行，而不会引入空白字符。然后，您可以使用带有 alt + z 的 VSCode 原生文本换行来直观地在不引入空白字符的情况下换行。

【讨论】：

【解决方案11】：

在我的情况下，我在我的 html 中使用了 SVG。每当我使用Ctrl + Shift + I 格式化我的 HTML 文档时，它都会将 SVG 拆分成多行，如下所示：

<svg id="logo-1" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53"></path>
    <path d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 "></path>
    <path d="M82.16 12.19C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 "></path>
</svg>

而我希望它们在单行中并且仍然格式化我的文档。

我的解决方案：

选择要转换为单行的 SVG。然后按F1 并输入Join Lines 并回车。
将所有 SVG 转换为一行后，按F1。输入Open Settings (JSON) 并打开设置文件并在末尾添加以下条目：

"html.format.contentUnformatted": "svg"

现在格式化文档不应将 SVG 拆分为多行。

PS：当然，它可以是任何其他的html标签。

【讨论】：

【解决方案12】：

如果您使用的是 VSCode，请将其放入您的 .code-workspace 文件中：

"settings": {
    "editor.defaultFormatter":"octref.vetur",
    "vetur.format.defaultFormatter.html":"prettyhtml",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "printWidth": 500,
        }
    },
}

【讨论】：