HTMLHint is a Static Code Analysis Tool for HTML, you can use it with IDE or in build system.

Official Site:http://htmlhint.com/

License

HTMLHint is released under the MIT license:

The MIT License

Copyright (c) 2014-2016 Yanis Wang <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Thanks

You can learn how to use HTMLHint here.

Cli

  1. install & hint

     npm install htmlhint -g
 htmlhint -V
 htmlhint --help
 htmlhint www
 htmlhint www/test.html
 htmlhint www/**/*.xhtml
 htmlhint www/**/*.{htm,html}
 htmlhint http://www.alibaba.com/
 cat test.html | htmlhint stdin

  2. results

        test.html
       L5 |    </head>
               ^ <title> must be present in <head> tag. (title-require)
       L8 |    </body>
               ^ Tag must be paired, missing: [ </div> ], start tag match failed [ <div> ] on line 7. (tag-pair)

 2 errors in 1 files

  3. config rules

    search.htmlhintrcfile in current directory and all parent directories:

     htmlhint
 htmlhint test.html

    custom config file:

     htmlhint --config htmlhint.conf test.html

    custom rules:

     htmlhint --rules tag-pair,id-class-value=underline test.html

    Inline rules intest.html:

    <!--htmlhint tag-pair,id-class-value:underline -->
 <html>
 <head>
     ...

JavaScript with node

  1. install

     npm install htmlhint --save

  2. Hint your html code:

    var HTMLHint  = require("htmlhint").HTMLHint;
var messages = HTMLHint.verify('<ul><li></ul>', {'tag-pair': true});

JavaScript with browser

  1. Download:https://raw.github.com/yaniswang/HTMLHint/master/lib/htmlhint.js

  2. Hint your html code:

     <script type="text/javascript" src="htmlhint.js"></script>
 <script type="text/javascript">
     var messages = HTMLHint.verify('<ul><li></ul>', {'tag-pair': true});
 </script>

About Rules

Read more about all rules:Rules

If rules is undefined, it will use default ruleset:

{
    "tagname-lowercase": true,
    "attr-lowercase": true,
    "attr-value-double-quotes": true,
    "doctype-first": true,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "attr-no-duplication": true,
    "title-require": true
}

About.htmlhintrc

You can config the `.htmlhintrc' like this, and place the file in your project root folder:

.htmlhintrc

{
    "tagname-lowercase": true,
    "attr-lowercase": true,
    "attr-value-double-quotes": true,
    "doctype-first": true
}

Load custom rules

rules/test-rule.js

module.exports = function(HTMLHint) {
    HTMLHint.addRule({
        id: 'test-rule',
        description: 'test rule.',
        init: function(parser, reporter){
            var self = this;
            parser.addListener('tagstart', function(event){
                var tagName = event.tagName.toLowerCase();
                if(tagName === 'body'){
                    reporter.warn('Found body.', event.line, event.col, self, event.raw);
                }
            });
        }
    });
};

Load rules:

htmlhint --rulesdir ./rules/ --rules test-rule

How to report bugs

You can create anew issuein GitHub and describe your problem or suggestion.

HTMLHint是一款基于JS开发的静态扫描组件，支持所有浏览器和Nodejs平台，可以集成到IDE环境或编译系统中。

官方网站：http://htmlhint.com/

HTMLHint特色

  1. 跨平台支持，支持所有浏览器及Nodejs
  2. 全单元测试覆盖，travis自动持续集成，质量有保障
  3. 插件体系灵活，扫描规则添加方便

results matching ""

    No results matching ""