ESLint vs JSLint vs JSHint—— 三者之间的差异

ESLint vs JSLint vs JSHint—— 三者之间的差异

前言

在编写 JavaScript 代码时，经常会遇到各种语言规范与风格的问题。这是因为 JavaScript 作为一种脚本语言，其规范并不像 Java、C++ 等编译型语言那么严格，存在很多灵活的语法写法，过多或过少的语法在有些情况下即可生效，这样无疑对代码的可维护性与压缩性产生了很大的影响。随着代码量的不断增长，这种问题会愈发严重。三种插件，ESLint、JSLint 和 JSHint，旨在通过分析代码并提供代码最佳实践，来解决这类问题。

ESLint

ESLint 是一种基于 AST 解析的 JavaScript 代码静态分析器，它可以将 JavaScript 代码解析成语法树，进行各种静态检查规则，以检查代码质量、发现潜在的代码缺陷以及应用最佳实践。

ESLint 最初由 Nicholas C. Zakas 在 2013 年创建，是目前最流行的 JavaScript 代码检查工具之一。它在 npm 中有8.6万的 star，超过其他两个工具的总和。

ESLint 的主要功能如下：

• 支持对 ECMAScript 6 语法的检查。
• 通过插件机制去除检查不必要的文件、文件夹。
• 在编码过程中实时检查错误。
• 支持 JavaScript 代码的自动格式化与修复。
• 支持外部配置文件来访问 ESLint 规则。
• 支持优秀的编辑器插件，如 VS Code、Sublime、Atom 等。

ESLint 支持约 230 多种规则，且易于配置，可以根据需求自己配置代码检查规范。例如，一个简单的 ESLint 配置文件如下所示：

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

这个配置文件指定了两个规则：如果某个 JS 文件中的语句没有使用分号，则视为错误，并且把单引号应用到所有字符串文字中而不是双引号。

JSLint

JSLint 是最早的静态代码检查工具，由 JavaScript 专家 Douglas Crockford 创建并维护。JSLint 对 JavaScript 代码的评估侧重于代码的风格、约定以及最佳实践，并以其所调节的严格程度而闻名。

它的主要功能如下：

• 具有文本编辑器，支持实时性错误检查和代码格式化。
• 对 JavaScript 语言的语法和最佳实践进行了严格的检查，并强制通过 JSLint 预定义的规则检查代码质量。

在使用 JSlint 的过程中，要了解它的一个特殊性质：JSLint 并不支持自定义控制结构，这意味着很多时候它会激励钢铁一般的严谨性，因此很难有弹性的去应对代码实际情况。

下面是一个简单的 JSLint 配置文件示例：

-- -------------------- ---- -------
-
    ---------- ------
    -------- ------
    --------- ---
    --------- ---
    ------------ --
    ---------------- ---
    ----------- --
    --------- ---
    -------- -----
-

JSHint

JSHint 是与 JSLint 类似的 JavaScript 代码检查工具，其主要目的是提供一个改进过的代码检查器，并实时反馈代码中存在潜在瑕疵和错误，提高代码质量。JSHint 的大部分规则都基于 JSLint，但是将一些严格的规则变得更加灵活。

JSHint 的主要功能如下：

• 它可以有效地执行代码分析并捕获常见错误。
• 具有单独的 JSHint 搜索插头，因此可以很快进行检验。
• 通过将 JSHint 整合到编辑器中，可以更加有效地处理问题，并在更少的时间内完成项目。
• JSHint 提供了自定义规则的选项，可以定制自己的规则并与已有规则混合使用。

下面是一个简单的 JSHint 配置文件示例：

{
    "esversion": 6,
    "undef": true,
    "eqeqeq": true,
    "unused": true
}

比较三者

下表列出了 ESLint、JSLint 和 JSHint 之间的区别：

结论

虽然 ESLint 在最新板块中占据优势，但是选择一个工具通常取决于项目需求和个人偏好。因此，在选择一种 JavaScript 代码检查工具时，应考虑以下因素：

• 是否需要定制一个可定制的规则，并且是否需要使用插件机制对其进行扩展。
• 是否需要快速对代码中的错误进行反馈。
• 工具是否在项目框架中运行，并能够使用最新的规范。

总的来说，作为前端工程师，了解这三种常见的代码静态检查工具，以及它们的适用场景和用法将非常有益。

以上仅是本文简要总结，如有详尽需求可查看官方文档。

参考

• ESLint官方网站
• JSLint官方网站
• JSHint官方网站

本文实例：

以下为简单错误演示

console.log(233)

以上代码本应是一个合法的 JavaScript 代码，但是没有添加分号被检查为语法错误。

ESLint 将此视为一种语法错误，并给予警告。

JSHint 将此视为一假语法错误，并给予警告。

JSLint 将此视为一种语法错误，并给予警告。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a95a8a48841e9894596254