HTMLHint

Along with our recent release of using Prettier for code formatting, we've also now upgraded our HTML linter to use HTMLHint instead of html-inspector. Interestingly, they have about the same number of stars on GitHub, but html-inspector is archived and no longer maintained while HTMLHint is actively maintained.

You use it by selecting Analyze HTML from the editors actions menu.

For us, it also meant being able to send off your HTML to our own service, just like we do with all our preprocessors. We weren't doing that with html-inspector as it was meant to be injected into the DOM to run and we had a fancy little process for doing that. It's much better this way for security and consistent handling of code services on our end.

Config

This is for all Pens on the entirely of CodePen, it can't be customized on a per-Pen or per-Account basis. Here's how we have it set up:

{
  'alt-require': true,
  'attr-lowercase': true,
  'attr-no-duplication': true,
  'attr-unsafe-chars': true,
  'attr-value-double-quotes': true,
  'attr-value-not-empty': false,
  'doctype-first': false,
  'doctype-html5': false,
  'empty-tag-not-self-closed': false,
  'head-script-disabled': false,
  'href-abs-or-rel': true,
  'id-class-ad-disabled': false,
  'id-class-value': false,
  'id-unique': true,
  'inline-script-disabled': false,
  'inline-style-disabled': false,
  'space-tab-mixed-disabled': 'space',
  'spec-char-escape': true,
  'src-not-empty': true,
  'style-disabled': false,
  'tag-pair': true,
  'tagname-lowercase': true,
  'title-require': false
}

I post this mostly because we've already had to make some small changes to it after release. For example, we had a value set for id-class-value that is meant to be an opinionated way you should name your ids and classes. That doesn't make sense on CodePen. Y'all can do whatever you like with naming. This is more about finding things in your HTML that are almost certainly a mistake or would cause a problem.

The post HTMLHint appeared first on CodePen Blog.