随着前端技术的不断发展，JavaScript 呈现出越来越重要的地位，但同时也有许多开发者在 JavaScript 代码的书写和规范方面存在着一些困惑。这时，就需要一款好用的代码检查工具来指导我们编写更高质量的代码。本文将介绍常用的两款 JavaScript 代码检查工具——ESLint 与 JSHint，帮助读者更加深入地了解如何使用代码检查工具提升代码的规范性和可读性。
什么是 ESLint 和 JSHint？
ESLint 和 JSHint 都是 JavaScript 代码检查工具，能够帮助我们提高代码的可读性和减少潜在的错误。
ESLint 是一个开放源代码的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年创造。它使用插件化架构，可以很容易地通过插件进行扩展。而且，ESLint 的默认规则集比 JSHint 更加严格，也更容易进行定制化。
JSHint 是一个古老的 JavaScript 代码检查工具，早于 ESLint。它由 Douglas Crockford 创建于 2011 年，是一个简单的工具，专注于规范的目标。JSHint 最初定位于解决 JavaScript 语言的问题，并在当时提供了一些主流编辑器的插件。
安装 ESLint 和 JSHint
ESLint 和 JSHint 用户都可以使用 npm 命令进行安装。以 ESLint 为例，首先我们需要在命令行工具中输入以下命令：
- --- ------- ------ ----------
这个命令将 ESLint 安装到开发模式中。通常情况下，我们将 ESLint 作为开发依赖来安装：
- --- ------- ------ ----------
安装 JSHint 也是同样的方式
- --- ------- ------ ----------
如何使用 ESLint 和 JSHint
对于 JavaScript 代码检查工具，最为基本和重要的操作就是配置。这里我们将会介绍相关的配置操作，同时展示如何通过代码检查工具将错误或者警告信息报告出来。
配置 ESLint
新建一个 .eslintrc.json 的文件，此文件用来存放 ESLint 的配置
在 .eslintrc.json 文件中增加以下代码
-
------ -
---------- -----
----------- -----
--------- ----
--
---------- -
--------------------
--
---------------- -
-------------- --
--
-------- -
----------------- --
------- --------- ---------
-
-其中：
env对象指定了需要启用哪些全局变量extends指定使用什么规则parserOptions指定解析器选项rules指定需要覆盖的规则
注意：不同的文本编辑器对于某些选项的设置可能存在差异。在不成功运行 linter 的情况下，将这些设置过程中的问题放在自己的 radar 上也是很必要的。
配置 JSHint
安装 JSHint，创建 .jshintrc 文件配置规则。
在 .jshintrc 文件中增加以下代码：
-
------- -----
---------- -
---------- ------
---- -----
--
--------- --
-------- -----
--------- -----
--------- -----
---------- -
--------- ----
-
-其中，
"node": true表示脚本将在 Node.js 环境中运行。"globals"属性定义全局变量，以避免 JSHint 报告。"indent"属性定义代码缩进量。"undef"属性指出是否使用了未定义的变量自动启用警告。"unused"属性指示是否允许定义但未使用的变量自动启用警告。"globals"属性定义的全局变量。
如何使用代码检查工具来发现错误
代码检查工具可以很好地发现代码中的错误。这里我们以构造一个错误为例来向读者展示代码检查工具的使用。
-------- ------ ------------------ - -----
上面的代码中有一个错误——没有使用分号进行结尾。现在我们将 ESLint 和 JSHint 分别运行。
使用 ESLint 发现错误
在使用 ESLint 之前，我们需要提前安装 ESLint，使用以下命令进行安装：
- --- ------- ------ ----------
然后在命令行工具中输入以下命令：
- --- ------ ----- -------------
上述命令将帮助我们发现并自动修复 ESLint 可以修复的错误和警告。
使用 JSHint 发现错误
在使用 JSHint 之前，我们需要提前安装 JSHint，使用以下命令进行安装：
- --- ------- ------ ----------
然后在命令行工具中输入以下命令：
- ------ -------------
这个命令将帮助我们发现 JavaScript 中的错误。如果存在错误，将会输出错误信息。
结论
ESLint 和 JSHint 都是一些非常优秀的 JavaScript 代码检查工具，他们可以大大提高我们代码的规范性，但同时也要注意使用过程中的配置。让我们继续探索如何使用这两个代码检查工具来提升前端代码的质量和可读性。如此，我们就可以编写出更高质量的 JavaScript 代码了。
以上就是关于 ESLint 和 JSHint 的初步介绍和使用指导。在日常的前端开发工作中，代码质量始终是一个至关重要的问题。使用代码检查工具来规范代码、提高代码质量将带来一系列好处，包括提高代码可维护性、减少出错率、提高开发效率等。因此，学习和使用 ESLint 和 JSHint 代码检查工具，将帮助我们编写出更加出色的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f89185f551281026527c1