ESLint是JavaScript项目中最主流的静态代码检查工具，用于发现潜在错误、统一编码风格、提升可维护性；需正确配置env、extends、parser、plugins和rules，并适配React、TypeScript等场景，再集成至VS Code和Git Hooks。
在 JavaScript 项目中，ESLint 是最主流的静态代码检查工具，它能帮你提前发现潜在错误、统一团队编码风格、提升代码可维护性。配置 ESLint 并不难，关键是选对规则、配好环境、集成进开发流程。
安装与基础初始化
推荐使用 npm 或 yarn 安装，并通过 npx eslint --init 快速生成配置文件：
- 运行
npx eslint --init，按提示选择：模块系统（CommonJS / ES modules）、框架（React / Vue / None）、是否使用 TypeScript、是否校验浏览器/Node 环境等 - 它会自动生成
.eslintrc.js（或 .json/.cjs）和安装对应依赖（如eslint-plugin-react、@typescript-eslint/eslint-plugin） - 若已有项目，注意检查是否已安装
eslint本身（必需），以及插件和解析器（如@typescript-eslint/parser）
关键配置项说明
.eslintrc.js 是核心配置文件，常用字段包括：
-
env：声明运行环境（如
browser: true,node: true,es2021: true），影响全局变量识别 -
extends：继承预设规则集，例如：
'eslint:recommended'（基础最佳实践）、'plugin:react/recommended'、'prettier'（需配合 eslint-config-prettier 关闭冲突规则） -
parser：指定语法解析器，默认是 Espree；TypeScript 项目需设为
'@typescript-eslint/parser' -
plugins：加载插件，如
['react', '@typescript-eslint']，用于启用额外规则 -
rules：覆盖或新增具体规则，如
'no-console': 'warn'、'@typescript-eslint/no-explicit-any': 'error'
常见场景适配
不同项目类型需要微调配置：
立即学习“Java免费学习笔记（深入）”；
-
React 项目：确保安装
eslint-plugin-react和eslint-plugin-react-hooks，并在extends中加入'plugin:react/recommended'和'plugin:react-hooks/recommended' -
TypeScript 项目：用
@typescript-eslint/parser替换默认 parser，并在plugins和extends中引入@typescript-eslint相关项；禁用原生 JS 规则中与 TS 冲突的部分（如no-unused-vars应换成@typescript-eslint/no-unused-vars） -
Vite / Next.js 等现代构建工具：通常无需额外配置环境变量，但需确认
env中启用了es2020或更高版本，以及node或browser按需开启
编辑器与自动化集成
让 ESLint 真正发挥作用，离不开开发体验优化：
- VS Code 安装 ESLint 扩展（由 Dirk Baeumer 维护），它会自动读取项目配置并实时标红问题
- 在
package.json中添加脚本："lint": "eslint src/**/*.{js,jsx,ts,tsx}"，支持手动检查；加--fix可自动修复部分问题 - 接入 Git Hooks（如通过
husky+lint-staged）：提交前自动 lint，避免问题代码入库
