javascript检验工具的比较

当写js代码的时候,一个校验工具可以帮助我避免愚蠢的错误。尽管我有许多年的经验,但是我仍然有变量命名不正确、产生语法错误以及忘记正确处理错 误。在我浪费时间,尤其是客户时间之前,一个好的校验工具或校验器可以告诉我这些问题。好的校验工具可以确保一个项目遵循代码规范。

存在四个可以使用的js校验器,但是怎么选择使用哪一个呢?接下来让我们看看这四种流行方案的特点、优点和不足:JSLint、JSHint、JSCS、ESLint。

Overview

四种工具用相同的基本方式工作。他们都有一套用户分析、报告js文件错误的规则。他们都可以通过npm安装。他们都可以通过命令行使用、作为Grunt插件使用、也可以集成到编辑器中。他们四种均支持使用注释进行配置。

但是相似点结束了。每个工具都有各自的优点和缺点–优点是通过比较得到的。

JSLint

JSLint是其中最老的工具。在2002年 Douglas Crockford开发了该工具,根据其经验,强制使用js语言中精粹的部分。如果你同意这些精粹,JSLint能成为一个好的工具。

JSLint的缺点是不能配置和拓展。你根本不能禁掉需要特性,并且很多缺少文档。官方文档非常不友好,例如缺少如何将其集成到编辑的信息。

优点

  • 参数配置完成,可以直接使用

缺点

  • JSLint不存在配置文件,如果想改变参数设置,那就存在问题
  • 有限的配置选项,许多规则不能禁掉
  • 不能增加个性化规则
  • 没有文档记录规则
  • 很难弄清楚哪个规则引起的错误

JSHint

作为一个可配置的JSLint版本,JSHint被开发出来。你可以配置每个规则,将其放到一个配置文件中,这样在大项目中可以容易使用。JSHint对每个规则有好的文档,所以可以准确知道每个规则的作用。将其集成到编辑器也是简单的。

JSHint的一个小缺点是里面的松散默认配置。也即是你在使其可用之前必须将其启动。和ESLint相比,确定哪个规则用户开启或关闭错误信息,JSHint是更加困难。

优点

  • 大多是参数可以配置
  • 支持配置文件,在大项目中容易使用
  • 已经支持需要类库,像jQuery、QUnit、NodeJS、Mocha等
  • 支持基本的ES6

缺点

  • 难于知道哪个规则产生错误
  • 存在两类选项:强制选项和松散选项。使得配置有些混乱
  • 不支持自定义规则

JSCS

JSCS不同于其他,因为如果不给它一个配置文件或告诉它一个配置项,JSCS
不会做任何事情。可以存他们的网站现在配置项,所以这不是个大问题,并且有许多配置项,例如jQuery代码风格配置项、Google配置项。

它有超过90个不同的规则,通过插件可以创建自定义规则。当和其他工具集成需要特定格式时,JSCS也支持自定义报告使得变得非常容易。

JSCS是一个代码风格检查器。这意味着它仅仅匹配代码格式的问题,不匹配潜在的bugs、errors。因此,跟其他工具相比缺少灵活性,但是如果你仅仅强制检查代码风格,JSCS也是一个好的工具。

优点

  • 支持自定义报告,更容易与其他工具集成
  • 如果你遵循一种可用的代码风格,配置项和准备好的配置文件使其容易启动
  • 在报告中存在标记包含规则名字,所以很容易指出哪个规则造成了错误
  • 通过自定义插件进行拓展

缺点

  • 仅仅检查代码风格的问题。JSCS不检查潜在存在的bugs,例如不适用的变量、偶然的全局变量等等
  • 四个工具中最慢,但是在使用中不是一个问题

ESLint

ESLint是最新出来的工具。它被设计的容易拓展、拥有大量的自定义规则、容易的通过插件来安装。它给出准确的输出,而且包括规则名,这样可以知道哪个规则造成了错误。

ESLint文档多少有些混乱。规则容易查找,以及被分为逻辑组,但是配置指南在有些地方容易弄混。然而它可以在一个地方提供链接去编辑集成、插件和样例。

