Lint工具帮助避免在编写JavaScript时出现愚蠢的错误。尽管有多年的经验,我仍然键入不正确的变量名称,出现语法错误,以及忘记正确地处理error。在浪费自己时间,或更糟糕地浪费客户时间之前,一个很好的lint工具,或者一个linter会告诉我这个错误。一个很好的lint工具也可以帮助确保一个项目符合编码标准。
JavaScript有很多linter,但是选择哪一个呢?我们来看看JSLint,JSHint,JSCS和ESLint这四种流行替代方案的特点和利弊。
概览
这四个工具基本的工作方式都是一样的。他们有一套规则,用于分析和报告JavaScript文件中的问题。都可以通过npm安装。它们通过传递文件从命令行使用,或者作为插件工具(如Grunt中)使用,也可以集成到编辑器中。他们都支持使用注释进行配置。
以上是它们的相同点。每个工具都有自己的优点和不足,而且只是部分工具比其他的更有优势。
JSLint
JSLint是四个中最老的。道格拉斯·克罗克福德(Douglas Crockford)在2002年创建,依据自己的最佳实践 - JavaScript的good parts部分。如果你赞成good parts,JSLint可以是一个很好的工具,即装即用。
缺点是JSLint不可配置或扩展。你根本无法禁用许多功能,其中一些缺少文档。官方网站不是很有帮助,例如,它没有任何关于如何将其与编辑器集成的信息。
优点
即装即用(如果您同意其执行规则的话)
缺点
JSLint没有配置文件,如果需要更改设置,可能会出现问题
配置选项数量有限,许多规则无法禁用
不能添加自定义规则
无文档
很难知道哪个规则导致哪个错误
JSHint
JSHint被创建为一个可配置的JSLint版本(它是一个fork)。可以配置每个规则,并将它们放入一个配置文件中,这使得JSHint易于在更大的项目中使用。 JSHint还为每个规则提供了良好的文档,因此您可以确切了解它的工作。将其集成到编辑器中也很简单。
JSHint的一个小缺点是它具有宽松的默认配置。这意味着您需要做一些设置才能使其更为有用。当与ESLint进行比较时,为了启用或禁用某些错误消息,还需要知道哪些规则需要更改。
优点
大多数设置可以配置
支持配置文件,使其更容易在较大的项目中使用
支持许多开箱即用的库,如jQuery,QUnit,NodeJS,Mocha等
基本的ES6支持
缺点
很难知道哪个规则导致错误
有两种类型的选项:强制和宽松(可用于使JSHint更严格或抑制其警告)。这可能使配置稍有混乱
没有自定义规则支持
JSCS
JSCS的不同之处在于它不会做任何事情,除非你给它一个配置文件或使用一个预设。可以从它的网站下载配置,所以这不是一个大问题,它有一些预设,如jQuery编码风格预设和Google预设。
它有超过90种不同的规则,您可以使用插件创建自定义的规则。 JSCS还支持自定义reporter,这使得其更容易与需要以特定格式输入的工具集成。
JSCS是一个代码样式检查器。这意味着它只捕获与代码格式相关的问题,而不识别潜在的bug或错误。因此,它比其它的工具灵活性更低,但是如果您需要强制执行特定的编码风格,那么JSCS就可以做到这一点。
优点
支持自定义reporter,可以使其更容易与其他工具集成
如果您遵循一种可用的编码风格,预设和现成的配置文件可以让它更容易设置
在报告中有一个标志包含规则名称,所以很容易找出哪个规则导致了特定的错误
可以使用定制插件扩展
缺点
只检测编码风格问题。 JSCS并不检测潜在的bug,比如,未使用的变量或意外的全局变量等。
四个中最慢,但在通常使用中这不是问题
ESLint
ESLint是四者中最晚出现的。它被设计为易于扩展,具有大量的自定义规则,并且可以容易的以插件的形式安装更多特性。它提供简洁的输出,但默认包括规则名称,因此你始终知道导致错误消息的规则。
ESLint文档可能会很少被点击甚至于错过。规则列表易于遵循,并且分文别类,但配置说明在某些地方有点混乱。不过,它提供了链接,编辑器集成、插件和示例都在一个单一的位置。
优点
灵活:任何规则都可以切换,许多规则都有额外的设置可以调整
极具扩展性,并有许多插件可用
易于理解输出
包括许多其他linter不可用的规则,使ESLint对侦测问题更加有用
最好的ES6支持,也是唯一支持JSX的工具
支持自定义reporter
缺点
需要一些配置
慢,但不是问题
我的建议
这四个中我选择ESLint。 JSLint严格且不可配置,而JSHint缺乏扩展机制。如果您只想检查编码风格,则JSCS是一个不错的选择,但是ESLint也能做到,而且它会检查代码中的bug和其他问题。
如果您想使用ES6(或ES2015,貌似现在这样称呼),ESLint也是一个显而易见的选择。在提到的所有工具中,它具有最广泛的ES6功能支持。
如果你想尝试ESLint,我已经创建了一个5步快速入门指南,让使用变得非常简单。您可以从我的网站下载ESLint 5步快速入门指南。
JSHint是强大的第二选择。如果您不需要ESLint的高级功能,JSHint会在正确配置后捕获很多问题。如果您不需要除编码样式检查(缩进、大括号等)之外的任何功能,拥有大量可用规则的JSCS会是一个首选。
我一点也不推荐JSLint。其它工具可以做同样的事情,但不强加任何特定的规则给用户。唯一的例外是如果你碰巧同意它执行的所有规则,这种情况下,你可以使用它。
使用lint工具是捕获问题的良好步骤,但只能看到规则允许的错误。如若需要一个更简单的自动化bug捕获器,我建议使用单元测试。code review也可用于此目的。
你和你的团队如何确保代码的质量呢?
原文地址:https://www.sitepoint.com/com...