解锁 ESLint 的秘密：代码质量的守护者(上)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍 ESLint 的背景和作用

ESLint 的背景是 Airbnb 公司在开发 JavaScript 代码时遇到了一些问题，例如代码质量低下、代码可读性差、编码风格不统一等。为了解决这些问题，Airbnb 开发了一个名为 ESLint 的工具，用于检查 JavaScript 代码的语法和风格问题。

ESLint 的作用主要包括以下几点：

1. 代码质量检查：ESLint 可以检查代码中的错误和警告，例如未使用的变量、重复的变量名、不存在的模块等。这有助于提高代码质量，避免潜在的问题。
2. 编码规范检查：ESLint 可以检查代码的编码规范，例如变量命名、函数命名、文件命名等。这有助于保持代码的一致性和可读性。
3. 代码可读性检查：ESLint 可以检查代码的可读性，例如注释、空行、换行等。这有助于提高代码的可读性，方便其他开发者更容易地理解和维护代码。
4. 代码最佳实践检查：ESLint 可以检查代码的最佳实践，例如避免全局变量的使用、避免 eval() 函数的使用等。这有助于提高代码的安全性和稳定性。

总的来说，ESLint 是一个非常有用的工具，可以帮助开发者提高代码质量，保持编码规范，遵守最佳实践。在实际开发过程中，开发者可以根据项目的需求和规范，自定义 ESLint 配置，以满足不同的代码风格和规范要求。

二、ESLint 的基本概念和工作原理

解释什么是 ESLint

ESLint 是一个流行的 JavaScript 代码风格和语法检查工具，它旨在帮助开发者遵守一定的编码规范和最佳实践。ESLint 最初由 Airbnb 开发，现在由社区维护。

描述 ESLint 的工作原理

ESLint 的工作原理可以简单地描述为：通过配置文件定义规则集 -> 解析输入代码 -> 逐个检查代码中的每个 token -> 根据规则集判断 token 是否符合规则 -> 报告不符合规则的 token 及其原因。

具体来说，ESLint 的工作原理如下：

1. 配置文件：ESLint 使用一个配置文件来定义规则集。配置文件是一个 JSON 格式的文件，其中包含了各种规则、插件和其他配置选项。开发者可以根据项目的需求和规范，自定义 ESLint 配置，以满足不同的代码风格和规范要求。
2. 解析输入代码：ESLint 将输入的代码解析成一系列的 token。token 是代码的基本组成单元，例如关键字、变量名、字符串、数字等。
3. 逐个检查代码中的每个 token：ESLint 会将解析后的 token 逐个送到规则集中进行检查。每个规则集包含了一系列的规则，用于检查 token 是否符合规则。例如，变量名是否符合规范、函数参数是否正确等。
4. 根据规则集判断 token 是否符合规则：ESLint 会根据规则集的规则，判断 token 是否符合规则。如果 token 不符合规则，则 ESLint 会记录下来，并报告给开发者。
5. 报告不符合规则的 token 及其原因：ESLint 会生成一份报告，报告不符合规则的 token 及其原因。开发者可以根据报告来修改代码，使其符合 ESLint 的规则。

总的来说，ESLint 的工作原理就是通过配置文件定义规则集，解析输入代码，逐个检查代码中的每个 token，并根据规则集判断 token 是否符合规则，最后生成一份报告来报告不符合规则的 token 及其原因。

三、ESLint 的安装和配置

介绍如何安装 ESLint

要安装 ESLint，可以按照以下步骤进行操作：

1. 打开命令行工具（如 Windows 上的 cmd 或 Linux / macOS 的终端）。
2. 使用 npm 或 yarn 全局安装 ESLint。对于 npm，输入以下命令：

npm install -g eslint

对于 yarn，输入以下命令：

yarn global add eslint

1. 安装 ESLint 配置文件。ESLint 需要一个配置文件来定义规则集。可以使用以下命令安装默认配置文件：

eslint --init

这将引导你创建一个 .eslintrc.* 的配置文件。

1. 安装项目依赖。ESLint 需要安装项目依赖来检查项目中的代码。可以使用以下命令安装项目依赖：

npm install

或

yarn

1. 配置项目。安装完依赖后，需要使用 ESLint 配置文件来配置项目。可以使用以下命令配置项目：

eslint --config [配置文件路径]

其中，[配置文件路径] 是你刚刚创建的 .eslintrc.* 文件的路径。

1. 运行 ESLint。现在可以运行 ESLint 来检查项目中的代码了。可以使用以下命令运行 ESLint：

eslint [文件路径]

其中，[文件路径] 是你要检查的 JavaScript 文件的路径。

1. 查看报告。ESLint 会生成一份报告，报告不符合规则的 token 及其原因。可以使用以下命令查看报告：

eslint [文件路径] --report

总的来说，安装 ESLint 需要以下步骤：

• 使用 npm 或 yarn 全局安装 ESLint。
• 安装 ESLint 配置文件。
• 安装项目依赖。
• 配置项目。
• 运行 ESLint。
• 查看报告。

提供一些常见的配置示例

以下是一些常见的 ESLint 配置示例：

1. 基本配置：

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:node/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

这个配置使用了 ESLint 的默认推荐规则，以及 Node.js 推荐的规则。同时，指定了解析器的版本和源代码类型。此外，指定了缩进为 2 个空格，使用双引号，强制使用分号等规则。

1. 支持 React 组件：

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:node/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

这个配置在基本配置的基础上，添加了 React 相关的规则。例如，支持 React 组件，检查 React hooks 的使用是否符合规则等。

1. 支持 Vue 3：

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:node/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "vue/no-self-assign": "error",
    "vue/valid-template-syntax": "error"
  }
}

这个配置在基本配置的基础上，添加了 Vue 3 相关的规则。例如，支持 Vue 3 的语法，检查自定义指令的用法等。

总的来说，ESLint 的配置选项丰富，可以根据项目的需求和规范进行自定义。