资讯专栏INFORMATION COLUMN

[译]JavaScript lint工具的比较

luck / 3242人阅读

摘要:工具帮助避免在编写时出现愚蠢的错误。并不检测潜在的,比如,未使用的变量或意外的全局变量等。在提到的所有工具中,它具有最广泛的功能支持。使用工具是捕获问题的良好步骤,但只能看到规则允许的错误。也可用于此目的。

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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84909.html

相关文章

  • JavaScript代码检查工具对比

    摘要:看到很多团队和开源项目都在用代码检查工具,自己一直没用过,最近加入了新团队有项目在用,就想着研究一下。代码校验工具能够让你在写代码时避免一些低级的错误。同时,也有友好的文档针对每一条规则。在上文提高的所有工具当中它对有着最好的支持。 看到很多团队和开源项目都在用代码检查工具,自己一直没用过,最近加入了新团队有项目在用,就想着研究一下。看到sitepoint上的一篇2015年的文章觉得不...

    fengxiuping 评论0 收藏0
  • 前端构建工具gulp入门教程

    摘要:本文假设你之前没有用过任何任务脚本和命令行工具,一步步教你上手。如果这两行命令没有得到返回,可能就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步:安装No...

    kuangcaibao 评论0 收藏0
  • [] 使用 VS Code 加速前端开发

    摘要:在对比我最近几个月所用的开发工具后,我发现了一些惊人的东西。永远不停止使用。将警告未使用的代码。预检查使用,,和非常有用。不再需要使用开启服务器,创建应用程序,并打开浏览器。尝试使用别的东西,立即出现错误。 原文:Supercharging Frontend Development with VS Code 作者:zachcodes 过去几天,为了在开发 GraphQL / Rea...

    keithxiaoy 评论0 收藏0
  • [] 用 ES6 构建新一代可复用 JS 模块

    摘要:我们已经运用了的一些闪亮的新特性,那么如何才能转化为的代码呢首先,我们需要通过来安装在全局安装会提供我们一个命令行工具。 你是不是也在为可以使用ES6的新特性而兴奋,却不太确定应该从哪开始,或者如何开始?不止你一个人这样!我已经花了一年半的时间去解决这个幸福的难题。在这段时间里 JavaScript 工具链中有几个令人兴奋的突破。 这些突破让我们可以用ES6书写完全的JS模块,而不会为...

    phpmatt 评论0 收藏0
  • [] 从 CoffeeScript 迁移到 ES6

    摘要:语法校验会给出警告当你仍在使用或不通过任何关键字声明变量时。但是如果脚本中还有其他的普通导出,就会得到非常奇怪的结果这个坑爹的情况目前还没有任何好的解决方案。 我在多年前爱上了coffeScript。对于javaScript,我一直保持着深沉的爱,也十分高兴得看到node.js的快速发展,但是作为一个有python背景的程序员,我更喜欢coffeeScript的简练语法。 在任何一个活...

    刘东 评论0 收藏0

发表评论

0条评论

luck

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<