VSCode HTML attribute formatting-CodePudding

<!-- As you can see, the element is broken into new lines, I saw this HTML style formatting somewhere but I dont know what it is called and how to turn it off. I am using VSCODE and have extensions such as Prettier installed. Thanks -->

<div 
  
 >
    <p>lorem ipsum</p>
</div>

<!-- My desired style: -->

<div >
    <p>Lorem Ipsum</p>
</div>

[enter image description here][1]

I have ESLint and prettier installed, and I'm pretty sure these extensions cause this style formating that I don't like. HOw do I turn it off? [1]: https://i.stack.imgur.com/wzs5O.png

CodePudding user response：

Exactly, prettier auto split your attribute base on Print Width property.

To change config please go to Prettier Extension Settings (ctrl shift X) and in Prettier Extension Settings search for "Print Width" set it to 250 or anything that works for you.

The answer for your question maybe here: Is there a config in prettier to keep line breaks?

CodePudding user response：

Press (CRL ,) and click (Edit in settings.json). Add the bellow line.

[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},