html/js/css文件lint代码质量检查

使用说明

  • 方法1：在当前目录中，使用 jdf lint 或者 jdf lint ./test 可直接检查当前目录或者指定目录下的所有文件。
  • 方法2：在当前目录中，使用 jdf lint test.html 可直接检查指定的文件。
  • 方法3：可直接使用 jdf lint http://www.jd.com 检查在线页面。

检查html文件

jdf lint 可以快速检测html文件中代码的书写错误，比如 test.html 的内容如下：

  1. <div id="box"></div>
  2. <div id="box"></div>
  4. <input type=text>

运行 jdf lint test.html 命令之后，会看到以下提示信息：

  1. jdf lint:  test/test.html
  2. #1
  3. >> line: 9, column: 2
  4. >> msg: the id "box" is already in use
  5. #2
  6. >> line: 10, column: 2
  7. >> msg: the "type" attribute is not double quoted

很明显，在此hmtl文件中存在两个问题：

  • 问题1：页面中有两个元素使用了重复的id
  • 问题2：input 元素的 type 属性值没有加双引号

检查css文件

jdf lint 可以快速检测css的书写错误，比如 btn.css 内容如下：

  1. .btn{
  2.     colo: #fff
  3.     border:1px solid red;
  4. }

很明显 .btn 样式存在两个问题

  • 问题1： colo 属性是不存在的，可能应该为 color
  • 问题2： colo: #fff 后和 border:1px solid red; 前少了一个分号 ;

此时jdf命令行下会有如下提示，方便查找问题所在

  1. jdf csslint: There are 2 problems in lib/csslint.css
  3. #1 warning at line 2, col 2
  4. Unknown property 'colo'.
  5.     colo: #fff
  7. #2 error at line 3, col 8
  8. Expected RBRACE at line 3, col 8.
  9.     border:1px solid red;

注意：less/scss文件需要编译成css后才能检测，否则提示会不准确。

检查js文件

jdf lint 可快速检测js代码的书写错误，比如 test.js 的内容如下：

  1. function test() {
  2.   var a = 1
  3. }

运行 jdf lint test.js 命令之后，会看到以下提示信息：

  1. #1
  2. >> line: 4, column: 12
  3. >> msg: Expected ";" and instead saw "}".
  4. >> at:   var a = 1
  5. #2
  6. >> line: 4, column: 7
  7. >> msg: Unused "a".
  8. >> at:   var a = 1

很明显，在此js文件中有两个问题：

  • 问题1：在代码 var a = 1 结尾处没有加分号
  • 问题2：a变量只是被定义了，却没有被使用

注意事项

  • 此工具会自动递归检查指定目录中所有的html、vm、tpl、css、sass、less、js文件，其它文件会自动忽略。
  • 在使用 jdf lint 检查在线页面时，url前必须要加上http。
  • 默认csslint功能是关闭状态，可以通过config.json的{{build.csslint}}键值设置为true进行开启，这样在 jdf build 下会自动检测

原理浅析

csslint可用于检查CSS取值和潜在问题，使用了Nicholas大神的npm模块parser-lib作为css解析器，并按照parser-lib给出的API来编写检查规则。
csslint的每一个规则都是通过监听parser-lib给出的事件来进行相应的判断：

  • startrule为规则开始
  • property为找到一个属性时的事件
  • endrule为一个规则结束

一旦规则结束并且没有统计到任何property，则说明规则为空。