1 | # html/js/css文件lint代码质量检查
|
2 |
|
3 | ## 使用说明
|
4 |
|
5 | * 方法1:在当前目录中,使用 `jdf lint` 或者 `jdf lint ./test` 可直接检查当前目录或者指定目录下的所有文件。
|
6 | * 方法2:在当前目录中,使用 `jdf lint test.html` 可直接检查指定的文件。
|
7 | * 方法3:可直接使用 `jdf lint http://www.jd.com` 检查在线页面。
|
8 |
|
9 | ## 检查html文件
|
10 |
|
11 | `jdf lint` 可以快速检测html文件中代码的书写错误,比如 `test.html` 的内容如下:
|
12 |
|
13 | <div id="box"></div>
|
14 | <div id="box"></div>
|
15 |
|
16 | <input type=text>
|
17 |
|
18 | 运行 `jdf lint test.html` 命令之后,会看到以下提示信息:
|
19 |
|
20 | jdf lint: test/test.html
|
21 | #1
|
22 | >> line: 9, column: 2
|
23 | >> msg: the id "box" is already in use
|
24 | #2
|
25 | >> line: 10, column: 2
|
26 | >> msg: the "type" attribute is not double quoted
|
27 |
|
28 | 很明显,在此hmtl文件中存在两个问题:
|
29 |
|
30 | * 问题1:页面中有两个元素使用了重复的id
|
31 | * 问题2:`input` 元素的 `type` 属性值没有加双引号
|
32 |
|
33 | ## 检查css文件
|
34 |
|
35 | `jdf lint` 可以快速检测css的书写错误,比如 `btn.css` 内容如下:
|
36 |
|
37 | .btn{
|
38 | colo: #fff
|
39 | border:1px solid red;
|
40 | }
|
41 |
|
42 | 很明显 `.btn` 样式存在两个问题
|
43 |
|
44 | * 问题1: `colo` 属性是不存在的,可能应该为 `color`
|
45 | * 问题2: `colo: #fff` 后和 `border:1px solid red;` 前少了一个分号 `;`
|
46 |
|
47 | 此时jdf命令行下会有如下提示,方便查找问题所在
|
48 |
|
49 | jdf csslint: There are 2 problems in lib/csslint.css
|
50 |
|
51 | #1 warning at line 2, col 2
|
52 | Unknown property 'colo'.
|
53 | colo: #fff
|
54 |
|
55 | #2 error at line 3, col 8
|
56 | Expected RBRACE at line 3, col 8.
|
57 | border:1px solid red;
|
58 |
|
59 | 注意:less/scss文件需要编译成css后才能检测,否则提示会不准确。
|
60 |
|
61 | ## 检查js文件
|
62 |
|
63 | `jdf lint` 可快速检测js代码的书写错误,比如 `test.js` 的内容如下:
|
64 |
|
65 | function test() {
|
66 | var a = 1
|
67 | }
|
68 |
|
69 | 运行 `jdf lint test.js` 命令之后,会看到以下提示信息:
|
70 |
|
71 | #1
|
72 | >> line: 4, column: 12
|
73 | >> msg: Expected ";" and instead saw "}".
|
74 | >> at: var a = 1
|
75 | #2
|
76 | >> line: 4, column: 7
|
77 | >> msg: Unused "a".
|
78 | >> at: var a = 1
|
79 | 很明显,在此js文件中有两个问题:
|
80 |
|
81 | * 问题1:在代码 `var a = 1` 结尾处没有加分号
|
82 | * 问题2:a变量只是被定义了,却没有被使用
|
83 |
|
84 | ## 注意事项
|
85 |
|
86 | * 此工具会自动**递归检查**指定目录中所有的html、vm、tpl、css、sass、less、js文件,其它文件会自动忽略。
|
87 | * 在使用 `jdf lint` 检查在线页面时,url前必须要加上http。
|
88 | * 默认csslint功能是关闭状态,可以通过config.json的{{build.csslint}}键值设置为true进行开启,这样在 `jdf build` 下会自动检测
|
89 |
|
90 | ## 原理浅析
|
91 |
|
92 | csslint可用于检查CSS取值和潜在问题,使用了Nicholas大神的npm模块parser-lib作为css解析器,并按照parser-lib给出的API来编写检查规则。
|
93 | csslint的每一个规则都是通过监听parser-lib给出的事件来进行相应的判断:
|
94 |
|
95 | * startrule为规则开始
|
96 | * property为找到一个属性时的事件
|
97 | * endrule为一个规则结束
|
98 |
|
99 | 一旦规则结束并且没有统计到任何property,则说明规则为空。
|