ESLint是成熟灵活的JavaScript代码检查工具,能自动化统一代码风格、降低阅读成本、减少错误并捕获潜在bug;通过三步快速接入:安装、初始化配置、集成编辑器,并需合理设置env、parserOptions、extends和rules。

代码风格当然重要,尤其在团队协作中。统一的风格能降低阅读成本、减少低级错误、提升代码可维护性。ESLint 不是万能的,但它是最成熟、最灵活的 JavaScript 代码检查工具,能帮你把风格约束变成自动化流程。
为什么 ESLint 比手动约定更可靠
靠文档或口头约定很难落地:新人不熟悉、老手会遗忘、Code Review 容易漏掉空格或分号这类细节。ESLint 把规则写进配置,编辑器实时提示,CI 流程自动拦截 —— 风格问题在提交前就被发现。
它不只是查“风格”,还能捕获潜在 bug(比如未定义变量、重复 key、await 在 for 循环里误用),属于质量守门员。
快速上手:三步接入 ESLint
-
安装:项目本地安装更可控(避免全局版本冲突)
npm init -y && npm install eslint --save-dev -
初始化配置:运行
npx eslint --init,按向导选择(如:使用 TypeScript / React / Vue、想遵循流行规范如 Airbnb 或 Standard)。它会自动生成 .eslintrc.js 或 .eslintrc.json - 集成编辑器:VS Code 安装 ESLint 插件,确保工作区启用了它;保存时自动修复可配 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
关键配置项:别被默认规则带偏
刚生成的配置往往太宽松或太激进。重点关注这几个地方:
立即学习“Java免费学习笔记(深入)”;
- env 和 parserOptions:明确运行环境(browser: true, node: true)和语法支持(ecmaVersion: 2022, sourceType: 'module'),否则箭头函数、可选链可能报错
- extends:优先复用权威共享配置(如 eslint-config-airbnb-base),再按需覆盖。避免从零写几十条规则
- rules:局部调整要克制。例如禁用 no-console 仅在开发环境,用 /* eslint-disable no-console */ 注释比全局关掉更安全
让 ESLint 真正跑起来:日常怎么用
- 开发中:编辑器内看波浪线提示,光标悬停看规则说明,快捷键一键修复(如 VS Code 的 Ctrl+Shift+P → Fix all auto-fixable Problems)
- 提交前:加 git hook(用 husky + lint-staged),只检查暂存区文件,速度快不卡流程
- CI 中:在 GitHub Actions 或 Jenkins 里加一步 npx eslint . --ext .js,.jsx,.ts,.tsx,失败则阻断发布











