node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

htmlcs

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