html - 如何防止 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
}

score 39 · Accepted Answer

39

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

于 2019-07-19T19:17:10.103 回答

score 14 · Accepted Answer

14

这对我有用...

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

"prettier.printWidth": 300

于 2020-07-30T23:37:25.820 回答

score 13 · Accepted Answer

我不确定这是否只是内置的 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 代码设置导致它。

score 11 · Accepted Answer

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

这对我有用。

score 5 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

在我的情况下，我在我的 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标签。

score 0 · Accepted Answer

My situation differed slightly in terms of what was being split onto new lines. When formatting documents with large chunks of HTML it would wrap long paragraphs of text up onto multiple lines and automatically add space/tab indentation.

I added the following into my settings.json:

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

This kept all text within <p> and <li> tags on one line without introducing whitespace characters. You can then use VSCode native text wrapping with alt + z to visually wrap the text without introducing whitespace characters.

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

你也可以做，我现在做的是安装 Prettier 并将其上的打印宽度设置为屏幕的宽度，这样任何更长的东西都会中断，但在大多数情况下，它会让你的东西保持在同一行。

score -1 · Accepted Answer

-1

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

于 2021-05-15T06:32:18.183 回答

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

12 回答 12

Related

Reference