作者是 Jani Hartikainen,英文好的同学直接阅读原文。 原文

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

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

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也有助于达到该目的。

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

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

  1. JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路(一)初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

随机推荐

  1. Linux第五次学习笔记

    处理器体系结构 Y86指令集体系结构 定义一个指令集体系结构 ,包括定义各种状态元素.指令集和它们的编码.一组编程规范和异常事件处理. 程序员可见的状态 Y86程序中的每条指令都会读取或修改处理器状态 ...

  2. Opencv实现运动检测

    运动检测多种多样,这里的需求只是检测到有运动物体就行了,而且 要尽量减少误报的情况.另外尽量降低CPU的消耗,因为最终需要在树莓派上面运行. 看了一些中文的文章,发现无法很好地理解别人说的内容,反而是 ...

  3. 疯狂位图之——位图实现12GB无重复大整数集排序

    <Programming Pearls>(编程珠玑)第一章讲述了如何用位图排序无重复的数据集,整个思想很简洁,今天实践了下. 一.主要思想 位图排序的思想就是在内存中申请一块连续的空间作为 ...

  4. HoloLens开发手记 - Unity之Spatial mapping 空间映射

    本文主要讨论如何在Unity项目中集成空间映射功能.Unity内置了对空间映射功能的支持,通过以下两种方式提供给开发者: HoloToolkit项目中你可以找到空间映射组件,这可以让你便捷快速地开始使 ...

  5. 窥探算法之美妙——寻找数组中最小的K个数&python中巧用最大堆

    原文发表在我的博客主页,转载请注明出处 前言 不论是小算法或者大系统,堆一直是某种场景下程序员比较亲睐的数据结构,而在python中,由于数据结构的极其灵活性,list,tuple, dict在很多情 ...

  6. selection伪元素小解

    上一篇:<RGBA与Opacity区别小解> p{font-size:14px;} 今天说一个简单的伪元素::selection,它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色. ...

  7. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  8. 【转载】gcc 使用中常用的参数及命令

    本文转载自:http://www.cnblogs.com/yaozhongxiao/archive/2012/03/16/2400473.html 如需转载,请注明原始出处.谢谢. --------- ...

  9. [代码片段]javascript检查图片大小和格式

    function checkImgType(input) { var this_ = document.getElementsByName('imgFile')[0]; var filepath = ...

  10. 第二节Unity3D开发环境安装(windows系统)

        这一节准备安装开发环境. 1. 首先先下载软件包:http://pan.baidu.com/s/1imYVv  4.2版本2.下载完后,解压会看到两个文件(运行第二个安装包) 3.准备安装,这 ...