This extension gives you reasonable diagnostics and autoformatting on HTML files.

NOTE: you will need to get the super CLI tool and have it available in your PATH (or set the path manually in your VSCode settings)!

For prebuilt binaries and more info: https://github.com/kristoff-it/super-html

This language server is stricter than the HTML spec whenever it would prevent potential human errors from being reported.

As an example, HTML allows for closing some tags implicitly. For example the following snipped is correct HTML.

<ul>
  <li> One
  <li> Two
</ul>

This will still be reported as an error by SuperHTML because otherwise the following snippet would have to be considered correct (while it's much probably a typo):

<h1>Title<h1>

The autoformatter has two main ways of interacting with it in order to request for horizontal / vertical alignment.

1. Adding / removing whitespace between the start tag of an element and its content.
2. Adding / removing whitespace between the last attribute of a start tag and the closing >.

Before:

<div> <p>Foo</p></div>

After:

<div> 
    <p>Foo</p>
</div>

Before:

<div><p>Foo</p>
</div>

After:

<div><p>Foo</p></div>

Before:

<div foo="bar" style="verylongstring" >
    Foo
</div>

After:

<div 
   foo="bar" 
   style="verylongstring" 
>
    Foo
</div>

Before:

<div 
   foo="bar" 
   style="verylongstring">
    Foo
</div>

After:

<div foo="bar" style="verylongstring">
    Foo
</div>