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
}

Answer 1

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