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

Question

When my elements with attributes get long, VS Code seems to break the line up into multiple lines:

(I would like three lines here instead of seven, one line per element)

I am using prettier for formatting, and have set the printWidth option which works in javascript code, but for HTML it seems to be overridden by VS Code.

I´ve tried fiddling around with the wrapAttributes and the html.format.wrapLineLength settings, but none of those seem to have any effect.

How to deal with this matter?

UPDATE :

Thanks alot for your answers. I havent been notified by them, so sorry for not taking action.

I´ve tried all of your suggestions, but the problem remains the same. This is my current config based on your suggestions.

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
}

Answer 1

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

Answer 2

This worked for me...

In your "Settings.json" file add the line

"prettier.printWidth": 300

Answer 3

I'm not sure if it's just the built-in HTML formatting settings but you can give this a try.

If you don't want to enable wrapping for HTML:

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

If you have other HTML formatter extensions, you can simply disable the built-in:

"html.format.enable": false,

If your HTML is still breaking-up with the *.wrap disabled or with html.format.enable false, then it's not the built-in VS code settings that's causing it.

Answer 4

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

That worked for me.

Answer 5

Here is what I did. I created .prettierrc.json file inside project folder. And then added below settings to it.

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

The printWidth setting is important here. Increase/Decrease it as per your preferences as you can not disable it completely.

Answer 6

check your extension because i think VS code editor default don't have a auto break function. maybe you install a extension that have a auto break line. hope this help

Answer 7

This problem was driving me crazy because I hate when my code wraps I feel like it is so much harder to read. I read a ton of stuff and couldn't get my code to stop wrapping. So if you tried everything already mentioned and your code still wraps then you have an extension that is causing it to wrap. So go to File>Preferences>Settings

Then click on your extensions and go through them and find which one is causing them to wrap. In my case I had Vetur(a Vue extension) using Prettier which was causing my code to wrap.

What you could also do and what I do now is install Prettier and set the Print Width on that to the width of your screen so anything longer will break but for the most part it will keep stuff on the same line for you.

Answer 8

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

Answer 9

这一行可以改变它对我"vetur.format.defaultFormatter.html": "none", .. "vetur.format.defaultFormatter.html": "none",

Answer 10

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.

Answer 11

In my situation I was using SVG in my html. And whenever I used Ctrl + Shift + I to format my HTML document, it would split the SVGs into multiple lines like this:

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

Whereas I wanted them to be in single line and still format my documents.

My solution:

1. Select the SVG you want to convert to single line. Then press F1 and type Join Lines and hit enter.

2. After converting all SVGs into one line, Press F1 . Type Open Settings (JSON) and open the settings file and add the following entry at the end:

   "html.format.contentUnformatted": "svg"

Now formatting your document should not split your SVGs into multiple lines.

PS: of course, it can be any other html tag.

Answer 12

If you're using VSCode, put this in your .code-workspace file:

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

Answer 13

After a long try, I made it work while working with Vue.js , this is my config.json

{
  "html.format.wrapAttributes": "auto",
  "html.format.wrapLineLength": 0,  
  "prettier.printWidth": 300,
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },  
}

Do not move anything else, lol. Good luck!

Answer 14

I'm a fan of prettier I wouldn't prefer another formatter over prettier,

so the most neat solution I've found is in vscode settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.format.wrapLineLength": 0,
  "html.format.wrapAttributes": "auto",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  }
}

this disables prettier only for html files and uses default vscode html formatter which is in html quite similar to prettier, and using prettier anywhere else, BTW in this case the formatonsave feature is enabled and works for html files as well that's why I like it