How to prevent VS Code from breaking up long HTML lines into multiple lines?

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
}

Develop

Did none of the answers do what you required? – Weatherwise

Answer 1

You can add "html.format.wrapLineLength": 0 in settings.json.

Carlisle

This solution worked out for me. { "explorer.confirmDelete": true, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "eslint.validate": [ "javascript" ], "diffEditor.ignoreTrimWhitespace": false, "html.format.wrapLineLength": 0, } – Budd

Answer 2

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.

Emogeneemollient

Thanks. I´ve tried your suggestions, but it does not have any effect. If i disable html formatting, all of the other benefits of saving html files is lost, so there is not another plugin that handles html formatting :/ – Develop

Only "html.format.enable": false, after 200+ characters. Thanks – Indefinite

Answer 3

This worked for me...

In your "Settings.json" file add the line

"prettier.printWidth": 300

Sternforemost

Answer 4

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

That worked for me.

Presently

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.

Agripinaagrippa

Answer 6

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.

Fredericksburg

Answer 7

Editorconfig Plugin

When you have the editorconfig Plugin installed in VSCode and a config file named: .editorconfig is present in the root folder of your project, settings in: ./vscode/settings.json will be overwritten in some cases.

For example: "prettier.printWidth": 1250 settings in ./vscode/settings.json is useless when having a .editorconfig file. Even if there is no setting for it.

To change line widths set: max_line_length = 300for example in .editorconfig

Read more about editorconfig rules: https://editorconfig.org

Menorah

Answer 8

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

Devoid

Answer 9

You should check extensions of visual studio code and disable "JS-CSS-HTML Formatter" or any other formatter that is bothering

Chaim

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.

Greathearted

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.

Tapdance

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

Alo

Can you try explaining why. – Carrot

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!

Atalya

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

Potsdam

Answer 15

"html.format.wrapAttributes": "preserve-aligned" 

Is what I have been looking for for to long - only spacing will be done but you are in control of line-breaks

Flyer

Answer 16

this one line can make difference it works for me.. "vetur.format.defaultFormatter.html": "none",

Sotted

Answer 17

from settings
Editor: Word Wrap choose: off

Chaddy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Erebus