html-lint
A meaningful static analysis tool for HTML
html-lint is a linter for HTML files. It uses reshape to analyse your HTML and provides feedback to make your HTML better.
Features
- Only meaningful rules
- Fully extensible using custom rules
- Contextual feedback
Installation
yarn add -D @coyote-labs/html-lintUsage
node_modules/.bin/html-lint build/**/*.htmlYou can also use this programmatically.
const { htmlLint } = require('@coyote-labs/html-lint');
(async() => {
try {
// it accepts glob patterns or an array of file paths.
await htmlLint('dist/*.html');
} catch (error) {
console.log(error)
}
})();
Configuration
Project Level
html-lint loads the following configuration files if they are present:
- An
html-lintproperty in package.json. - A
.html-lintrcfile in JSON or YAML format. - A
.html-lintrc.json,.html-lintrc.yaml,.html-lintrc.yml, or.html-lintrc.jsfile. - A
.html-lint.config.jsfile exporting a JS object.
The configuration file can be used to toggle rules. The allowed levels
are on, off and warn.
For example,
{
'doctype-first': 'on',
'class-ad-disabled': 'off',
'src-not-empty': 'warn'
}You can also use this file to configure custom rules, if any.
{
'class-ad-disabled': 'off',
'custom-rules': {
'dir': 'my-custom-rules',
'rules': {
'custom-rule-one': 'error',
'custom-rule-two': 'warn'
}
}
}File Level
File level rule configuration is also possible. For example,
<!-- html-lint doctype-first:warn, id-ad-disabled:off -->
<html>
<head>
<title>Hello</title>
</head>
<body>
<main class="sponsors">
<ul>
<li id="company-ad">Company A</li>
<li id="company">Company B</li>
</ul>
</main>
</body>
</html>