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

什么是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 配置简析