.eslintrc.js是ESLint的核心配置文件之一，用于定义 JavaScript/TypeScript 等代码的代码检查规则、解析器、插件、环境等配置，是前端工程中实现代码规范化、统一编码风格的关键文件。
一、ESLint 是什么？
ESLint 是一个开源的静态代码分析工具，主要用于检测 JavaScript（及 TypeScript、JSX 等扩展语法）代码中的语法错误、潜在 Bug、不规范的编码风格（如缩进、变量命名、分号使用），并给出可修复的提示，目的是：
- 减少代码 Bug，提升代码质量；
- 统一团队编码风格，降低协作成本；
- 提前发现语法问题，避免运行时错误。
而.eslintrc.js就是用来配置 ESLint 如何工作的文件。
二、.eslintrc.js的作用
它通过 JavaScript 模块的形式导出配置对象，告诉 ESLint：
- 要检查哪些文件（或忽略哪些文件）；
- 使用哪些规则（如是否强制使用分号、是否允许未定义的变量）；
- 代码运行的环境（如浏览器、Node.js、React/Vue 框架环境）；
- 使用哪个解析器（如解析 ES6+ 的
@babel/eslint-parser、解析 TypeScript 的@typescript-eslint/parser）； - 启用哪些插件（如 React 检查插件
eslint-plugin-react、Vue 检查插件eslint-plugin-vue）。
三、.eslintrc.js的核心配置项
以下是一个典型的.eslintrc.js配置示例，结合常见配置项说明：
javascript
运行
module.exports = { // 1. 环境：指定代码运行的环境，每个环境会预设对应的全局变量 env: { browser: true, // 浏览器环境（如 window、document） node: true, // Node.js 环境（如 require、module） es2021: true // ES2021 语法环境 }, // 2. 解析器：指定 ESLint 用什么解析器处理代码 parser: '@typescript-eslint/parser', // 解析 TypeScript 代码 // 解析器选项：配置解析器的行为 parserOptions: { ecmaVersion: 'latest', // 支持的 ES 版本 sourceType: 'module', // 代码是 ES 模块（使用 import/export） ecmaFeatures: { jsx: true // 支持 JSX 语法（React 项目） } }, // 3. 插件：引入第三方插件，扩展 ESLint 的检查规则 plugins: ['@typescript-eslint', 'react'], // 4. 规则：核心配置，指定启用/禁用哪些规则，以及规则的严重程度 rules: { // 规则格式："规则名": [严重程度, 规则选项] // 严重程度：0（off，禁用）、1（warn，警告）、2（error，错误，会导致检查失败） 'no-undef': 2, // 禁止使用未定义的变量（错误级别） 'semi': [2, 'always'], // 强制语句末尾加分号（错误级别） 'quotes': [2, 'single'], // 强制使用单引号（错误级别） '@typescript-eslint/no-unused-vars': 1, // TS 未使用变量警告 'react/react-in-jsx-scope': 0 // 禁用 React 必须在 JSX 作用域的规则（React 17+ 无需） }, // 5. 继承：继承已有的配置集（如官方推荐规则、插件预设规则） extends: [ 'eslint:recommended', // ESLint 官方推荐的核心规则 'plugin:@typescript-eslint/recommended', // TS 插件的推荐规则 'plugin:react/recommended' // React 插件的推荐规则 ], // 6. 全局变量：声明额外的全局变量，避免被检测为未定义 globals: { React: 'readonly', Vue: 'readonly' } };四、为什么用.eslintrc.js而不是其他格式？
ESLint 支持多种配置文件格式，各有特点：
| 格式 | 特点 | 适用场景 |
|---|---|---|
.eslintrc.js | 支持 JS 逻辑、注释、动态配置 | 大多数项目（灵活度最高） |
.eslintrc.json | 纯 JSON 格式，简洁 | 简单项目（无动态配置需求） |
.eslintrc.yml | YAML 格式，语法简洁 | 习惯 YAML 的团队 |
package.json | 在eslintConfig字段中配置 | 不想新增文件的小型项目 |
.eslintrc.js是最常用的格式，因为它支持条件判断、引入外部变量等动态配置，比如根据环境（开发 / 生产）调整规则。
五、配套文件
.eslintignore：指定 ESLint 忽略检查的文件 / 目录（如node_modules/、dist/），类似.gitignore。package.json中的脚本：通常会配置lint脚本，方便运行检查：json
{ "scripts": { "lint": "eslint src/**/*.{js,ts,jsx}", "lint:fix": "eslint src/**/*.{js,ts,jsx} --fix" // 自动修复可修复的问题 } }
六、总结
.eslintrc.js的核心作用是定制 ESLint 的检查规则和行为，让团队代码符合统一的规范，减少错误和维护成本。它是前端工程化中代码质量管控的重要一环，几乎所有现代前端项目（React、Vue、Node.js）都会用到。
