使用 JSHint 减少 JavaScript 错误

article/2025/10/19 8:09:59

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的文件:

Image title

我们使用如下命令来分析代码:
jshint demo1.js

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

Image title

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

配置JSHint

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

一种方式是使用 --config 参数来指定配置文件:
jshint demo1.js --config config.json

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

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

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

Image title

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

Image title

你可以查看不同的配置选项控制JSHint的行为,详见 http://jshint.com/docs/options/.

一个小例子

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

Image title

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

Image title

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

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

Image title

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

Image title

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

文本编辑器对JSHint的支持

正如你所见,JSHint是一个减少代码错误的非常好的工具。很多编辑器都提供JSHint支持。下面是部分我最喜欢的插件列表:

  • Eclipse 的 webclipse plugin
  • Brackets 的 brackets-jshint
  • SublimeText: 的 SublimeLinter
  • Webstorm 内置在 Code Quality Tools
  • gedit 的 gedit-jshint

Twitter联系我@anabellawats0n


http://chatgpt.dhexx.cn/article/Z6DoAiF9.shtml

相关文章

js...

事件类型 “” “这里面写的是 js代码” 事件类型 就是html标签 的 事件属性 属性值就是 js代码,里面可以写js代码,可以调用函数,可以写js代码 函数也是对象,在JS里,万物皆对象 对象分为2大类,Object 和 …

Jslint、Jshint代码检查工具

Jslint、Jshint代码检查工具 JSLint是一个JavaScript验证工具,JSLint定义了一组编码约定。宗旨:能做并不意味着应该做。JSLint会对它认为有风险的编码实践加标志,另外还会指出哪些是明显的错误,促使养成好的JavaScript编码习惯。 …

jshint相关的配置

jshint相关的配置SublimeText插件推荐:JS错误检查工具 - JSHint与JSHint Gutter NOV 28TH, 2014 9:46 AM 引言 我喜欢使用SublimeText(以下将简称为Sublime)来写JavaScript,但有时候代码量一多,难免会犯些小错误&am…

使用 CommonJS 标准的导出语句时报错 JSHint: ‘module‘ is not defined.(W117)

强迫症看下面这跟红线不舒服: 飘红原因是 JavaScript linting 工具 JSHint 无法识别语法 module.exports(Node.js 特有)。 要解决此错误,则需要配置 JSHint 以识别 Node.js 环境。 可以通过在文件顶部添加注释来完成此操作&…

CSS-IN-JS

集成css代码在js中 一、为什么会有 CSS-IN-JS CSS-IN-JS 是 WEB 项⽬中将 CSS 代码捆绑在 JavaScript 代码中的解决⽅案.这种⽅案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作⽤域和可移植性. 二、CSS-IN-JS 介绍 1、CSS-IN-JS ⽅案的优点: 让 CSS 代码拥有独…

vscode配置JSHint提示工具

vscode配置JSHint提示工具 本文介绍vscode配置JSHint提示工具,规范JavaScript的编码。 首先“Ctrl + P”输入“ext install jshint”,或者选择侧边栏“扩展”直接搜索“jshint”; 然后,下载jshint,如图: 安装第一个jshint,因为我已经安装了所以没有绿色“安装”按钮,…

JSHint介绍

为什么80%的码农都做不了架构师?>>> JSHint跟JSLint非常像,都是Javascript代码验证工具,这种工具可以检查你的代码并提供相关的代码改进意见。 对于你的代码,你可以选择多种方式来进行检验: 第一种方法&…

C++之ofstream::flush与ofstream::close

一.缓冲区知识 1.什么是缓冲区 缓冲区又称为缓存,它是内存空间的一部分。也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区。 缓冲区根据其对应的是输入设备还是输…

超详细ofstream和ifstream详细用法

ofstream和ifstream详细用法 ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间(文章最末尾附上了MSDN中关于这两个函数的解释); 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O,stream这个类有两…

ifstream和ofstream的理解

ifstream和ofstream的理解 开发工具与关键技术:Visual Studio、C 作者:张国军 撰写时间:2019年06月04日各种计算机应用系统通常把一些相关信息组织起来保存在外存储器中,称为文件,并用一个名字(称为文件名…

【Stream】

1、stream不存储数据,而是按照特定的规则对数据进行计算,一般会输出结果; 2、stream不会改变数据源,通常情况下会产生一个新的集合; 3、stream具有延迟执行特性,只有调用终端操作时,中间操作才会…

(转载)C++ ofstream和ifstream详细用法

原文出自【比特网】,转载请保留原文链接:http://soft.chinabyte.com/database/460/11433960.sh [导读] ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间 在C中,有一个stream这个类&…

Stream流:

创建stream流: //单列集合 集合.stream//数组 stream.of(数组)//双列集合 map.entrySet().stream(); stream流的调试: 常用API: - map:相当于对数据进行一个操作,可以自定义返回值等 stream.map() - distinct:可以去除流中的相同元素&…

c++输出文件流ofstream用法详解

目录 一. 输入流 ofstream 用法 Public member functions (1-6) 1, (constructor) 2, ofstream::open 3, ofstream::is_open 4, ofstream::close 5, ofstream::rdbuf 6,ofstream::operator Public member …

C++文件和流

C文件和流 到目前为止,我们已经使用了 iostream 标准库,它提供了 cin 和 cout 方法分别用于从标准输入读取流和向标准输出写入流。 本教程介绍如何从文件读取流和向文件写入流。这就需要用到 C 中另一个标准库 fstream,它定义了三个新的数据…

什么是https

HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容请看SSL。 …

http和https有什么区别 端口号多少

HTTP和HTTPS的基本概念 HTTP:超文本传输协议,是在互联网上应用最广泛的一种网络协议。是一个客户端和服务端请求和应答的标准(TCP),用于从WWW(超文本)服务器传输超文本到本地浏览器的传输协议。…

https 请求的端口是443 注意

注意: 这里录制https的请求 端口号一定是443 才可以抓取到!!!!!! (进坑多次) 转载于:https://www.cnblogs.com/kaibindirver/p/9223595.html

IP地址,开放端口,http与https的区别

文章目录 一、IP地址的概述二、IP地址分类1、**共有地址**2、 **私有地址** 三、IPV4和V6四、子网掩码、网关、DNS1、 子网掩码2、网关3、DNS服务器 五、获取目标IP地址的方法1、 通过ping命令:2、 通过NSLOOKUP命令:1.使用资源监视器查看:2.…

Linux网络——图解HTTPS协议与端口号认识

Linux网络——图解HTTPS协议与端口号认识 一、确保HTTP安全的方式1.1 HTTP明文加密<1> 通信加密<2> 内容加密 1.2 验证通信方身份1.3 验证报文完整性&#xff0c;防止被篡改 二、HTTP加密认证完整性保护HTTPS2.1 SSL/TLS2.2 对称加密2.3 非对称加密2.4 混合加密 三…