如何利用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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
为原生js Array增加each方法
Apr 07 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
PHP实现的memcache环形队列类实例
2015/07/28 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Three.js学习之网格
2016/08/10 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python logging设置level失败的解决方法
2020/02/19 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
文秘专业大学生求职信
2013/11/10 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
辛亥革命观后感
2015/06/02 职场文书
redis数据结构之压缩列表
2022/03/21 Redis