作者是 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. 20135208 20135212 LINUX第一次实验报告

    北京电子科技学院(BESTI) 实     验    报     告 课程:信息安全系统设计基础                     班级: 201352 姓名:池彬宁 贺邦 学号:2013521 ...

  2. 20145208 《Java程序设计》第6周学习总结

    20145208 <Java程序设计>第6周学习总结 教材学习内容总结 输入与输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...

  3. 需要中文版《The Scheme Programming Language》的朋友可以在此留言(内附一小段译文)

    首先给出原著的链接:http://www.scheme.com/tspl4/. 我正在持续翻译这本书,大概每天都会翻译两小时.若我个人拿不准的地方,我会附上原文,防止误导:还有些不适合翻译的术语,我会 ...

  4. tmux列表重命名

    查看tmux会话列表时,会话名称是数值递增,不易识别 tmux ls 1: 1 windows (created Fri Oct 21 16:29:46 2016) [175x41]2: 1 wind ...

  5. Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)

    详情请查看 http://aehyok.com/Blog/Detail/26.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  6. 第二十九课:javascript异步处理

    大家知道javascript中有多少方法能够实现异步处理吗?setTimeout(),setInterval()是最常用的两个.XMLHttpRequest对象,进行ajax请求时.postMessa ...

  7. mysql配置详解

    mysql有以下几种日志:  错误日志:    log-err  查询日志:    log  慢查询日志:  log-slow-queries  更新日志:    log-update  二进制日志: ...

  8. NABCD分析java音乐播放器

    程设计题目:java音乐播放器 一.课程设计目的 1.编程设计音乐播放软件,使之实现音乐播放的功能. 2.培养学生用程序解决实际问题的能力和兴趣. 3.加深java中对多媒体编程的应用. 二.课程设计 ...

  9. 关于obj和基本类通过函数参数传进去执行是否改变原来的值

    var obj = { p1 : 1, p2 : 2 }; (function(_/* 这个东东是地址的应用哦 */){ _.p1 = 3, _.p2 = 4 })(obj) var i = 2; ( ...

  10. 【HDU 4925】BUPT 2015 newbie practice #2 div2-C-HDU 4925 Apple Tree

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=102419#problem/C Description I’ve bought an or ...