优点

  • 灵活:任何规则都可以开启闭合,以及有些规则有些额外配置
  • 很容易拓展和有需要可用插件
  • 容易理解产出
  • 包含了在其他检查器中不可用的规则,使得ESLint在错误检查上更有用
  • 支持ES6,唯一支持JSX的工具
  • 支持自定义报告

缺点

  • 需要一些配置
  • 速度慢,但不是主要问题

我的推荐

我的选择是ESLint。JSHint是严格和不可配置的,而JSHint缺少拓展机制。JSCS如果仅仅用于代码风格检验是一个好的选择,但是ESLint不仅可以进行代码风格的检验,而且可以检查代码中的bug和其他问题。

如果使用ES6,ESLint也是明显的选择。在上面提到的工具中,ESLint对ES6支持的最广泛。

如果你像尝试ESLint,我已经创造了5步快速开始指南。你可以 download the ESLint 5-step quickstart guide form my website

JSHint是第二选择。如果不需要ESLint先进的特点,JSHint一旦配置就可以捕获需要好的问题。带有许多规则的JSCS,如果出了代码风格外不进行其他检查,将是一个好的选择。

我非常犹豫去推荐JSLint。其他工具做同样地事情,但是不强制用户遵守这些规则。唯一的例外是你碰巧统一那些强制规则,那是值得深入研究的情况。

一个检验工具是捕获问题的很好一步,但是仅仅能看到它规则的错误。为了更进一步的bug自动捕获,我推荐使用单元测试。code view也有助于达到该目的。

你和你的团队是如何保障代码质量的呢?

时间: 2024-12-27 16:16:46

javascript检验工具的比较的相关文章

JavaScript 预解析的原理及实现

事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. (1) 如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们

访问本页面 您的浏览器需要支持JavaScript的解决办法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百度site:首页出现"访问本页面,您的浏览器需要支持JavaScript".这样的情况,对于一个刚刚引起搜索引擎重视的新站来说是相当大的打击,需要尽快找出原因跟解决办法. 首先分析原因,用站长工具模拟搜索引擎蜘蛛抓取,结果却是"访问本页面,您的浏览器需要支持JavaScript".用谷歌管理员工具中实

JavaScript中的anchor()方法使用详解

  这篇文章主要介绍了JavaScript中的anchor()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法创建一个用作超文本目标的HTML锚. 语法 ? 1 string.anchor( anchorname ) 下面是参数的详细信息: anchorname: 定义了锚的名称 返回值: 返回其锚标记的字符串 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>JavaScript

14 个经典的Javascript代码

javascript ■打开■ <input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开> <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT> ■另存为■ <input name=Button onClick=

Javascript 遍历页面text控件详解

 本篇文章主要是对Javascript遍历页面text控件进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 以下函数实现了列出页面中所有html控件类型为text的控件ID    代码如下:         function Texts()          {               //var els= document.getElementsByTagName("*");   //els得到页面所有控件               var els= document.

关于DJANGO和JAVASCRIPT的时间

最近,实际一些简单统计时,要到库里去检索数据出来用HIGHCHARTS画图, 作一个简单的回照..   DJANGO用TEMPLATEVIEW来作.专业,正规:) class SAView(TemplateView): template_name = 'version/sa_site.html' paginate_by = 10 def get_context_data(self, **kwargs): context = super(SAView, self).get_context_data

利用PHP+JavaScript打造AJAX搜索窗

一. 引言 Web世界中一项广为使用的功能就是搜索.随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门".在这方面,Yahoo!率先提供出其Y!Q服务.这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中.是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面. Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评.原因何在?首先,它要求客户

使用PHP JavaScript制作AJAX搜索引擎

一. 引言 Web世界中一项广为使用的功能就是搜索.随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门".在这方面,Yahoo!率先提供出其Y!Q服务.这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中.是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面. Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评.原因何在?首先,它要求客户

JavaScript 函数

JavaScript 函数定义 JavaScript 使用关键字 function 定义函数 函数可以通过声明定义,也可以是一个表达式 函数声明 函数声明的语法 : function sum1(n1,n2){ return n1+n2; }; 函数声明后不会立即执行,会在我们需要的时候调用到 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句所以不以分号结束 函数表达式,又叫函数字面量 JavaScript 函数可以通过一个表达式定义 函数表达式可以存储在变量中: va