LintHTML

An unofficial html5 linter and validator.

LintHTML is a fork of htmllint with an integrated CLI, all htmllint's rules can be used with LintHTML. The migration from htmllint to LintHTML is easy, just follow this guide.

Installation and Usage

Prerequisites:

Node.js 6+
npm version 3+

There are two ways to install LintHTML: globally and locally.

Local Installation and Usage

If you want to include LintHTML as part of your project's build system, we recommend installing it locally. You can do so using npm or yarn:

npm install @linthtml/linthtml --save-dev

# or

yarn add linthtml --dev

You should then init a configuration file:

./node_modules/.bin/linthtml --init

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

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

./node_modules/.bin/linthtml yourfile.html

Global Installation and Usage

If you want to make LintHTML available to tools that run across all of your projects, we recommend installing LintHTML globally. You can do so using npm or yarn:

npm install -g @linthtml/linthtml
# or

yarn global add linthtml

You should then init a configuration file:

linthtml --init

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

linthtml yourfile.html

Rules

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

Rules can be configured using a JavaScript, JSON or YAML file. This can be in the form of an .linthtmlrc.* file or an linthtmlConfig field in a package.json file, both of which LintHTML will look for and read automatically, or you can specify a configuration file on the command line using the --config option.

Inline Configuration

Sometimes it is necessary to use use a different rules configuragatin for different parts of an html document. For exemple a part of the page is written in an html-like language like svg that has different linting standards. Inline configurations allows you to turn on or off certain rules for any line while linting.

Format of Inline Configurations

Inline configurations are html comments, but are formatted like self-closing html tags:

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

In order for an inline configuration to be recognized, it must be an html comment enclosed with  and begin with the keyword linthtml-configure.

Configurations must also use valid html attribute formatting. An unlimited number of attributes are allowed in an inline configuration and each rules will be applied in order. Inline configurations only apply to the file they are located in, and will not roll over to other files.

Values may be quoted using either double or single quotes, or may be left without quotes if they contain no spaces. In any case, we will refer to the string, ignoring surrounding quotes, as the "value" to be assigned to the option.

To specify an inline configuration for a rule, use one of this two thing :

A value for the rule, encoded in pretty-much-JSON.
The string $previous.

Rule value

To modify a single rule, use an attribute with that rule's name and the value you wish to assign to it.

<!-- turn off rule `tag-bans` -->
<!-- linthtml-configure tag-bans="false" -->

<!-- Specify a config for the  `tag-bans` rule -->
<!-- linthtml-configure tag-bans="['p','style']" -->

$previous

Each rule's previous value (if any) is stored, and may be recalled using $previous. This is useful if an option should be temporarily disabled or changed, since the value it was at before being changed is not always easy to determine.

<!-- turn off rule `tag-bans` -->
<!-- linthtml-configure tag-bans="false" -->

<!-- turn on rule `tag-bans` -->
<!-- linthtml-configure tag-bans="$previous" -->

Other

We have a some other solutions to run linthtml

This module doesn't provide any interface on its own. It is highly recommended that you use one of the following modules to run the linter:

gulp-linthtml: a gulp interface for LintHTML
linthtml-loader: LintHTML loader for webpack (Coming soon 🚧)
broccoli-linthtml: Integrates HTML linting with LintHTML as part of your Broccoli build pipeline. (Coming soon 🚧)

HTMLLint migration

You can migrate from htmllint to LintHTML by running the following commands :

First, uninstall htmllint

npm uninstall htmllint --save-dev

#or

yarn remove htmllint

Then install linthtml detailled instructions available here

Finally rename your .htmlintrc in .linthtmlrc (or run linthtml with the config option).

Contributing

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

cli : For anything that is related to the LintHTML's cli
rule : For anything that is related the rules (bugs, improvement, docs, new rule...)
core : For anything that is related to LintHTML's core (file parsing, plugin system...)

sylvaindumont / linthtml