htmlcs

HTML code style check & format tool.

Install

npm i -g htmlcs

Usage

• in CLI

  Usage: htmlcs <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:
    htmlcs hint foo.html               do hint foo.html
    htmlcs hint foo.html bar.html      do hint foo.html & bar.html
    htmlcs hint ./                     do hint html files under ./
    htmlcs format foo.html             do format foo.html
    htmlcs format --diff foo.html      do format foo.html & show diff result
    htmlcs format --in-place foo.html  do format foo.html & write file in place
   

• in Node.js / browser (with browserify)

  • hint file

    var htmlcs = require('htmlcs');
    var result = htmlcs.hintFile(filePath);

  • hint code (string)

    var htmlcs = require('htmlcs');
    var result = htmlcs.hint(code);
    // Or
    htmlcs.hintAsync(code).then(
        result => { /* ... */ }
    );

  • use hint result

    result.forEach(function(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

    var htmlcs = require('htmlcs');
    console.log(htmlcs.formatFile(filePath));

  • format code (string)

    var htmlcs = require('htmlcs');
    console.log(htmlcs.format(code));
    // Or
    htmlcs.formatAsync(code).then(
        result => console.log(result)
    );

  • add rule

    var htmlcs = require('htmlcs');
    htmlcs.addRule({
        name: 'test-rule',
        desc: 'Just a test rule.',
        lint: function (getCfg, document, reporter) {
            reporter.warn(
                1,
                '099',
                'This is a test waring!'
            );
        }
    });
    var result = htmlcs.hint(code);

• with Gulp/Grunt

  There is no official Gulp/Grunt plugin yet. We recommend fecs, which uses htmlcs to hint HTML code and provides a wealth of tools.

  • fecs-gulp

  • fecs-grunt

Rules & Codes

lib/rules/

rule map

Config

• default: lib/default/.htmlcsrc

• custom:

  Custom rule file (.htmlcsrc) 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

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

  • enable

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

  • config

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

Relative third-party tools

• grunt-htmlcs