什么是 ESlint，有什么作用？

约 926 字大约 3 分钟

2025-03-15

一、简介

ESLint 是一个用于 JavaScript 和 TypeScript 的静态代码分析工具，主要用于检测代码中的潜在问题和风格问题。它的核心目标是帮助开发者编写更一致、更高质量的代码。

二、主要功能

语法检测： 在代码运行之前，ESLint 可以检测出潜在的错误，例如：未定义的变量、未使用的变量或函数等语法错误。
**代码风格检查：**ESLint 可以强制执行一致的代码风格，例如：2 空格缩进，行位分号，避免使用eval函数等
自动修复问题： ESLint 可以自动修复一些简单的问题，例如：自动修复缩进、自动添加缺失的分号、自动替换双引号为单引号。
插件功能： ESLint 支持通过插件扩展扩展规则集，适配 Vue、reaxt、ts 等项目环境
自定义规则： ESlint 支持用户自行开发一些自定义规则，并以插件的方式引入到项目中
规则集继承： 可以直接通过继承主流规则集来快速的实现一个代码检查的功能。
集成开发工具： ESLint 可以与编辑器（如 VS Code）、构建工具（如 Webpack）和版本控制工具（如 Git）集成，提供实时代码检查。

三、工作流程

ESLint 的工作流程分为两部分：代码检查 和 代码修复。

我们在安装和配置 ESLint 的时候可以选择是否允许 ESLint 检查的时候自动修复代码。

代码检查
1. 解析代码： 将代码转化 AST 语法树
2. 遍历 AST： 遍历 AST 语法树，并根据配置的规则检查代码。
3. 报告问题： 如果发现代码不符合规则，ESLint 会生成错误或警告信息。
代码修复
1. 修改 AST： ESLint 可以修改 AST 语法树的结构来完成代码的修改
2. **代码转化： **将 AST 树转化为代码输出

四、使用示例

1、安装 ESLint

npm install eslint --save-dev

2、配置 ESLint

我们可以使用初始化命令eslint --init 在项目中生成一个配置文件，也可以直接创建一个配置文件，文件名可以是.eslintrc.js/.eslintrc/.eslintrc.json

配置文件（ .eslintrc.js）

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"], // 继承规则集
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugin: [
    "bes" // 需要使用下载插件：eslint-plugin-bes
  ]
  rules: {
    quotes: ["error", "single"], // 强制使用单引号
    semi: ["error", "always"], // 强制使用分号
    "no-unused-vars": "warn", // 未使用的变量警告
    "bes/rule-name": 'error', // 通过插件引入的自定义规则
  },
};

3、手动执行检查和修复

## 如果在项目下执行，可以指定配置文件执行，也可以省略文件名，eslint会默认寻找配置文件
eslint .eslintrc.js
## --fix命令可以在检查的时候自动修复可以被修复的问题
eslint .eslintrc.js --fix

五、集成

与编辑器集成： 在 VS Code 中安装 ESLint 插件，可以实时显示代码问题。
与构建工具集成： 在 Webpack 中使用 eslint-loader，可以在构建时检查代码。
与 Git 集成： 使用 husky ，可以在提交代码前自动运行 ESLint。

六、总结

ESLint 是一个强大的工具，用于检测 JavaScript 和 TypeScript 代码中的错误、风格问题和潜在风险。通过配置规则、使用插件和集成开发工具，ESLint 可以帮助团队保持代码的一致性和高质量。它是现代前端开发中不可或缺的工具之一。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24