【译】JavaScript代码检查工具对比

看到不少团队和开源项目都在用代码检查工具,本身一直没用过,最近加入了新团队有项目在用,就想着研究一下。看到sitepoint上的一篇2015年的文章以为不错就给翻译出来了。本文译自A Comparison of JavaScript Linting Tools,本文由 @Darko 翻译,转载请保留原文连接。javascript

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

有不少关于JavaScript的校验工具,你怎样选择其中的某一个呢?让咱们一块儿来看看它们有什么样的特性以及优缺点。接下来我要介绍四种经常使用的选择:JSLintJSHintJSCSESLintnpm

Overview

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

以上就是它们全部的类似之处了,每个工具都有优缺点,只是有些工具相比于其它工具更加有优点。框架

JSLint

JSLint是这四种校验工具中最为古老的。Douglas Crockford(译注:《JavaScript 语言精粹》的做者)在2002年创造了它,它是强制使用的,为了保留它所认为的JavaScript这门语言的精华部分。若是你认同他的观点,对你而言,JSLint将会是一个好的工具。安装完成立刻便可使用。编辑器

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

1425566558jslint-logo-300x93.gif

优势:工具

  • 配置规则都已经定好了,安装便可使用(若是你赞成这些强制的规则的话)性能

缺点:单元测试

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

  • 配置规则的数量有限,有些规则没法禁用

  • 不支持自定义规则

  • 缺乏文档

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

JSHint

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

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

1425566554jshint-logo-300x133.png

优势:

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

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

  • 支持不少第三方库或和框架,例如jqery,QUnit,NodeJs,Mocha等等

  • 支持基本的ES语法

缺点:

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

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

  • 不支持自定义规则

JSCS

JSCS和以上两个都是不一样的,若是不给它一个配置文件或者使用一套预设的规则,它将什么也不作不了,不过你能够从别的网站下载配置文件,因此这并非什么大问题,而且它有不少的预设规则,好比说jQuery的代码风格的预设规则以及Google的代码风格的预设规则。

它有超过90种不一样的规则,而且你能够经过插件创造自定义规则。JSCS也支持自定义输出报告,这使得其更容易与须要其以特定格式输入的工具集成。

JSCS是一个代码风格检查器,这意味着它只捕获与代码格式相关的问题,而不包含潜在的错误。所以,它比其余工具的灵活性更低,可是若是您须要强制执行特定的编码风格,那么JSCS就能够作的很好。

1425566551jscs-logo.png

优势:

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

  • 若是您遵循现有的可用编码风格之一,预设和现成的配置文件能够轻松设置

  • 在报告中,有一个标志包含在规则名之中,因此很容易找出是哪条规则致使了错误

  • 能够利用自定义的插件进行拓展

缺点:

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

  • 四个工具中性能最差的,可是这并非一个典型用途的问题

ESLint

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

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

1425566547eslint-logo-150x150.png

优势:

  • 灵活:任何规则均可以切换使用,而且有些规则有额外的配置可使用

  • 可拓展性好,而且有不少可用的插件

  • 易于理解的输出报告

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

  • 对ES6的支持性最好,是惟一支持JSX的工具

  • 支持自定义输出报告

缺点:

  • 须要一些配置

  • 性能差,但这并非主要的障碍

推荐

在这四个工具中,我选择了ESLint,JSLint太严格而且不可配置,而JSHint缺少扩展机制。若是您只想检查编码风格,则JSCS是一个不错的选择,可是ESLint也能够这样作,而且它会检查代码中的错误和其余问题。

若是你想使用ES6的话,ESLint也是显而易见的选择。在上文提升的全部工具当中它对ES6有着最好的支持。

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

对于JSLint,我很犹豫要不要推荐它,其它的工具能够作到和他一样的事情可是不会强制要求使用者去使用特定的规则。若是你正巧很是赞成它的哪些强制规则,那么也许值得好好去了解一下。

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

你和你的团队是若是保证代码质量的呢?能够在评论区留言。