Skip to main content

LintHTML

npm version license codebeat badge Coverage Status

The HTML5 linter and validator you need.

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 to the installation and usage page in the documentation.

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 were 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​

The list of current rules and deprecations can be found in here.

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. See our documentation about configuration to see how to configure rules, use custom parser, plugins...

Inline Configuration​

Sometimes it is necessary to disable a rule or tweak the configuration 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 by using inline configurations.

Inline configurations are HTML comments beginning with the keyword linthtml-XXX.

XXX can be replaced with the following values, which are called instructions. Instructions have different effects:

  • configure : change a rule configuration for the HTML nodes that follow
  • enable : activate a rule which was has deactivated previously
  • disable : disable a rule

Configure instruction​

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 a special value that recalls the former value of the rule for your convenience).

Some examples:

  • change the tag-bans rule value
<!-- linthtml-configure tag-bans="['p','style']" -->
<!-- linthtml-configure tag-bans=['p','style'] -->
  • turn off the attr-bans rule
<!-- linthtml-configure attr-bans="false" -->
<!-- linthtml-configure attr-bans=false -->
<!-- linthtml-configure attr-bans="off" -->

We recommend using the enable/disable instructions instead 😉

  • turn on the attr-bans rule
<!-- linthtml-configure attr-bans="true" -->
<!-- linthtml-configure attr-bans=true -->

⚠️ you can only turn on rules that have been deactivated by an inline config We recommend using the enable/disable instructions instead 😉

  • restore the previous value of the tag-bans rule ⚠️ works only with the legacy config at the moment
<!-- linthtml-configure tag-bans="$previous" -->

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:

🚧 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...)