前端之旅：使用jshint

April 10 2017

了解jshint

安装：http://jshint.com/install/
文档：http://jshint.com/docs/
所有配置项：http://jshint.com/docs/options/

配置

jshint有一系列的默认警告，但是它也被设计可配置的。
官网上说有三种主要方法配置jshint

命令行通过 –config 选项手动指定配置文件
.jshintrc后缀的文件
或者通过package.json中指定jshintConfig选项
还有下面两种算是辅助方法吧
内联配置也算是一种吧
在IDE的jshint插件中也可以配置

jshint配置文件是一个简单的json文件，用来指定jshint选项的开或关，配置项在上面提供的网址中查看。示例：

{
  "undef": true,
  "unused": true,
  "globals": {
    "MY_GLOBAL": true
  }
}

内联配置

jshint也可以采用内联配置，和内联css、js概念上差不多，就是直接将jshint配置项写到js文件的注释中，不过要以jshint提供的关键字开头才能识别，各个配置项之间用逗号分隔。例如

1 2	/* jshint undef: true, unused: true / / globals MY_GLOBAL */

而且，这些注释是有函数作用域的，即如果你将配置注释放到函数内部，那么这些配置就只影响该函数。

指令

jshint指令

jshint：/ jshint strict: true /
jshint兼容的jslint：/ jslint vars: true /
globals: / globals MY_LIB: false /，你也可以指定一个黑名单确保某些全局名称没有被使用：/ globals -BAD_LIB /
exported：/ exported EXPORTED_LIB /，告诉jshint在当前文件中定义的却未使用或在其他地方使用的全局变量

ignore：告诉jshint要忽略的代码块，在ignore:start 和 ignore:end 之间的代码将不会被传递给jshint：

// Code here will be linted with JSHint.
/* jshint ignore:start */
// Code here will be ignored by JSHint.
/* jshint ignore:end */
```	
另外，也可以通过行尾注释来忽略单行
ignoreThis(); // jshint ignore:line

### jsint选项
jshint选项有两种类型的选项：强制的 和 宽松的

jshint --verbose jsfile，可以查看具体的代码警告，每种警告都有一个号码，可以通过jshint配置来忽略该警告：
```js
/* jshint -W034 */

不过这一条只对代码警告有用(W开头)，对代码错误无用(E开头)
和这个号码有关的警告都将被禁止
不过可以配置重新打开警告：/ jshint +W034 /

上面这个功能特别有用的地方就在于，当你知道某个有警告的代码是安全的，你可以禁用它，在随后的代码中在重新打开，比如

var y = Object.create(null);
// ...
/*jshint -W089 */
for (var prop in y) {
    // ...
}
/*jshint +W089 */

其他细节描述需要自己去看文档，我懒得翻译了

SublimeText插件

如果按照上述方法安装了jshint，那么久可以在命令行中开始使用了，但是对于经常开发的同学会不方便，所以是可以作为IDE的插件来使用的。
由于我使用的是ST3，那么我就只谈谈我如何基于ST3来使用的。
官网推荐了三个基于ST的插件，最强大的是SublimeLinter3（基于ST3），不过强大也就意味着复杂，安装配置都稍显复杂，因为SublimeLinter3只是一个代码校验工具管理器，它可以对多种语言进行校验，而jshint只是它的可安装的插件，所以如果要成功用上jshint，还要单独安装jshint插件并配置，差不多同时需要安装Nodejs、SublimeLinter3、jshint的npm插件、以及SublimeLinter3-jshint，详细的安装过程可参考这篇博客。
虽然繁琐，但是如果你的开发需要同时验证多种语言的话还是不错的一个解决方案，比如对CSS校验它就提供了SublimeLinter3-csslint，当然csslint也是一个可单独安装使用的工具，只是SublimeLinter3对它提供了支持。

不过对于仅仅只想验证js代码的我来说，SublimeLinter就太麻烦了，所以我选择了Sublime-JSHint Gutter，进入ST的install package面板，输入JSHint Gutter即可一键安装（注意：不需要再单独安装jshint的npm插件）。如果英文吃力的话可以参考这篇博客 JSHint 配置浅析。

按下 Ctrl+Shift+j 让你的代码接受考验吧。
如果有问题的话记得在package setting中打开JSHint Gutter的菜单看看有什么配置需要更改的就好了，比如node的PATH指向是否正确。