isabella232 / linthtml

The html5 linter and validator.

LintHTML

An unofficial HTML5 linter and validator.

LintHTML is a fork of htmllint featuring a built-in CLI and multiple bug fixes and improvements. The migration from htmllint to LintHTML is easy, as all htmllint's rules can be used with LintHTML – just follow this simple guide.

Installation and Usage

You can install LintHTML either locally or globally. For most cases we recommend the former, which can be achieved this way with npm:

npm install @linthtml/linthtml --save-dev

You should then init a configuration file:

npx linthtml --init

This will generate a file .linthtmlrc in the current directory.

After that, you can run LintHTML on any file or directory like this:

npx linthtml 'yourfile.html'
npx linthtml 'src/**/*.html'

If you want to read about alternative installation and usage methods, have a look at the extended section in docs/installation_and_usage.md.

Migrate from htmllint

To migrate from htmllint to LintHTML, first remove all the htmllint-related packages you were using:

npm uninstall htmllint htmllint-cli

Then rename the file .htmlintrc to .linthtmlrc. You might want to remove the rules indent-delta and indent-width-cont from there in case you where using them, since LintHTML's indent style checker deals with those aspects out of the box.

Finally, install LintHTML:

npm install @linthtml/linthtml --save-dev

Rules

Current list of rules and deprecations can be found in docs/rules.md.

Global Configuration

By default, LintHTML will look for a JSON, YAML or JavaScript file named .linthtmlrc.* or a linthtmlConfig section in package.json. Anyway, you can specify a custom configuration file using the --config option when running LintHTML in the command line.

Inline Configuration

Sometimes it is necessary to disable certain rules for a specific line, block or HTML file. This might be the case, for example, for an inline SVG block of code. This can be achieved with inline configurations.

Inline configurations are HTML comments beginning with the keyword linthtml-configure:

<!-- linthtml-configure [rule]="[value]" -->

Multiple rules can be set in a single inline configuration comment. Values must be surrounded with double/single quotes if they contain spaces, and must be either a valid value for the rule (encoded in pretty-much-JSON), or the string $previous (which is special value that recalls the former value of the rule for your convenience).

Some examples:

• turn off the attr-bans rule

<!-- linthtml-configure attr-bans="false" -->
<!-- linthtml-configure attr-bans=false -->
<!-- linthtml-configure attr-bans="off" -->

• turn on the attr-bans rule

<!-- linthtml-configure attr-bans="true" -->
<!-- linthtml-configure attr-bans=true -->

⚠️ you can only turn on rules that have being deactivated by an inline config

• change the tag-bans rule value

<!-- linthtml-configure tag-bans="['p','style']" -->
<!-- linthtml-configure tag-bans=['p','style'] -->

• restore the previous value of the tag-bans rule

<!-- linthtml-configure tag-bans="$previous" -->

⚠️ works only with the legacy config at the moment

It's worth noting that inline configurations only affect the file they're on, so if they are not explicitly reversed with the $previous value, they will just apply until the end of the file.

Ecosystem

Apart from the built-in CLI, you might want to use some of the following tools to integrate LintHTML in different scenarios:

• vscode-linthtml: an extension for the VSCode IDE
• gulp-linthtml: a gulp interface for LintHTML

🚧 Coming soon:

• linthtml-loader: LintHTML loader for webpack
• broccoli-linthtml: Integrates HTML linting with LintHTML as part of your Broccoli build pipeline

Contributing

Contributions are welcome, please make sure to use the proper GitHub tag on your issue/PR.

• cli: anything related to LintHTML's CLI
• rule: anything related to the rules (bugs, improvements, docs, new rules...)
• core: anything related to LintHTML's core (file parsing, plugin system...)