ESLint 极简指南：让代码既规范又一致

不要把 ESLint 看作束缚，它是一份活文档，用规则守护项目的一致性，最后节省的是无数次代码评审中的无谓争论。

一、ESLint 是什么？

ESLint 是 JavaScript/TypeScript 的代码检查工具 ，会在你写代码时就指出格式错误、潜在 Bug 和违反团队约定的地方。
一句话：ESLint 就像一位严格的导师，让你的代码保持干净、统一、少犯错。

二、为什么每个项目都需要它？

没有 ESLint	有 ESLint
缩进时两个空格，时而四个	风格强制统一，自动修复
定义了变量却不使用	保存时立即警告 `no-unused-vars`
把 `==` 写成 `=` 埋下 Bug	提示"条件中意外赋值"
团队成员各写各的风格	共享一份配置，所有人一致
代码评审大量时间争论格式	机器负责格式，人类负责逻辑

ESLint 的核心价值：**提前发现错误 + 自动化风格管理 + 降低协作成本**。

三、核心概念速览

概念	做什么的	示例
规则 (Rule)	一条具体的检查项	`no-console`：禁止使用 `console.log`
配置 (Config)	一组规则的开关和参数	`eslint:recommended` 是官方推荐的规则集
插件 (Plugin)	提供额外的规则	`eslint-plugin-react` 检查 JSX
可共享配置	别人写好的整套规则，直接拿来用	`airbnb`, `standard`
解析器 (Parser)	让 ESLint 理解 TypeScript 等非标准语法	`@typescript-eslint/parser`

你通过配置文件把这些组件组合起来，就造出了专属的代码管家。

四、快速上手：3 步完成配置

1. 安装

bash 复制代码

npm init @eslint/config@latest

这个交互式命令会问你几个问题，然后自动生成配置文件。也支持手动安装：

bash 复制代码

npm install -D eslint

2. 配置文件（扁平式，推荐）

在项目根目录创建 eslint.config.js，这是我给出的极简模板：

javascript 复制代码

import js from '@eslint/js';

export default [
  // 直接使用官方推荐规则
  js.configs.recommended,

  {
    // 可在此自定义规则
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off"
    }
  }
];

这是 ESLint 9.x 后的扁平配置 ，更直观。如果你在旧项目里看到 .eslintrc.js，那是旧式写法，功能相同但结构不同。

3. 运行检查

添加 npm 脚本后使用：

json 复制代码

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}

bash 复制代码

npm run lint          # 仅报告问题
npm run lint:fix      # 自动修复所有能修的问题

五、常用规则举例

javascript 复制代码

// 关掉分号、规定双引号、要求尾逗号
rules: {
  "semi": ["error", "never"],
  "quotes": ["error", "single"],
  "comma-dangle": ["error", "always-multiline"]
}

规则严重度 有三个等级："off" 或 0（关闭）、"warn" 或 1（警告）、"error" 或 2（错误）。

常用规则参考：

规则	含义	推荐设置
`no-unused-vars`	禁止声明未使用的变量	`warn`
`no-undef`	禁止使用未声明的变量	`error`
`prefer-const`	要求能用 const 就绝不 let	`error`
`eqeqeq`	要求使用 === 和 !==	`error`
`no-console`	不允许 console.log	`warn`（开发可关）
`indent`	缩进风格	交给 Prettier 处理

六、ESLint + Prettier：黄金搭档

ESLint 擅长代码质量 ，Prettier 擅长代码美观（换行、缩进、引号等）。两者分工不同，但需要避免规则冲突。

正确搭配方式：

安装 Prettier 和冲突规则关闭包
bash 复制代码
```
npm install -D prettier eslint-config-prettier
```

修改 eslint.config.js

javascript 复制代码

import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  // 一定要放在最后，覆盖掉与 Prettier 冲突的规则
  prettier,
  {
    rules: {
      // 你的自定义规则
    }
  }
];

单独配置 Prettier 的 .prettierrc 文件：

json 复制代码

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

现在 ESLint 负责代码逻辑，Prettier 负责美化，天下太平。

七、让流程自动化

编辑器集成

VS Code 安装 ESLint 扩展，在 settings.json 中加入：

json 复制代码

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

保存文件时自动修复 ESLint 问题。

Git 提交前检查

使用 lint-staged + Husky，只在提交时对改动的文件执行检查：

bash 复制代码

npx husky add .husky/pre-commit "npx lint-staged"

lint-staged 配置：

json 复制代码

"lint-staged": {
  "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
}

这样不规范的代码根本无法进入仓库。

八、最佳实践清单

使用可共享配置 ：直接继承 airbnb 或 standard，再裁剪团队规则。
把 Prettier 从 ESLint 中剥离 ：用 eslint-config-prettier 关掉格式类规则，避免互相打架。
只装必要的插件：不要看到插件就装，保持配置文件轻量。
区分环境 ：在配置里指明 browser: true、node: true 来消除未定义变量报错。
保持规则的一致性 ：要么都是 "warn"，要么都是 "error"，尽量不要混合到难以判断。
版本控制 ：.eslintignore 和配置文件一定要进 Git，保证团队统一。

九、总结

ESLint 是现代 JS/TS 项目不可或缺的质量守门人。
核心就是规则 + 配置 + 插件的组合，一切围绕一个配置文件展开。
扁平配置（eslint.config.js）是未来，新建项目直接用它。
把格式美化留给 Prettier，让 ESLint 专注于发现潜在错误，你会获得极佳的开发体验。
自动化集成（编辑器保存修复 + Git 钩子）可以让你几乎忘记它的存在，却时刻被保护。