Usage
hexiaoming edited this page Oct 21, 2015
·
7 revisions
快速入门使用xg-htmlhint
-
安装
npm install xg-htmlhint -g -
命令选项
htmlhint -V 查看版本号 htmlhint -l 查看规则列表 htmlhint -c <config> 指定配置文件 -
使用
htmlhint 对当前文件夹及子文件夹中所有的.html文件进行检查 htmlhint file/dir 对文件或整个文件夹下的.html文件进行检查 -
结果
test.html: line 1, col 1: Doctype must be uppercase. line 11, col 21: The value of attribute [ class ] must be in double quotes. line 14, col 2: Special characters must be escaped : [ < ]. line 14, col 49: Special characters must be escaped : [ > ]. line 14, col 78: Tag must be paired, no start tag: [ <button> ] 4 Errors,1 Warnings
-
引入脚本Download
<script src="path/to/xg-htmlhint.min.js"></script> -
使用
<script src="path/to/xg-htmlhint.min.js"></script> <script type="text/javascript"> var ruleset = { 'tag-pair': true, 'doctype-first':false }; var messages = HTMLHint.verify('<ul><li></ul>', ruleset); </script> -
结果
messages就是检查之后的结果，数组类型，包括所有的提示、警告和错误信息，信息格式为:{ type: 'warning', // 也可以是error 或 info message: 'Doctype must be uppercase.', raw: '<!doctype html>', evidence: '<!doctype html><html></html>', line: 1, col: 1, rule: { id: 'doctype-first', description: 'Doctype must be declared first.', link: 'https://github.com/yangjiyuan/xg-htmlhint/wiki/doctype-first' } }
-
安装
npm install xg-htmlhint --save -
使用
var HTMLHint = require("xg-htmlhint").HTMLHint; var messages = HTMLHint.verify('<ul><li></ul>', { 'tag-pair': true, 'doctype-first':false }); -
结果
messages用法同作为页面脚本引入的结果
了解更多规则详情: Rules
核心方法是HTMLHint.verify，第一个参数是需要检查的代码片段，不可以为空；第二个参数是规则集合，可以为空。
默认规则
{
'doctype-first': true,
'title-tag-require': true,
'tagname-lowercase': true,
'tag-pair': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'attr-no-duplication': true,
'id-name-unique': true,
'spec-char-escape': true
}
没有自定义规则的情况下，以默认规则进行校验，有自定义规则时，默认规则和自定义规则合并，相同的key以自定义为准。
-
配置文件 如果执行命令的目录下有文件
.htmlhintrc文件，以该文件中的规则为自定义规则，文件内容必须是对象格式。
也可以自定义配置文件，htmlhint -c rules.conf指定配置文件，如果配置文件不存在的话，无视自定义配置，继续使用默认配置，如果存在的话以此文件内容为自定义配置规则。 -
页面内联规则 除了在
HTMLHint.verify中传递参数外，也可以在被检查的代码片段中使用注释设置规则，如<!-- htmlhint alt-require:false,doctype-first:true --><html><div>This is html fragment！</div></html>
在同时存在注释规则和自定义规则的情况下，以注释规则为准，主要用来在特殊情况下设置豁免规则。
如果对代码规范有特殊的要求，可以自定义规则，详情见：Developer Guide
- VIM
- WebStorm
- Sublime Text 2/3 Baidu FE Code Style Sublime Helper
在GitHub新建issue并描述问题细节。