剑客
关注科技互联网

用 JSHint 减少 JavaScript 错误

JSHint 是软件开发中的一个开源库。它可以用于来分析JavaScript代码,以及验证JavaScript代码是否按照你设置的魔种编码规则进行编译。这一强大的工具帮助你在代码中发现错误和问题,并且它还能强制你的开发团队保持某种特定的编码惯例和风格。这样就使得代码更可靠、可读性更强。

在这篇文章中,我将向你展示怎样安装、配置和使用JSHint。我同时也附上了例子和一个编辑器的清单,这个清单中列出了一些我最喜欢的编辑器,你可以在上面使用JSHint。

安装JSHint

安装JSHint的操作很简单,你可以通过Node包管理器(npm)进行安装。如果你没有npm,也可以在 nodeJS website 下载最新版本,它包括安装Node.js和npm。

在npm安装完后,你可以安装通过shell安装JSHint,输入下面的命令即可:

npm install jshint -g

-g标记会传递信息给npm,即我们打算在系统中用全局的方式安装 jshint  包,这样我们就可以在任意文件夹中操作命令了。

从CLI检查代码

安装好 JSHint 之后,通过在命令行下运行 jshint 命令来对一个 JavaScript 文件进行测试。

下面这个文件名为 demo1.json

用 JSHint 减少 JavaScript 错误

可以执行下面这个命令来分析代码:

jshint demo1.js

JSHint 指明 demo1.js  的第8行有一个错误,是由于缺少分号导致的。

用 JSHint 减少 JavaScript 错误

补充分号并重新运行命令,就不会再有错误消息输出了。

配置 JSHint

JSHint 有一个默认的配置用于分析代码,但它的设计允许使用根据需要来进行灵活的设置。有 4 种方式配置 JSHint 来处理我们的文件。

第一种方式是通过 –config 参数指定配置文件:

jshint demo1.js –config config.json

第二种方式是将配置保存在一个名为  .jshintrc 的文件中,然后 JSHint 会在与要分析的文件相同的目录下搜索这个文件,如果没有找到,则在上一级目录中继续寻找,直到文件系统的根目录。这样每个项目都可以拥有不同的配置文件。

第三种方式是在将配置写在 package.json 文件中的 jshintConfig 属性里。

上述三种方式的配置都采用 JSON 格式,每个参数都告诉 JSHint 这个选项是打开还是关闭。例如,下面的配置文件中 “unused” 和 “undef” 选项被激活,这表示在变量未赋值或未定义时会发出警告。“curly” 要求你必须在循环或条件分支的语句块上使用花括号。“eqeqeq” 禁止使用 == 和 !=,而用 === 和 !== 来代替他们。“globals” 则指定一个列表,申明列表中的项是全局的,因而不需要在原代码中出现对它们的定义。

用 JSHint 减少 JavaScript 错误

第四种方式是在文件内部使用特殊的注释配置。

用 JSHint 减少 JavaScript 错误

可以在 http://jshint.com/docs/options/ 看到不同的配置选项是如何控制 JSHint 行为的。

一个小例子

现在来看看上面提到的在 config.json 中指定的操作选项。假设有如下 JavaSript 文件,这是为学术目的而准备的一小段代码。

用 JSHint 减少 JavaScript 错误

执行 jshint 命令,参数 demo2.js –config config.json,会得到如下结果:

用 JSHint 减少 JavaScript 错误

这段代码有4个错误。JSHint 指出第9行的 “if” 语句块必须使用花括号。变量 subscription_id 在代码中定义了却没有使用。另外,第9行和第11行的 “confirm” 和 “console” 没有定义。

现在做一点小小的改动来解决前两个错误:

用 JSHint 减少 JavaScript 错误

然后在 config.json 文件中将 devel 选项设置为 true,使得 JSHint 知道 “confirm” 和 “console” 是全局变量。

用 JSHint 减少 JavaScript 错误

再次运行 jshint 命令,JSHint 就不会报错了。

支持 JSHint 的文本编辑器

大家都看到了,JSHint 对减少代码中的错误做出了伟大的贡献。很多编辑器已经支持 JSHint。下面的列表中是其中我喜欢的一些编辑器:

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址