[H5]使用JSHint 配置完善代码规范

什么是JSHint
发现错误和潜在问题的社区驱动的工具

常见js编辑器的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 配置简析

推荐阅读更多精彩内容