ESLint 配置文件 “.eslintrc.json“ 详解

.eslintrc.json 是 ESLint 的配置文件，用于定义代码的风格和规则。通过配置 ESLint，可以确保代码的一致性和质量，避免常见的错误和不规范的写法。本文将详细介绍 .eslintrc.json 文件的结构、配置项及其作用。

1. .eslintrc.json 文件名中 rc 的含义

.eslintrc 文件中的 rc 通常代表 “run commands” 或 “runtime configuration”。这是一个传统的命名约定，源自 Unix 系统，许多配置文件都以 .rc 结尾（如 .bashrc、.vimrc 等）。它们通常用于指定运行时的设置或命令，使得程序可以在启动时读取这些配置文件来加载用户自定义的设置。

在 ESLint 的上下文中，.eslintrc 文件（无论是 .eslintrc.json、.eslintrc.yaml 还是 .eslintrc.js）用于存储 ESLint 的配置，以便 ESLint 在运行时读取并应用这些配置，从而对代码进行检查和格式化。

2. .eslintrc.json 文件的作用

.eslintrc.json 文件的主要作用包括：

1. 指定代码检查规则：定义和覆盖各种 ESLint 规则，确保代码质量和一致性。
2. 配置环境：指定代码运行的环境（如浏览器、Node.js 等），启用相应的全局变量和规则。
3. 集成插件和扩展：通过插件和扩展增加 ESLint 的功能，支持特定的框架或库（如 React、Vue 等）。
4. 配置解析器选项：支持不同的 JavaScript 语法和特性（如 ES6、JSX 等）。

3. .eslintrc.json 文件的基本结构

一个典型的 .eslintrc.json 文件结构如下：

{
  "env": {},
  "extends": [],
  "globals": {},
  "parser": "",
  "parserOptions": {},
  "plugins": [],
  "rules": {},
  "settings": {}
}

4. 配置项详解

4.1 env

• 作用：定义代码运行的环境，启用相应的全局变量和语法支持。
• 示例：

  "env": {
    "browser": true,  // 启用浏览器全局变量（如 `window`、`document`）
    "node": true,     // 启用 Node.js 全局变量（如 `process`、`module`）
    "es6": true       // 启用 ES6 语法支持
  }
  

4.2 extends

• 作用：继承和扩展现有的 ESLint 配置，复用和共享配置。
• 示例：

  "extends": [
    "eslint:recommended",         // 继承 ESLint 官方推荐的规则
    "plugin:react/recommended"    // 继承 React 插件推荐的规则
  ]
  

4.3 globals

• 作用：声明全局变量，指定这些变量是只读还是可写。
• 示例：

  "globals": {
    "jQuery": "readonly",         // 声明 `jQuery` 为只读全局变量
    "process": "writable"         // 声明 `process` 为可写全局变量
  }
  

4.4 parser

• 作用：指定自定义的解析器，用于解析 JavaScript 代码。
• 示例：

  "parser": "babel-eslint"        // 使用 `babel-eslint` 解析器支持 ES6+ 语法
  

4.5 parserOptions

• 作用：配置解析器的选项，支持不同的 JavaScript 语法和特性。
• 示例：

  "parserOptions": {
    "ecmaVersion": 2020,          // 指定 ECMAScript 版本
    "sourceType": "module",       // 指定代码类型为模块
    "ecmaFeatures": {
      "jsx": true                 // 启用 JSX 语法支持
    }
  }
  

4.6 plugins

• 作用：使用的插件列表，插件可以提供额外的规则。
• 示例：

  "plugins": [
    "react"                       // 使用 React 插件
  ]
  

4.7 rules

• 作用：定义具体的规则，设置规则的严重程度和选项。
• 示例：

  "rules": {
    "eqeqeq": "error",            // 强制使用全等 `===` 和 `!==`
    "no-unused-vars": ["warn", {  // 设置未使用变量的规则
      "vars": "all",
      "args": "after-used",
      "ignoreRestSiblings": false
    }],
    "react/prop-types": "off"     // 关闭 React 的 prop-types 检查
  }
  

4.8 settings

• 作用：为插件提供的共享设置。
• 示例：

  "settings": {
    "react": {
      "version": "detect"         // 自动检测 React 版本
    }
  }
  

5. 示例配置文件

以下是一个完整的 .eslintrc.json 配置文件示例：

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "eqeqeq": "error",
    "no-unused-vars": ["warn", {
      "vars": "all",
      "args": "after-used",
      "ignoreRestSiblings": false
    }],
    "react/prop-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

6. 总结