如何利用JSHint减少JavaScript的错误

前言

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 demo1.js

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

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

配置JSHint

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

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

jshint demo1.js --config config.json

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

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

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

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

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

一个小例子

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

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

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

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

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

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

总结

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

赞 (0)

相关推荐

  • 解决JS中乘法的浮点错误的方法

    JS里做小数的乘法运算时会出现浮点错误,具体可以测试一下: <script> alert(11*22.9) </script> 结果是251.89999999999998 而不是251.9 这个问题想必有很多人为之头痛.那么如何解决呢?在此给出解决办法. 1. 复制代码 代码如下: <script> alert(11*(22.9*10)/10): </script> 解决问题的大概思路就是,先把因数放大为整数,最后再除以相应的倍数,这样就能得到正确的结果了.

  • Eclipse去除js(JavaScript)验证错误

    第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Enable Javascript Sematic validation前面的勾去掉; 第二步:右键项目 -> properties -> Builders 去掉JavaScript Validator 前面的勾如果Builders中没有JavaScript Validator这一项.那么去.proje

  • 分析Node.js connect ECONNREFUSED错误

    最近在准备Angularjs +node.js demo的时候在我的mac开发中 遇见此错误,如下: events.js:71 throw arguments[1]; // Unhandled 'error' event ^ Error: connect ECONNREFUSED at errnoException (net.js:770:11) at Object.afterConnect [as oncomplete] (net.js:761:19) 最后在stackoverflow找到解决

  • js 未结束的字符串常量错误解决方法

    1.JAVASCRIPT引用时,使用的字符语言不一致. 比如:<script type="text/javascript" src="xxx.js" charset="UTF-8″>.xxx.js文件内部使用的是GB2312的格式,外面调用使用的是UTF-8,所以文件内部部分特殊字符因为格式不一致,出现乱码,造成此原因. 2.JAVASCRIPT输出HTML字符时,前后标记不匹配. 这种比较常见,往往在输出字符串时,出现单引号(')或双引号(&

  • Node调试工具JSHint的安装及配置教程

    现在我们介绍一种在Node下检查简单错误的JS代码验证工具JSHint. JSHint的具体介绍参考http://www.jshint.com/about/,说直白点儿,JSHint就是一个检查JS代码规范与否的工具,它可以用来检查任何(包括server端和client端)地方的JS代码的规范性.它提供了配置的方法,从而让开发者自己来定义检查哪些规范上的错误.这就给开发者带来了很大的便利性,因为在开发过程中,尤其是在团队开发过程中会经常遇到各种各样因不符合规范而带来的问题,或者一些常见的文本错误

  • javascript Error 对象 错误处理

    Error对象 Property:   name: 错误名   number: 错误号   description: 描述   message: 错误信息,多同description  FF Only 属性   fileName: 错误发生的文件   stack: 错误发生时的调用堆栈 Constructor:   Error(){     this(0,"")} Error(description){     this(0,description)} Error(number,des

  • Javascript 错误处理的几种方法

    1.使用window.onerror指定错误处理函数. 当有错误的时候,onerror会被callback. 当某个JavaScript block中有多个script错误时,第一个错误触发后(回调callback),当前Javascript block后面的script会被自动Drop忽略掉,不被执行. 如:  复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • Nodejs Post请求报socket hang up错误的解决办法

    参考nodejs官网发送http post请求的方法,实现了一个模拟post提交的功能.实际使用时报socket hang up错误. 后来发现是请求头设置的问题,发送选项中需要加上headers字段信息(这个估计也和对方的服务器有关,对于不完成的post请求头,可能被丢弃了). 完整的代码如下(遇到类型问题的同学可以做个参考): 复制代码 代码如下: var querystring = require('querystring')   , http = require('http'); var

  • javascript 容错处理代码(屏蔽js错误)

    国外银行页面就是因为这样的错误,导致用户大量流失不敢用这个银行的网上银行等导致损失惨重. 所以一个想要在用户体验与公司实力上都是不容出现的错误,就是不影响使用也不能让用户反感,我们一直致力于为大家提高更好的代码,所以这里我们将会大家整理一些常用的代码,使用方法什么,希望大家以后能越来越支持我们,让我们共同发展. 第一种:我们自己也在用的 复制代码 代码如下: <SCRIPT language=javascript> <!-- window.onerror=function(){retur

  • 如何利用JSHint减少JavaScript的错误

    如何利用JSHint减少JavaScript的错误

    前言 JSHint用于分析和验证JavaScript代码是否符合您的编码规则.这个强大的工具可以帮助发现您代码中错误和问题T,它强制你的团队保持一定的编码惯例和风格,使得代码可靠和更容易阅读. 在这篇文章中,我将向您展示如何安装.配置和使用JSHint. 还包括一个例子,列出了一些我最喜欢的能使用JSHint的编辑器. 安装 JSHint 安装JSHint非常容易,你可以使用 Node 包管理器 (npm)来做.如果你还没有安装npm,你可以从 nodeJS website下载最新版,来安装No

  • ES7中利用Await减少回调嵌套的方法详解

    ES7中利用Await减少回调嵌套的方法详解

    前言 我们知道javascript是没办法阻塞的,所有的等待只能通过回调来完成,这就造成了回调嵌套的问题,导致代码乱到爆,这时候Await就有用处了. 对于await的底层机制这里就不详述了,以免将文章的篇幅拖的很长,需要的朋友们可以参考这篇文章:http://www.jb51.net/article/123257.htm,下面开始本文的正式内容. 利用Await减少回调嵌套 我们大家在开发的时候,有时候需要发很多请求,然后经常会面临嵌套回调的问题,即在一个回调里面又嵌了一个回调,导致代码层层缩

  • JavaScript 程序错误Cannot use 'in' operator to search的解决方法

    JavaScript 程序错误Cannot use 'in' operator to search的解决方法

    今天编程时,JavaScript 程序报了这样的错误:Cannot use 'in' operator to search for...,具体错误信息如下: 坦白说,这样的错误最难调试.因为它并不指向你所写的具体代码,而是泛泛指向了 lib.js 文件(该文件通常是第三方的打包压缩库),你几乎无法依据错误类型与错误指向来定位到实际编程中的错误位置. 怎么办? 这个时候,只有发挥"死磕"精神了! 死磕步骤: 依据故障页面以及错误信息,定位到出错的文件,这一点应该不难: 在出错的页面中,依

  • JavaScript中错误正确处理方式小结你用对了吗

    JavaScript中错误正确处理方式小结你用对了吗

    JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

  • 再谈javascript常见错误及解决方法

    初学Javascript,每天总是被很小的问题折磨半天,今晚就有好几个小问题. 第一:全部使用双引号造成匹配错误 <input type="checkbox" onmouseover="document.getElementById("test").style.display="none":"/> 改行一直报错误:unexpected toke "}"  检查半天也没有发现错误,对照发现视频上是

  • 利用CSS、JavaScript及Ajax实现图片预加载的方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

  • 利用原生的JavaScript实现简单拼图游戏

    利用原生的JavaScript实现简单拼图游戏

    前言 本篇主要讲解,如何利用原生的 JavaScript 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑 想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制 图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做

  • 常见的JavaScript内存错误及解决方法

    常见的JavaScript内存错误及解决方法

    目录 1.计时器的监听 2.事件监听 3.Observers 4. Window Object 5. 持有DOM引用 5个常见的JavaScript内存错误 前言: JavaScript 不提供任何内存管理操作.相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集. 既然我们不能强制的垃圾回收,那我们怎么知道它能正常工作?我们对它又了解多少呢? 脚本执行在此过程中暂停 它为不可访问的资源释放内存 它是不确定的 它不会一次检查整个内存,而是在多个周期中运行 它是不可预

  • Spring Boot利用Lombok减少Java中样板代码的方法示例

    前言 Lombok想要解决了的是在我们实体Bean中大量的Getter/Setter方法,以及toString, hashCode等可能不会用到,但是某些时候仍然需要复写,以期方便使用的方法:在使用Lombok之后,将由其来自动帮你实现代码生成,注意,其是在运行过程中,帮你自动生成的.就是说,将极大减少你的代码总量. Lombok的官方地址: https://projectlombok.org/ 其实说实话第一次听到Lombok的时候,是从一个带我的匈牙利老师傅那里学来的.那个时候他给了我一套J

  • javascript中错误使用var造成undefined

    在javascript中根据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量可以被所有的脚本访问:在函数中定义的变量是局部变量,局部变量只在函数内有效. 如果全局变量和局部变量使用相同的变量名,则局部变量将会覆盖全局变量. 例子代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js中全局变量与局部变量</title&

随机推荐