JavaScript 代码检查工具对比

（点击上方公众号，可快速关注）

英文：sitepoint  译文：Darko

segmentfault.com/a/1190000010264410

如有好文章投稿，请点击 → 这里了解详情

JavaScript代码校验工具能够让你在写代码时避免一些低级的错误。尽管我有很多年的开发经验，我仍然会犯一些语法错误并且忘记处理我的错误。一个好的校验工具或者格式化工具，可以让我避免这些错误，以免浪费我的时间（甚至是我客户的时间）。一个好的校验工具还能确保一个项目保持一个固定的代码风格。

有很多关于JavaScript的校验工具，你怎样选择其中的某一个呢？让我们一起来看看它们有什么样的特性以及优缺点。接下来我要介绍四种常用的选择：JSLint，JSHint，JSCS和ESLint。

Overview

这四个工具的基本用法都是类似的，它们定义了一套规则用来解析和报告js文件里面的问题。它们都可以通过npm来进行安装。可以通过命令行来调用它们，给命令行传递文件参数，也可以作为grunt这一类工具的插件被使用，或者可以集成到编辑器中。它们都支持使用注释作为配置。

以上就是它们所有的相似之处了，每一个工具都有优缺点，只是有些工具相比于其它工具更加有优势。

JSLint

JSLint是这四种校验工具中最为古老的。Douglas Crockford（译注:《JavaScript 语言精粹》的作者）在2002年创造了它，它是强制使用的，为了保留它所认为的JavaScript这门语言的精华部分。如果你认同他的观点，对你而言，JSLint将会是一个好的工具。安装完成马上即可使用。

JSLint的缺点是它是不可以进行配置和扩展的。你不能禁用它的某些特性，并且缺乏文档。它的官网并没有什么用处，例如，它缺少如果将这个工具整合到你的编辑器的任何信息。

 

优点：

• 配置规则都已经定好了，安装即可使用（如果你同意这些强制的规则的话）

缺点：

• JSLint没有可配置文件，你无法对它的规则进行更改

• 配置规则的数量有限，有些规则无法禁用

• 不支持自定义规则

• 缺少文档

• 很难定位到哪条规则导致了错误

JSHint

JSHint是JSLint的一个更加灵活，可配置的一个版本，它从JSLint中fork出来。你能够自己配置每一条规则，并且把他们写到一个配置文件里，这让JSHint更易于在大型项目中使用。同时，JSHint也有友好的文档针对每一条规则。所以能够准确的知道它做了些什么。把它整合到编辑器中也是很简单的一件事。

JSHint的一个小缺点就是，它的默认配置是非常轻量级的。这就意味着你要做一些设置才能使其变得有用。和ESLint相比，为了启用或者禁用某些错误的报告，要知道需要修改哪些规则也是比较困难的。

 

优点：

• 大多数设置都是可配置的

• 支持配置文件，更易于在大型项目中使用

• 支持很多第三方库或和框架，例如jqery,QUnit,NodeJs,Mocha等等

• 支持基本的ES语法

缺点：

• 很难定位到哪条规则造成了错误

• 有两种类型的配置：强制执行的和比较松散的，这让配置变得有些混乱

• 不支持自定义规则

JSCS

JSCS和以上两个都是不同的，如果不给它一个配置文件或者使用一套预设的规则，它将什么也不做不了，不过你可以从别的网站下载配置文件，所以这并不是什么大问题，并且它有很多的预设规则，比如说jQuery的代码风格的预设规则以及Google的代码风格的预设规则。

它有超过90种不同的规则，并且你可以通过插件创造自定义规则。JSCS也支持自定义输出报告，这使得其更容易与需要其以特定格式输入的工具集成。

JSCS是一个代码风格检查器，这意味着它只捕获与代码格式相关的问题，而不包含潜在的错误。因此，它比其他工具的灵活性更低，但是如果您需要强制执行特定的编码风格，那么JSCS就可以做的很好。

 

优点：

• 支持自定义输出报告，可以使其更容易和其它工具进行集成

• 如果您遵循现有的可用编码风格之一，预设和现成的配置文件可以轻松设置

• 在报告中，有一个标志包含在规则名之中，所以很容易找出是哪条规则导致了错误

• 可以利用自定义的插件进行拓展

缺点：

• 只检测到代码风格的违规，不检测潜在的错误，比如说未使用的变量或者变量的全局污染等

• 四个工具中性能最差的，但是这并不是一个典型用途的问题

ESLint

ESLint是这四个工具中最新的，它被设计为易于拓展的，具有大量的自定义规则，并且很容易通过插件的形式来安装。它输出简洁的报告，但是默认包含规则的名称，因此你始终知道是那条规则导致了错误的信息。

ESLint的文档多少有些混乱，规则的列表容易查找，并且按逻辑进行分类，但配置说明在某些地方有点混乱。然而，它提供了如何对编辑器进行集成，插件和示例的链接。

 

优点：

• 灵活：任何规则都可以切换使用，并且有些规则有额外的配置可以使用

• 可拓展性好，并且有很多可用的插件

• 易于理解的输出报告

• 包含一些其它工具所没有的规则，使得ESLint更容易检测出代码中潜在的错误

• 对ES6的支持性最好，是唯一支持JSX的工具

• 支持自定义输出报告

缺点：

• 需要一些配置

• 性能差，但这并不是主要的障碍

推荐

在这四个工具中，我选择了ESLint，JSLint太严格并且不可配置，而JSHint缺乏扩展机制。如果您只想检查编码风格，则JSCS是一个不错的选择，但是ESLint也可以这样做，并且它会检查代码中的错误和其他问题。

如果你想使用ES6的话，ESLint也是显而易见的选择。在上文提高的所有工具当中它对ES6有着最好的支持。

JSHint是第二好的选择，如果你不需要ESLint的那些高级特性的话。一旦被正确的配置，JSHint可以捕捉到大量的问题。JSCS有大量可用的规则，如果你不需要编码样式检查（缩进、括号等）以外的任何事情，那么它就是首选。

对于JSLint，我很犹豫要不要推荐它，其它的工具可以做到和他同样的事情但是不会强制要求使用者去使用特定的规则。如果你正巧非常同意它的哪些强制规则，那么也许值得好好去了解一下。

一个好的校验工具是捕捉问题非常重要的一步，但是它只能检测出它的规则许可范围之内的错误。对于更多简单明了的bug的捕捉，我建议使用单元测试，Code reviews也是也是不错的方式。

你和你的团队是如果保证代码质量的呢？可以在评论区留言。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能