ecomfe/htmlcs

HTML Code Style

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