@linthtml/linthtml

    0.8.6 • Public • Published

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

    Disable/Enable instructions

    The disable and enable instructions only deactivate and activate rules for a specific part of a document.

    Some examples:

    • turn off the attr-bans rule
    <!-- linthtml-disable attr-bans -->
    • turn on the attr-bans rule
    <!-- linthtml-enable attr-bans -->

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

    Multiple rules can be provided to the instructions as long as they are separated by a ,.

    <!-- linthtml-disable attr-bans,indent-style,id-style -->
    <!-- Spaces can be added to improve readability -->
    <!-- linthtml-disable attr-bans, indent-style, id-style -->

    When no rules are provided to the instructions, the instructions will affect all rules available for the document that is analysed.

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

    Install

    npm i @linthtml/linthtml

    DownloadsWeekly Downloads

    1,716

    Version

    0.8.6

    License

    ISC

    Unpacked Size

    505 kB

    Total Files

    215

    Last publish

    Collaborators

    • kamikillerto