ESLint 是提升 JavaScript 代码质量的关键工具，通过配置 env、extends、parserOptions 和 rules 可实现环境识别、规则继承与语法支持；结合 eslint-config-prettier 避免格式冲突，引入 eslint-plugin-react 等插件适配框架，再通过自定义规则如 'no-var': 'error'、'arrow-parens': ['error', 'always'] 和行长限制，实现团队编码规范统一与可维护性提升。
在现代前端开发中，JavaScript 代码的可读性、一致性和可维护性至关重要。ESLint 是一个插件化、可扩展的 JavaScript 代码检查工具，能够帮助团队统一编码风格、发现潜在错误并推动最佳实践落地。合理配置 ESLint 并根据项目需求定制规则，是构建高质量代码体系的关键一步。
基础 ESLint 配置
初始化 ESLint 需要在项目根目录创建配置文件（如 .eslintrc.js 或 .eslintrc.json），并定义环境、解析器、插件和规则。
以下是一个常见的基础配置示例：
module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended' ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, rules: { 'no-console': 'warn', 'no-unused-vars': 'error', 'no-undef': 'error' } };说明：
立即学习“Java免费学习笔记（深入）”；
- env 指定代码运行环境，启用对应全局变量（如 window、process）
- extends 继承预设规则集，'eslint:recommended' 包含官方推荐的基础规则
- parserOptions 设置语法支持版本，例如启用 ES2021+ 特性
- rules 自定义具体规则级别：'off'（0）、'warn'（1）、'error'（2）
集成 Prettier 与风格统一
当使用 Prettier 处理代码格式时，需避免 ESLint 与 Prettier 规则冲突。可通过 eslint-config-prettier 禁用所有与格式相关的 ESLint 规则。
安装依赖：
npm install --save-dev eslint-config-prettier在配置中添加：
extends: [ 'eslint:recommended', 'prettier' ]这样可确保 ESLint 专注于逻辑问题，而格式交给 Prettier 处理。
针对框架的扩展配置
对于 React、Vue 等框架项目，需引入对应插件以支持 JSX 或模板语法检查。
以 React 为例：
npm install --save-dev eslint-plugin-react更新配置：
extends: [ 'eslint:recommended', 'plugin:react/recommended' ], plugins: ['react'], settings: { react: { version: 'detect' } }这将启用 React 相关的最佳实践，如检查 key、props 类型、组件命名等。
自定义规则与项目适配
不同团队或项目对代码风格有特定要求，可通过修改 rules 字段进行精细化控制。
常见自定义场景包括：
- 强制使用 const/let，禁止 var：'no-var': 'error'
- 要求箭头函数参数括号一致性：'arrow-parens': ['error', 'always']
- 限制行长度：
- 禁止 alert/debugger：'no-alert': 'warn', 'no-debugger': 'error'
也可通过 overrides 字段为特定文件类型设置独立规则，例如测试文件可允许 console 和 describe：
overrides: [ { files: ['**/*.test.js', '**/*.spec.js'], env: { jest: true }, rules: { 'no-console': 'off' } } ]基本上就这些。一套合理的 ESLint 配置不是一成不变的，应随团队共识和技术演进而持续调整。关键是让工具服务于人，而不是让人迁就工具。不复杂但容易忽略的是：定期 review 警告信息，及时更新配置，才能真正发挥 ESLint 的价值。
