Formatierung von HTML/CSS in Visual Studio Code

[Martinus33]

Hallo,
HTML-Code in VSC formatieren, dazu wird gerne die Extension Prettier Code Formatter empfohlen.
Es formatiert HTML-Code, CSS, alles Mögliche, wobei es mir nur um HTML und CSS geht.

Meine Webseiten sind vor allem textlastige Infoseiten, viele Überschriften, Absätze, Bilder, Textlinks usw.

Das bei jedem YT-Video empfohlene Prettier macht mit einem ganz normalen Textabsatz aber das Folgende, was die beiden Bilder zeigen. Mache ich da etwas falsch? Mehr als Installieren und dann ausführen per Einzelfall oder Speicheraktion kann man doch nicht machen.

Vorher:



Nachher, also "formatiert":

 

[chris221177]

Hallo,
Du kannst Prettier über eine Datei konfigurieren: https://prettier.io/docs/configuration
Soweit ich weiß, funktioniert VSC mit einer ".prettierrc"
Dazu gibt es folgende Optionen: https://prettier.io/docs/options
Der Umbruch innerhalb Deiner Tags ist hier zu finden: https://prettier.io/docs/options#print-width

 

[Martinus33]

Ich glaube, das übersteigt meine Fähigkeiten.

Aber diese Art von "Formatierung" ist also tatsächlich so beabsichtigt? In einem Fließtext bekommt jedes Attribut eines Links eine eigene Zeile und die Endklammer (!) des a-Endtags eine eigene Zeile etc.

Es gibt offenbar noch eine bulit-in-Formatierung, die mit einem Shortcut gestartet werden kann, mit der sieht es etwas besser aus, aber auch da bekommen Link-Attribute eine eigene Zeile.
Der Formatter hat scheinbar keinen Namen, sondern ist laut https://code.visualstudio.com/docs/editor/codebasics#_formatting
einfach nur "html.format"?
In den Einstellungen wird auf eine json verwiesen, dort habe ich a-tags als nicht zu formatieren eingegeben, siehe Anhang, scheint aber nur manchmal zu klappen, meist sind die Attribute immer noch auf einer eigenen Zeile.

 

[dewa]

Was stört dich denn an der Formatierung? Sie macht den Quellcode leserlicher. In der gerenderten HTML Ansicht wird man die Einrückung und Zeilenumbrüche innerhalb des <p> nicht sehen

 

[Martinus33]

Du findest das echt leserlich?

Wenn jeder p-Starttag eine eigene Zeile ohne Text daneben bekommt und kleine Inline-Tags wie z.B. a wie große Strukturelemente behandelt werden und neue Zeilen bekommen, ja sogar deren Attribute zusätzlich auch noch neue Zeilen bekommen und zu guter letzt sogar noch ein einzelnes Zeichen eine eigene Zeile, nämlich ">" vom a-Endtag (kein Fehler?), dann ist das in meinen Augen kein leserlicher Code.

In HTML-Code sollen Zeilen max. 80 Zeichen haben und werden dann umgebrochen, obwohl fast jeder word wrap "on" einstellt und mind. einen 24-Zoll-Monitor hat. Gerade bei Lesetext in HTML-Code ist das IMHO nicht hilfreich. Beim Besucher, der die Seite im Browser liest, ist das was anderes, aber beim Coden liest du selbst den Text dort nicht, sondern wie ein Besucher die Darstellung im Browser.

Prettier bläht damit einen Code von ca. 300 Zeilen auf ca. 1200. Und ein großer Teil dieser 1200 Zeilen hat verschenkten weißen Platz rechts.

"html.format.contentUnformatted": "a,img",
"html.format.unformatted": ""

für den built-in-formatter scheint mir weitgehend zu helfen.

In den Einstellungen von VSC heißt es bez. der zweiten Zeile, dass null als default allen kleinen phrasing-Elementen entspricht.
Mit null ist eine leere Liste in den Anführungszeichen gemeint?

Hat jemand Erfahrungen mit diesem built-in-formatter, weil 55 Mio downloads von Prettier und den VSC-eigenen nutzt fast keiner, hm.