什么是JSHint
发现错误和潜在问题的社区驱动的工具
常见js编辑器的
JSHint插件
- SublimeText:SublimeLinter
- Vim:jshint2.vim
- Textmate:JSHint.tmbundle
- Visual Studio:SharpLinter
- Brackets / Edge Code:Brackets JSHint
- Notepad++:jslintnpp
- gEdit:gEdit JSHint
安装JSHint命令行工具
npm install jshint -g
使用JSHint命令行工具
- 创建
.jshintrc配置文件
{
"esversion": 3
}
- 创建
HelloWorld.js执行文件
let text = 'HelloWorld';
console.log (text);
- 使用
jshint分析HelloWorld.js文件
jshint -c ./.jshintrc ./HelloWorld.js
- 得到分析文件的结果
./HelloWorld.js: line 5, col 1, 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
1 error
JSHintjshint -help命令解析
Usage:
jshint [OPTIONS] [ARGS]
Options:
/**
* 自定义配置文件路径 `.jshintrc`
* example
* jshint -c ./.jshintrc
*/
-c, --config STRING Custom configuration file
/**
* 修改报错输出使用的插件
* example
* jshint --reporter checkstyle
*/
--reporter STRING Custom reporter (<PATH>|jslint|checkstyle|unix)
/**
* 分析前的依赖全局变量
* example
* jshint -c ./.jshintrc --prereq "var lala;"
*/
--prereq STRING Comma-separate list of prerequisite (paths). E.g.
files which includedefinitions of global variabls
used throughout your project
/**
* 指定不需要分析的js文件和`.jshintignore`用法相同
* example
* jshint -c ./.jshintrc --exclude ./HelloWorld.js ./
*/
--exclude STRING Exclude files matching the given filename pattern
(same as .jshintignore)
/**
* 指定不需要分析的js文件和`.jshintignore`用法相同
* example
* jshint -c ./.jshintrc --exclude-path ./.jshintignore ./
*/
--exclude-path STRINGPass in a custom jshintignore file path
--filename STRING Pass in a filename when using STDIN to emulate config
lookup for that file name
--verbose Show message codes
/**
* 文件分析没有错误时输出结果
* example
* jshint --show-non-errors
*/
--show-non-errors Show additional data generated by jshint
-e, --extra-ext STRING Comma-separated list of file extensions to use
(default is .js)
--extract [STRING] Extract inline scripts contained in HTML
(auto|always|never, default to never) (Default is never)
--jslint-reporter Use a jslint compatible reporter (DEPRECATED, use
--reporter=jslint instead)
--checkstyle-reporter Use a CheckStyle compatible XML reporter
(DEPRECATED, use --reporter=checkstyle
instead)
-v, --version Display the current version
-h, --help Display help and usage details
JSHint常见的设置选项
-
强制选项
- 禁用位运算符，位运算符在 JavaScript 中使用较少，经常是把 && 错输成 &
bitwise: true- 循环或者条件语句必须使用花括号包围
curly: true- 强制使用三等号
eqeqeq: true- 兼容低级浏览器 IE 6/7/8/9
es3: true- 禁止重写原生对象的原型，比如 Array ， Date
freeze: true- 代码缩进
indent: true- 禁止定义之前使用变量，忽略 function 函数声明
latedef: "nofunc"- 构造器函数首字母大写
newcap: true- 禁止使用 arguments.caller 和 arguments.callee ，未来会被弃用， ECMAScript 5 禁止使用 arguments.callee
noarg:true- 为 true 时，禁止单引号和双引号混用
"quotmark": false- 变量未定义
"undef": true- 变量未使用
"unused": true- 严格模式
strict:true- 最多参数个数
maxparams: 4- 最大嵌套深度
maxdepth: 4- 复杂度检测
maxcomplexity:true- 最大行数
maxlen: 600 -
宽松选项
- 控制“缺少分号”的警告
"asi": true "boss": true- 忽略 debugger
"debug": true- 控制 eval 使用警告
"evil": true- 检查一行代码最后声明后面的分号是否遗漏
"lastsemic": true- 检查不安全的折行，忽略逗号在最前面的编程风格
"laxcomma": true- 检查循环内嵌套 function
"loopfunc": true- 检查多行字符串
"multistr": true- 检查无效的 typeof 操作符值
"notypeof": true- person['name'] vs. person.name
"sub": true- new function () { ... } 和 new Object ;
"supernew": true- 在非构造器函数中使用 this
"validthis": true -
环境
- 预定义全局变量 document ， navigator ， FileReader 等
"browser": true- 定义用于调试的全局变量： console ， alert
"devel": true- 定义全局变量
"jquery": true, "node": true
参考文章
JSHint Documentation
JSHint Configuration Options
JSHint Grunt Pluign
Improving Code Quality with JSHint
JSHint 配置简析
