HTMLINT

HTML code style check & format tool.

Install

npm i -g @mewjs/htmlint

Usage

in CLI

Usage: htmlint <command> [options] [target...]

Commands:
    hint    Do hint given file(s)
    format  Do format given file(s)

Options:
    -h, --help      Show help                                            [boolean]
    -c, --config    Path to custom configuration file.                    [string]
    --diff          Check code style and output char diff.               [boolean]
    -i, --in-place  Edit input files in place; use with care!            [boolean]
    -v, --version   Show version number                                  [boolean]

Examples:
    htmlint hint foo.html               do hint foo.html
    htmlint hint foo.html bar.html      do hint foo.html & bar.html
    htmlint hint ./                     do hint html files under ./
    htmlint format foo.html             do format foo.html
    htmlint format --diff foo.html      do format foo.html & show diff result
    htmlint format --in-place foo.html  do format foo.html & write file in place

in Node.js

• hint file

import htmlint from '@mewjs/htmlint';

const results = htmlint.hintFile(filePath);
results.forEach(result => console.log(result));

• hint code (string)

import htmlint from '@mewjs/htmlint';

const results = htmlint.hint(code);
results.forEach(result => console.log(result));

// Or
htmlint.hintAsync(code).then(
    results => results.forEach(result => console.log(result))
);

• use hint results

results.forEach(item => {
    console.log(
        '[%s] line %d, column %d: %s (%s, %s)',
        item.type,
        item.line,
        item.column,
        item.message,
        item.rule,
        item.code
    );
});

• format file

import htmlint from '@mewjs/htmlint';

console.log(htmlint.formatFile(filePath));

• format code (string)

import htmlint from '@mewjs/htmlint';

console.log(htmlint.format(code));
// Or
htmlint.formatAsync(code).then(
    html => console.log(html)
);

• add rule

import htmlint from '@mewjs/htmlint';

htmlint.addRule({
    name: 'test-rule',
    desc: 'Just a test rule.',
    lint(getCfg, document, reporter) {
        reporter.warn(
            1,
            '099',
            'This is a test waring!'
        );
    }
});

const results = htmlint.hint(code);
results.forEach(item => {
    console.log(
        '[%s] line %d, column %d: %s (%s, %s)',
        item.type,
        item.line,
        item.column,
        item.message,
        item.rule,
        item.code
    );
});

Rules

src/rules/

Config

default: src/default/config.ts

custom

Custom rule file (.htmlintrc) can be placed in the same/parent directory of target file, or the ~/ directory.

If found in neither paths, the default config will be used.

inline

• disable

<!-- htmlint-disable -->
<!-- htmlint-disable img-alt -->
<!-- htmlint-disable img-alt, img-src, attr-value-double-quotes -->

• enable

<!-- htmlint-enable -->
<!-- htmlint-enable img-alt -->
<!-- htmlint-enable img-alt, img-src, attr-value-double-quotes -->

• config

<!-- htmlint img-width-height: true -->
<!-- htmlint img-width-height: true, indent-char: "tab" -->