ESLint 语法检验工具的使用

---

前言

在计算机科学中，lint 是一种工具的名称，它用来标记代码中，某些可疑的、不具结构性（可能造成 bug）的语句。它是一种静态程序分析工具，最早适用于 C 语言，在 UNIX 平台上开发出来。后来它成为通用术语，可用于描述在任何一种编程语言中，用来标记代码中有疑义语句的工具。今天介绍到的 ESLint，便是 JavaScript 20 多年的发展历程中主流程序分析工具之一。

ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外。

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST（抽象语法树） 去分析代码中的模式。
• ESLint 拥有丰富的 rules 规则，并支持自定义 rules。
• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

一、安装

1. cmd 命令式安装

# 安装 eslint 模块
$ npm install eslint --save-dev

# 设置配置文件
$ ./node_modules/.bin/eslint --init

# 运行ESLint
$ ./node_modules/.bin/eslint yourfile.js

2. 编辑器式安装

打开 Vscode，找到扩展中心，搜索安装 eslint 插件即可。

二、配置方式

ESlint 被设计为完全可配置的，这意味着可以关闭每一个规则而只运行基本语法验证，或混合和匹配 ESLint 默认绑定的规则和自定义规则。有两种主要的方式来配置 ESLint：

• Configuration Comments： 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
• Configuration Files： 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，可以在命令行运行时指定一个任意的配置文件。

// 配置文件优先级
const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json",
];

1. 配置对象

• Environments： 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
• Globals： 脚本在执行期间访问的额外的全局变量。
• Rules： 启用的规则及其各自的错误级别。

2. 指定解析器选项 parserOptions

ESLint 允许你指定想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。当然，如果需要可以覆盖默认设置，以启用对其他 ECMAScript 版本或 JSX 的支持。

关于解析器选项可以在 .eslintrc.* 文件中使用 parserOptions 属性设置。配置选项如下：

• ecmaVersion：默认设置 3，5 ECMAScript 版本，可以使用 6、7、8、9、10 来指定需要使用的 ECMAScript 版本，当然使用对应的年份版本号也是可以的，如 6 对应 2015。
• sourceType：设置为 “script” (默认) 或 “module”（如果你的代码是 ECMAScript 模块)。
• ecmaFeatures： 这是个对象，表示想使用的额外的语言特性：
  • globalReturn：允许在全局作用域下使用 return 语句
  • impliedStrict：启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
  • jsx：启用 JSX
  • experimentalObjectRestSpread：启用实验性的 object rest/spread properties 支持。

3. 规则定义 rules

// 定义规则部分
{
  "rules": {
    "semi": ["error", "always"], // 使用分号结束
    "quotes": ["error", "double"] // 使用双引号
  }
}

其中，"semi"和"quotes"是 ESLint 中规则的名称，规则中的第一个值是指错误级别。

这三个错误级别可以允许细粒度的控制 ESLint 是如何应用规则：

错误级别	描述
off or 0	关闭规则
warn or 1	将规则视为一个警告（不会影响退出码）
error or 2	将规则视为一个错误（退出码为 1）

4. .eslintrc.json 示例

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": "error"
  }
}

配置文件传送门：configuring 配置文件

三、规则页面

为了对规则有更好的理解，ESLint 对其进行了分门别类。

所有的规则默认都是禁用的。在配置文件中，使用 “extends”: “eslint:recommended” 来启用推荐的规则，报告一些常见的问题，在下文中这些推荐的规则都带有一个 ✔ 标记。

"extends": "eslint:recommended" // 开启规则页面中 ✔ 的规则

规则分类主要有以下：

• Possible Errors：这些规则与 JavaScript 代码中可能的错误或逻辑错误有关。
• Best Practices：这些规则是关于最佳实践的，帮助避免一些问题。
• Strict Mode：该规则与使用严格模式和严格模式指令有关。
• Variables：这些规则与变量声明有关。
• Node.js and CommonJS：这些规则是关于 Node.js 或 在浏览器中使用 CommonJS 的。
• Stylistic Issues：这些规则是关于风格指南的，而且是非常主观的。
• ECMAScript 6：这些规则只与 ES6 有关, 即通常所说的 ES2015。
• Deprecated
• Removed：来自旧版本的 eslint（在弃用策略之前）的这些规则已被较新规则替换。

规则页面传送门：Rules 规则页面

总结

以上便是今天介绍到的 ESLint 相关的全部内容，通过配置信息或者配置文件能够实现对 JavaScript 语法进行检测，对于 eslint 中内置的 rules 规则可以到官网中阅读详细内容。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！
官方文档：ESLint