ESLint 是主流 JavaScript 代码质量检查工具,通过自动检测语法错误、强制编码风格、识别危险写法并集成到编辑器/Git/CI 实现全流程约束。

JavaScript 代码规范不是靠“自觉”维持的,而是靠工具自动检查和约束。ESLint 是目前最主流、最灵活的 JavaScript 代码质量检查工具,它能帮你统一团队风格、提前发现潜在错误、避免低级失误。
为什么需要 ESLint 而不只是靠人工 Review
人工检查容易遗漏、标准不一致、耗时且不可持续。ESLint 可以:
- 实时检测语法错误(比如缺少分号、未声明变量)
- 强制执行编码风格(如缩进用 2 空格还是 4 空格、是否允许 var)
- 识别危险写法(如 eval()、with、重复定义变量)
- 集成到编辑器、Git 提交前、CI 流程中,形成闭环
快速上手:初始化 ESLint 配置
在项目根目录运行以下命令(需已安装 Node.js 和 npm):
npm init @eslint/config
它会引导你选择:
立即学习“Java免费学习笔记(深入)”;
- 模块系统(CommonJS / ES Modules)
- 框架(React / Vue / TypeScript / 无)
- 是否检查浏览器/Node 环境变量
- 代码风格偏好(推荐选 “Popular style guides”,如 Airbnb 或 Standard)
完成后生成 .eslintrc.js(或 .json/.cjs),这是核心配置文件。
常见配置项说明与自定义建议
打开 .eslintrc.js,关键字段包括:
- env:声明运行环境(如 browser: true, node: true, es2021: true),影响全局变量识别
- extends:继承预设规则集,例如 "eslint:recommended"(基础最佳实践)或 "plugin:react/recommended"(React 专用)
- plugins:引入扩展插件(如 "react", "@typescript-eslint"),用于支持框架或语言特性
-
rules:覆盖或新增具体规则,例如:
"no-console": "warn"(禁止 console,仅警告)
"semi": ["error", "always"](必须加分号,报错级别)
与开发流程深度集成
让 ESLint 真正起作用,不能只靠手动运行:
- 编辑器提示:VS Code 安装 ESLint 插件,自动高亮问题并给出修复建议
- 保存时自动修复:在 VS Code 设置中启用 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
- Git 提交前校验:用 husky + lint-staged,只检查暂存区文件,速度快
- CI 检查:在 GitHub Actions 或 Jenkins 中添加 npx eslint . 步骤,失败则阻断发布










