编者注:本文是我们的代码优化系列的一部分,我们在其中探讨如何优化编码以提高效率,以期成为更好的编码人员。
在计算机编程掉毛是静态分析代码的过程中找到类似错误的语法,以及代码前途未卜的使用问题 。 用于起绒的工具称为皮棉或短绒 。 今天可用于JavaScript的短毛绒之一是JSHint。
JSHint可用于多个平台。 我们大多数人都熟悉的在线Web工具位于jshint.com 。 还有通过Node.js的命令行工具 , JavaScript API , 多个文本编辑器和 JSHint的IDE插件 。 您可以在JSHint网站的下载和安装页面上查看适用于不同环境的JSHint工具的完整列表。
根据其网站,使用JSHint工具的两种最常见的方式是用作命令行工具和API 。 让我们看一下如何下载使用的工具,以及工具提供的其他优化工具。
通过命令行工具
步骤1
如果您尚未在计算机中安装Node.js,则必须访问其网站并首先下载并安装它。 要检查Node.js是否已成功安装,可以在命令行界面 (CLI)中运行命令npm -version ,它会向您显示计算机中Node.js的版本(或者您可以运行命令npm ,看看会发生什么。
阅读更多: Node.js入门指南
第2步
要安装JSHint工具, npm install jshint在CLI中运行命令npm install jshint 。 如果要检查是否已成功安装jshint -version ,请运行命令jshint -version以查看其版本。 完成此步骤后,安装完成。
第三步
要运行该工具,请转到CLI中JavaScript文件(例如test.js )所在的目录,然后运行命令jshint test.js 该工具对您JavaScript代码进行分析的结果将显示出来(类似这样):
通过JavaScript API
步骤1
从此GitHub链接下载压缩文件,并将其解压缩。 在dist文件夹中,您将找到jshint JS文件(API库)。
第2步
要使用该API,请将jshint JS文件添加到您的项目中并将其链接到您的页面。 可以使用称为JSHINT的函数/对象以JavaScript代码访问API。 下面是一个示例HTML代码,其中JSHintJavaScript API用于分析source数组中存在JavaScript代码并在页面上显示分析结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jshint.js"> </script>
<script> /* Array containing the JavaScript code to be analysed */
var source = [
'var obj = {}',
'foo();'
];
/* Linting options (optional) */
var options = {
undef: true,
unused: true
};
/* API is invoked */
JSHINT(source);
/* The tool's analysis output is written on the page after the JSON object -> String conversion */
document.write(JSON.stringify(JSHINT.data())); </script>
</body>
</html>
第三步
我们将包含要分析JavaScript源代码的source数组和包含linting选项的options对象(稍后将介绍选项 )作为JSHINT函数的参数传递。 分析结果(一个JSON对象)是从JSHINT的data属性data 。
第四步
JSON.stringify在这里仅用于显示,以字符串形式在页面上显示从data函数返回的结果。 美化的 JSON字符串如下所示。 突出显示的部分是JSHint用简单的句子措辞发现的错误。

棉绒选项
整理选项使我们可以配置整理过程。 我们可以指定需要纠正的错误类型或错误类型,而不需要的类型。 在前面的示例中,使用了两种棉绒选项,即undef和unused 。
undef选项标记未声明的变量, unused将标记已声明但从未使用过的变量。 像这些一样,您可以在此页面中看到许多其他选项,如果要搜索选项,则右上角提供了搜索栏。
如果通过Node.js使用CLI工具,则可以在同一目录中的属性jshintConfig下的package.json文件中写入linting选项。 您还可以在JavaScript代码中将选项作为指令添加。
// -- test.js -- /* jshint undef: true, unused: true */ foo(); a = 7;
根据您使用的工具,有更多方法可以在项目中配置棉绒选项。 在此处检查不同的配置方式。
翻译自: https://www.hongkiat.com/blog/code-optimisation-linting-jshint/