如何利用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 21 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JS中表单的使用小结
Jan 11 Javascript
jquery退出each循环的写法
Feb 26 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
Node 代理访问的实现
Sep 19 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php中几种常见安全设置详解
2010/04/06 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
在视频前插入广告
2006/11/20 Javascript
javascript编程起步(第二课)
2007/02/27 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python中as用法实例分析
2015/04/30 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python字符串中的单双引
2017/02/16 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
档案管理员岗位职责
2013/12/01 职场文书
医学生自我评价
2014/01/27 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
小学生手册家长意见
2015/06/03 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js