HTML Code Style
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
lib
test
.editorconfig
.fecsrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
browser.js
index.js
package.json

README.md

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