0

<!-- 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 
  class="container"
 >
    <p>lorem ipsum</p>
</div>

<!-- My desired style: -->

<div class="container">
    <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

micxav
  • 1
  • 1
  • check if you have installed a new extension like HTML document formatter or prettier. remove it. Right-click and select the "Format with" you will see a list of document formatter. – Mehrwarz Mar 04 '22 at 07:50

2 Answers2

0

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?

Hoàng Nguyễn
  • 75
  • 1
  • 12
0

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

[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
Mehrwarz
  • 413
  • 1
  • 10