JavaScript 校验：JSLint、JSHint、JSCS、ESLint

灰太狼 2021-06-26 16:06 379阅读 0赞

*  `JSLint`，古老，不可配置，不可扩展，不可禁用许多特性的校验
 *  `JSHint`，可配置的JSLint版本
 *  `JSCS`，代码样式检查，只捕获与代码格式化相关的问题，而不是潜在的`bug`或错误。已经与 `ESLint` 合并。
 *  `ESLint`，易于扩展，可自定义规则，可以插件形式安装更多的规则。

一个 `linting` 工具是解决问题的一个很好的步骤，但是它基于一定的规则发现错误，具有一定的局限性。

要采用更安全的`bug`自动收集，建议使用单元测试(`unit tests`)，代码评审(`code reviews`)。

项目地址：

*  [JSLint: The JavaScript Code Quality Tool][JSLint_ The JavaScript Code Quality Tool]，Douglas Crockford，2002
 *  [JSHint, a JavaScript Code Quality Tool][JSHint_ a JavaScript Code Quality Tool]
 *  [JSCS: JavaScript Code Style checker][JSCS_ JavaScript Code Style checker]
 *  [ESLint - Pluggable JavaScript linter][]，Nicholas C. Zakas，2013

比较：

*  [A Comparison of JavaScript Linting Tools][]

## `JSLint,JSHint,ESLint`的区别 ##

### 主流的`JS Lint`工具及介绍 ###

`JavaScript`已经发展蛮长时间了，对应的`Lint`工具也是层出不穷，下面介绍一下比较主流的几个`Lint`工具(其实是我用过的几个`XD`)  
JSLint

`JSLint`是由Douglas Crockford开发的，可能是最早的`JavaScript Lint`工具了吧，它的名字来源于著名的C语言工具`Lint`。老道把他认为的非`Good Parts`的部分都报了`warning`，而且在它的文档中也提到了你应该欣然接受所有的`JSLint`的建议。最近看了下，老道还在持续更新着这个项目，而且官网上也有着一个在线的体验工具，可以尝试一下。对了，如果想要使用这个工具，建议看看老道在`YouTube`上关于`JavaScript`编程风格的视频，讲的还是很幽默的。

### `JSHint` ###

`JSHint`是由`Anton Kovalyov`基于`JSLint`的代码实现的开源项目，由于`JSLint`时期大多数人都在受`JSLint`压迫，`JSHint`相比较之下，更友好，也更容易配置，所以很快就发展了起来，也得到了众多`IDE`和编辑器的支持。但是，由于它是基于`JSLint`开发的，自然原有的一些问题它也继承下来了，比如不易扩展，不容易直接根据报错定位到具体的规则配置等，虽然之前好像是有过相关的讨论，但是现在仍然没有什么好的解决办法。好在它发展的不错，很多时候遇到的问题都可以在网上找到相关的解决方案，而且文档也是非常不错的。

### ESLint ###

`ESLint`是由`Nicholas C. Zakas`在2013年开始开发的，它的初衷就是为了能让开发者能自定义自己的`linting rules`，而且它提供了一套相当完善的插件机制，可以自由的扩展，动态加载配置规则，同时可以方便的根据报错定位到具体的规则配置。而且我比较喜欢它的一点是文档非常详细，可能这也是灵活所必须的吧。在这里还要提一点，`ESLint`最初并不是为了造一个重复的轮子，而是作者在实际使用中的需求没有能得到`JSHint`团队的回应，所以他就结合当时的JSHint和另一个代码风格的检查工具`JSCS`写出来了现在具备代码风格检查，自定义插件扩展功能的`ESLint`了。

## `JSLint`，`JSHint`和`ESLint`的对比 ##

这三个工具各有特色，我只是做一下对比，选择的话，看个人需求就好了。

### `JSLint` ###

**优点**

*  配置是老道已经定好的，开箱即用。

**不足**

*  有限的配置选项，很多规则不能禁用
 *  规范严格，凡是不符合老道所认为的好的风格的，都会有警告(这一项就看你是否完全认同老道了)
 *  扩展性差
 *  无法根据错误定位到对应的规则

### `JSHint` ###

**优点**

*  有了很多参数可以配置
 *  支持配置文件，方便使用
 *  支持了一些常用类库
 *  支持了基本的ES6

**不足**

*  不支持自定义规则
 *  无法根据错误定位到对应的规则

### `ESLint` ###

**优点**

*  默认规则里面包含了`JSLint`和`JSHint`的规则，易于迁移(这肯定是故意的XD)
 *  可配置为警告和错误两个等级，或者直接禁用掉
 *  支持插件扩展
 *  可以自定义规则
 *  可以根据错误定位到对应的规则
 *  支持`ES6`
 *  唯一一个支持`JSX`的工具

**不足**

*  需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
 *  慢 (它比其他两个都要慢)

[JSLint_ The JavaScript Code Quality Tool]: http://jslint.com/
[JSHint_ a JavaScript Code Quality Tool]: http://jshint.com/
[JSCS_ JavaScript Code Style checker]: http://jscs.info/
[ESLint - Pluggable JavaScript linter]: https://eslint.org/
[A Comparison of JavaScript Linting Tools]: https://www.sitepoint.com/comparison-javascript-linting-tools/