摘要：看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。代码校验工具能够让你在写代码时避免一些低级的错误。同时，也有友好的文档针对每一条规则。在上文提高的所有工具当中它对有着最好的支持。
看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。看到sitepoint上的一篇2015年的文章觉得不错就给翻译出来了。本文译自A Comparison of JavaScript Linting Tools，本文由 @Darko 翻译，转载请保留原文链接。
JavaScript代码校验工具能够让你在写代码时避免一些低级的错误。尽管我有很多年的开发经验，我仍然会犯一些语法错误并且忘记处理我的错误。一个好的校验工具或者格式化工具，可以让我避免这些错误，以免浪费我的时间（甚至是我客户的时间）。一个好的校验工具还能确保一个项目保持一个固定的代码风格。
有很多关于JavaScript的校验工具，你怎样选择其中的某一个呢？让我们一起来看看它们有什么样的特性以及优缺点。接下来我要介绍四种常用的选择：JSLint，JSHint，JSCS和ESLint。
Overview这四个工具的基本用法都是类似的，它们定义了一套规则用来解析和报告js文件里面的问题。它们都可以通过npm来进行安装。可以通过命令行来调用它们，给命令行传递文件参数，也可以作为grunt这一类工具的插件被使用，或者可以集成到编辑器中。它们都支持使用注释作为配置。
以上就是它们所有的相似之处了，每一个工具都有优缺点，只是有些工具相比于其它工具更加有优势。
JSLintJSLint是这四种校验工具中最为古老的。Douglas Crockford（译注:《JavaScript 语言精粹》的作者）在2002年创造了它，它是强制使用的，为了保留它所认为的JavaScript这门语言的精华部分。如果你认同他的观点，对你而言，JSLint将会是一个好的工具。安装完成马上即可使用。
JSLint的缺点是它是不可以进行配置和扩展的。你不能禁用它的某些特性，并且缺乏文档。它的官网并没有什么用处，例如，它缺少如果将这个工具整合到你的编辑器的任何信息。
优点：
配置规则都已经定好了，安装即可使用（如果你同意这些强制的规则的话）
缺点：
JSLint没有可配置文件，你无法对它的规则进行更改
配置规则的数量有限，有些规则无法禁用
不支持自定义规则
缺少文档
很难定位到哪条规则导致了错误
JSHintJSHint是JSLint的一个更加灵活，可配置的一个版本，它从JSLint中fork出来。你能够自己配置每一条规则，并且把他们写到一个配置文件里，这让JSHint更易于在大型项目中使用。同时，JSHint也有友好的文档针对每一条规则。所以能够准确的知道它做了些什么。把它整合到编辑器中也是很简单的一件事。
JSHint的一个小缺点就是，它的默认配置是非常轻量级的。这就意味着你要做一些设置才能使其变得有用。和ESLint相比，为了启用或者禁用某些错误的报告，要知道需要修改哪些规则也是比较困难的。
优点：
大多数设置都是可配置的
支持配置文件，更易于在大型项目中使用
支持很多第三方库或和框架，例如jqery,QUnit,NodeJs,Mocha等等
支持基本的ES语法
缺点：
很难定位到哪条规则造成了错误
有两种类型的配置：强制执行的和比较松散的，这让配置变得有些混乱
不支持自定义规则
JSCSJSCS和以上两个都是不同的，如果不给它一个配置文件或者使用一套预设的规则，它将什么也不做不了，不过你可以从别的网站下载配置文件，所以这并不是什么大问题，并且它有很多的预设规则，比如说jQuery的代码风格的预设规则以及Google的代码风格的预设规则。
它有超过90种不同的规则，并且你可以通过插件创造自定义规则。JSCS也支持自定义输出报告，这使得其更容易与需要其以特定格式输入的工具集成。
JSCS是一个代码风格检查器，这意味着它只捕获与代码格式相关的问题，而不包含潜在的错误。因此，它比其他工具的灵活性更低，但是如果您需要强制执行特定的编码风格，那么JSCS就可以做的很好。
优点：
支持自定义输出报告，可以使其更容易和其它工具进行集成
如果您遵循现有的可用编码风格之一，预设和现成的配置文件可以轻松设置
在报告中，有一个标志包含在规则名之中，所以很容易找出是哪条规则导致了错误
可以利用自定义的插件进行拓展
缺点：
只检测到代码风格的违规，不检测潜在的错误，比如说未使用的变量或者变量的全局污染等
四个工具中性能最差的，但是这并不是一个典型用途的问题
ESLintESLint是这四个工具中最新的，它被设计为易于拓展的，具有大量的自定义规则，并且很容易通过插件的形式来安装。它输出简洁的报告，但是默认包含规则的名称，因此你始终知道是那条规则导致了错误的信息。
ESLint的文档多少有些混乱，规则的列表容易查找，并且按逻辑进行分类，但配置说明在某些地方有点混乱。然而，它提供了如何对编辑器进行集成，插件和示例的链接。
优点：
灵活：任何规则都可以切换使用，并且有些规则有额外的配置可以使用
可拓展性好，并且有很多可用的插件
易于理解的输出报告
包含一些其它工具所没有的规则，使得ESLint更容易检测出代码中潜在的错误
对ES6的支持性最好，是唯一支持JSX的工具
支持自定义输出报告
缺点：
需要一些配置
性能差，但这并不是主要的障碍
推荐在这四个工具中，我选择了ESLint，JSLint太严格并且不可配置，而JSHint缺乏扩展机制。如果您只想检查编码风格，则JSCS是一个不错的选择，但是ESLint也可以这样做，并且它会检查代码中的错误和其他问题。
如果你想使用ES6的话，ESLint也是显而易见的选择。在上文提高的所有工具当中它对ES6有着最好的支持。
JSHint是第二好的选择，如果你不需要ESLint的那些高级特性的话。一旦被正确的配置，JSHint可以捕捉到大量的问题。JSCS有大量可用的规则，如果你不需要编码样式检查（缩进、括号等）以外的任何事情，那么它就是首选。
对于JSLint，我很犹豫要不要推荐它，其它的工具可以做到和他同样的事情但是不会强制要求使用者去使用特定的规则。如果你正巧非常同意它的哪些强制规则，那么也许值得好好去了解一下。
一个好的校验工具是捕捉问题非常重要的一步，但是它只能检测出它的规则许可范围之内的错误。对于更多简单明了的bug的捕捉，我建议使用单元测试，Code reviews也是也是不错的方式。
你和你的团队是如果保证代码质量的呢？可以在评论区留言。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84147.html
摘要：前端日报精选入门指南工作原理的新功能前端本地存储数据库实例教程模块深入探究调查问卷中文译掘金第期构建高性能展开收缩动画译代码检查工具对比前端之旅译年了，这么多前端框架，你会怎样选择掘金译不配置，不出事那些坑其一前端面试的大 2017-07-20 前端日报 精选 CSS入门指南-1：工作原理2017 Amsterdam CSS DayWebpack 3 的新功能：Scope Hoisti...
摘要：对此没有任何限制，它不关心这个。一种控制变化的办法是不可改变的，持久化的数据结构。总结检测变化时开发中的核心问题，而框架们以各种方式解决这个问题。因为组件内的变化是不被允许的。 AngularJS：脏检查 我不知道什么更新了，所以当更新的时候，我只能检查所有的东西。 AngularJS 类似于 Ember，当状态改变的时候，必须人工去处理。但不同的是，AngularJS 从不同的角度来...
摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀 本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
摘要：正文在年，框架的选择并不少。特别的，通过思考这些框架分别如何处理状态变化是很有用的。本文探索以下的数据绑定，的脏检查的虚拟以及它与不可变数据结构之间的联系。当状态产生变化时，只有真正需要更新的部分才会发生改变。 译者言 近几年可谓是 JavaScript 的大爆炸纪元，各种框架类库层出不穷，它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM，到 Backb...
摘要：工具帮助避免在编写时出现愚蠢的错误。并不检测潜在的，比如，未使用的变量或意外的全局变量等。在提到的所有工具中，它具有最广泛的功能支持。使用工具是捕获问题的良好步骤，但只能看到规则允许的错误。也可用于此目的。 Lint工具帮助避免在编写JavaScript时出现愚蠢的错误。尽管有多年的经验，我仍然键入不正确的变量名称，出现语法错误，以及忘记正确地处理error。在浪费自己时间，或更糟糕地...
阅读 777·2023-04-25 23:55
阅读 2515·2023-04-25 14:13
阅读 3122·2019-08-26 13:47
阅读 2749·2019-08-23 18:16
阅读 497·2019-08-23 17:20
阅读 3064·2019-08-23 16:55
阅读 2975·2019-08-22 15:39
阅读 3054·2019-08-20 18:10
