Skip to content

Latest commit

 

History

History
168 lines (122 loc) · 4.1 KB

README.md

File metadata and controls

168 lines (122 loc) · 4.1 KB

htmlcs

Build Status NPM version Coverage Status Dependencies DevDependencies

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.

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