Validate HTML

Options

plugins any

List of plugins to load

See https://html-validate.org/usage/#plugins

extends string[]

List of configuration presets to extend.

See https://html-validate.org/usage/#extends

Default:

[ "html-validate:recommended", "html-validate:document" ]

rules any

Rules configuration

See https://html-validate.org/usage/#rules

Default:

{
  "doctype-style": "off",
  "attr-quotes": "off",
  "no-trailing-whitespace": "off",
  "void-style": "warn",
  "require-sri": [ "error", { target: "crossorigin" } ]
}

output string function

Customize the report output

Description

This plugin uses HTML-validate package to check the HTML code and create a new tab in the debug bar with the detected issues.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import validateHtml from "lume/plugins/validate_html.ts";

const site = lume();

site.use(validateHtml(/* Options */));

export default site;

Output

The report is visible in the debug bar but you can use the output option to export the list of broken links to a JSON file:

site.use(validateHtml({
  output: "_html-issues.json",
}));

Or use a function for a custom output:

site.use(validateHtml({
  output: (reports) => {
    if (reports.valid) {
      console.log("No HTML errors found");
    } else {
      console.log(`${reports.errorCount} HTML error(s) found.`);
    }
  },
}));