如何利用JSHint减少JavaScript的错误


Posted in Javascript onAugust 23, 2016

前言

JSHint用于分析和验证JavaScript代码是否符合您的编码规则。这个强大的工具可以帮助发现您代码中错误和问题T,它强制你的团队保持一定的编码惯例和风格,使得代码可靠和更容易阅读.

在这篇文章中,我将向您展示如何安装、配置和使用JSHint。 还包括一个例子,列出了一些我最喜欢的能使用JSHint的编辑器。

安装 JSHint

安装JSHint非常容易,你可以使用 Node 包管理器 (npm)来做。如果你还没有安装npm,你可以从 nodeJS website下载最新版,来安装Node.js 和npm.

一旦安装后npm,你就可以使用如下命令来安装JSHint:

npm install jshint -g

-g 参数是告诉npm我们要全局安装,这样我们就能在任何目录下调用这个命令。

通过命令行检查代码

现在JSHint 已经安装好了,让我们在命令行方式下使用jshint来分析一个JavaScript代码文件。

下面是一个文件名为 demo1.json的文件:

如何利用JSHint减少JavaScript的错误

我们使用如下命令来分析代码:

jshint demo1.js

JSHint告诉我们在demo1.js文件的第8行有一个错误,原因:缺少一个分号。

如何利用JSHint减少JavaScript的错误

如果我们补上缺少的分号,再次运行这个命令,就不会有任何错误信息输出了。

配置JSHint

JSHint有一个默认的配置来分析您的代码,但它的配置设置被设计的非常灵活。 有四种方式来为JSHint提供配置处理文件。

一种方式是使用 --config 参数来指定配置文件:

jshint demo1.js --config config.json

另一种方式是把配置放入一个叫.jshintrc的文件里, 因为 JSHint 会在同级目录下搜索这个配置文件用于代码分析,如果没有找到,它会继续上级目录查找直到根目录 ,这样就允许我们对一个工程设置不同的配置文件。

第三种方式是在 package.json 文件的 jshintConfig 属性下放入配置信息。

这三种方法中的任何一种,配置信息都是JSON格式指定每一个参数来告诉JSHint选项是打开或关闭。例如:在下面的配置文件中的“unused” 和“undef” 是来激活未使用和未定义变量的告警。 “curly” 要求您总是在循环和条件块加上大括号。 “eqeqeq” 表示禁止使用 == 和!= 而应该使用 === and !==.。“globals” 用于指定没有定义在代码中的全局变量白名单。

如何利用JSHint减少JavaScript的错误

第四种方式是以注释的方式将配置信息写入代码文件中。

如何利用JSHint减少JavaScript的错误

你可以查看不同的配置选项控制JSHint的行为。

一个小例子

接下来,让我们操作一下在上面提到的config.json配置文件中的选项。 假设我们有如下的一个 JavaScript 文件,这只是一小段仅供学习的代码。

如何利用JSHint减少JavaScript的错误

如果我们执行jshint 命令demo2.js --config config.json,我们会得到如下的结果:

如何利用JSHint减少JavaScript的错误

在我们的代码中有4个错误。在第9行JSHint提示应该用大括号包裹  “if” 代码块。 定义了变量subscription_id 但没有使用。 在第9行和11行,  “confirm” 和“console” 没有定义。

我们只需稍微修改就能避免前两个错误:

如何利用JSHint减少JavaScript的错误

现在,让我们在 config.json文件中添加一个 devel 选项并设为 true,这样JSHint 就能识别出“confirm” 和“console” 。

如何利用JSHint减少JavaScript的错误

至此,如果我们再次运行 jshint 命令,就没有任何错误了。

总结

JSHint是一个减少代码错误的非常好的工具。很多编辑器都提供JSHint支持。刚兴趣的朋友可以再深入研究JSHint,以上就是利用JSHint减少JavaScript错误的全部内容,希望对大家使用Javascript能有所帮助。

Javascript 相关文章推荐
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript实现2048游戏示例
May 04 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
深入理解(function(){... })();
Aug 16 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
JavaScript中reduce()的用法
May 11 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 #Javascript
深入浅出 jQuery中的事件机制
Aug 23 #Javascript
javascript实现简单的on事件绑定
Aug 23 #Javascript
js实现图片淡入淡出切换简易效果
Aug 22 #Javascript
JS对HTML表格进行增删改操作
Aug 22 #Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 #Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
家长对老师的感言
2014/03/11 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
军事理论课感想
2015/08/11 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
使用python求解迷宫问题的三种实现方法
2022/03/17 Python