How we started linting HTML files

Realistically, in any large collection of code, rot will inevitably occur over time. Human error will cause small, absentminded mistakes.  Code will become disused, and if not removed, will end up polluting the code-base with dead code.  Typos happen, and merge conflict resolution will produce unintended consequences.

This is why we format code.  It's a great step to try to make code more human friendly, and makes projects massively more pleasurable to work with, and easier to maintain.  But by itself, formatting does have some issues.  Everyone has slightly different programming habits.

A team that aims for unity may still easily end up with very different formatting.  One person is used to single quotes, and another uses double quotes for strings.  Somebody has a C# background, and writes variable names in PascalCase, and another with a JS background writes them in camelCase.

In JS, these problems are well handled by ESLint.  But with HTML, the landscape is a bit more fragmented.  We considered using Prettier (which I still am a big fan of), which reformats code for you on the fly, whether it is JS or HTML.

One of the great strengths of Prettier is that it is strongly opinionated, meaning that any team can drop it into a project, and have a world-class formatting style applied to their code in minutes.  However, this opinionation also means that it couldn't be made to align with exactly the style our team wanted (unlike the more configurable ESLint).  

Also, Prettier doesn't lint.  It just formats.  This means that although it can gradually shift a code-base to a single style, it won't actually enforce the style.

Because of this, we opted for a different HTML formatting solution.  We chose htmlhint, because we wanted a dedicated, configurable option that would lint HTML, not just format it.  

We used husky to run html linting as a pre-commit hook.  This allows for us to check our html when a commit is attempted, and stop the commit from occuring if the html has errors.  

This great way of improving the solidity of our technical infrastructure did take a while (a day or two), but it was 100% worth it, and will easily be paid back 10x by improved efficiency in the future.

If you're interested in checking out htmlhint, I made an example repository that shows a simple htmlhint setup, and will point you in the right direction.