JShint 学习

前端代码规范

前言:

关于前端代码规范,特别是针对js. 推荐使用jshint插件,在sublime/webstorm都有对应的安装插件.下面针对sublime进行安装使用说明.

 

安装:

1. 安装前保证你的电脑已经安装了npm nodejs,由于插件是基于nodejs运行的. 应用npm可以下载对应的安装包.(查看npm和nodejs是否安装好,可以通过查看版本命令:    node -v)
2. 配置好nodejs和npm后, 执行命令: sudo npm install -g jshint , 对jshint进行全局安装.
3. 打开sublime, Ctrl+Shift+P打开执行Install Package, 选择sublimeLinter进行安装,然后继续安装sublimeLinter-jshint包. 安装完成后, 不出意外就可以检查js代码中的语法错误.

注: 凡事都有意外, 我碰到的问题是, 根本没有执行代码检查,什么反应都没有. 搞了半天,才发现我前面执行安装jshint的时候没有加sudo命令, 在配置文件中根本找不到jshint的目录和nodejs的路径. 正确配置的截图如下:

 

 

 

正常后检查界面如下:

 

 

上述代码中出现: .jshintrc文件, 这个文件作用是配置规范参数. 下面详细说明这个文件(表格中配置字段名首字母应为小写):

字段名	说明
Bitwise	JavaScript中二进制操作(|^&), true:对二进制操作符提出警告,false:程序中可以使用二进制操作
Camelcase	程序中所有变量必须符合camelCase和UPPER_CASE规范
Curly	True: 将所有程序放在大括号中
Eqeqeq	True:将==或!=改成===或!==
Esversion	指定ESCMAScript版本, 3/5/6
Forin	在for in循环中必须加上hasOwnProperty语句,例如: For(key in obj){    If(obj.hasOwnProperty(key)){       ......    } }
Freeze	在重写Javascript固有对象的方法时使用,比如:Array/Date等.
Funcscope	Function test(){   If(true){      Var x = 0;   }   X += 1; //这个x应该属于函数作用域范围之外,如果设置为                 //true,则不会有警告.
Futurehosite	True: 警告js未来版中定义的表示符
Globals	指定一个没有正式定义的全局变量
Immed	True:直接调用的函数必须要用括号包围 (function(){}())
Indent	设置代码缩进长度
Latedef	禁止定义之前使用变量, “nofunc”: 允许函数声明被忽略
Maxcomplexity	"maxcomplexity": 8, // 控制你的代码复杂度
Maxdepth	设置代码最大深度
Maxerr	设置jshint的最大警告数量.默认50
Maxlen	设置最大行数
Maxparams	设置函数形参最大个数: 4
Maxstatements	通常设置40行
Newcap	要求所有构造器使用new F()
Noarg	禁止使用arguments.caller和arguments.callee
Nocomma	禁止使用逗号操作符
Nonew	这个选项禁止使用new构造器函数
Notypeof	检查无效的typeof操作符
Predef	扩展的隐式全局变量
Quotmark	主要设置引号一致性,”true” 代码字符串禁止单引号双引号混用;”single”: 只允许使用单引号; “double”:只允许使用双引号
Shadow	检查变量重复定义;  inner: 制检查是否在相同作用域重复定义; outer:检查外部作用域定义; false与inner一样 true允许变量覆盖
singleGroups	禁止使用分组操作符
Strict	“global”全局层面上的严格模式”use strict”; “implied”: 文件里面使用”use strict”; false: 禁止使用严格模式; true: 函数上面必须使用”use strict”
Undef	变量未定义(如果某个变量在另外一个文件中定义,可以使用global告诉JSHint)
Unused	变量定义但是未使用
Varstmt	设置为true时,禁止使用var声明变量
Asi	禁止缺少分号警告
Boss	禁止比较表达式的值没有达到预期警告
Eqnull	禁止==null比较
Evil	禁止使用evil
Lastsemic	检查一行代码后面的分号是否遗漏
Laxcomma:	检查逗号在代码行最前面的编程风格
Loopfunc	禁止内部循环,定义函数的内部循环可能导致错误
Plusplus	禁止一元递增或者递减运算符
Sub	检查[]使用,可以使用.代替[]

 

下面这些选项是让JSHint知道一些预定义的全局变量

1. Browser: 暴露浏览器的全局属性, 比如: window / document
2. Browserify: 这个选项定义全局变量使用时可用Browserify工具建立一个项目
3. Couch: 定义全局暴露的CouchDB
4. Devel: 定义全局变量, 通常用于日志调试: console, alter
5. Dojo: 这个选项定义全局暴露的Dojo Tookit
6. Jasmine: 这个选项定义全局暴露jasmine的单元测试框架
7. Jquery: 定义全局暴露的jQuery库
8. Module: 所有模块的代码解释为严格代码模式
9. Mootools: 定义全局暴露MooToolsJavaScript框架
10. Node: 定义全局变量,可以当你的代码运行在node环境中
11. Nonstandard: 采用全局变量escape和unescape
12. Prototypejs: 全局暴露prototypejs框架
13. Qunit: 全局暴露qunit单元测试框架
14. Typed: 这个选项定义全局暴露的ShellJS库
15. Yui: 定义全局暴露的yui框架

 

 

内联定义:

1. 忽略一个代码块:

/*jshint ignore: start*/

code

/*jshint ignore: end*/

1. 忽略一行

//jshint ignore: line

1. Freeze控制

//jshint freeze: false

code

//jshint freeze: true