知识库

Appearance

Return to top
On this page

ESLint 基础概念

ESLint 是一个静态代码分析工具，用于识别 JavaScript 代码中的问题。了解 ESLint 的基础概念是有效使用它的关键。

ESLint 的核心组件

1. 解析器（Parser）

解析器将 JavaScript 代码转换为抽象语法树（AST），ESLint 通过分析 AST 来检查代码。

javascript
// ESLint 默认使用 Espree 解析器
module.exports = {
  parser: 'espree',  // 默认解析器
  
  // 或者使用 Babel 解析器
  // parser: '@babel/eslint-parser',
  
  // 或者使用 TypeScript 解析器
  // parser: '@typescript-eslint/parser',
  
  parserOptions: {
    ecmaVersion: 2021,      // ES 版本
    sourceType: 'module',   // 模块类型
    ecmaFeatures: {
      jsx: true            // 支持 JSX
    }
  }
};

2. 环境（Environment）

环境预定义了全局变量，告诉 ESLint 代码在什么环境中运行。

javascript
module.exports = {
  env: {
    browser: true,    // 浏览器环境
    node: true,       // Node.js 环境
    es6: true,        // ES6 全局变量
    jest: true,       // Jest 环境
    mocha: true,      // Mocha 环境
    jquery: true      // jQuery 环境
  }
};

3. 全局变量（Globals）

定义项目中使用的全局变量：

javascript
module.exports = {
  globals: {
    // 只读变量
    myGlobal: 'readonly',
    
    // 可读写变量
    myMutableGlobal: 'writable',
    
    // 不存在的变量（会被视为未定义）
    myUndefinedGlobal: 'off'
  }
};

规则（Rules）

规则是 ESLint 的核心，定义了代码检查的标准。

规则配置语法

javascript
module.exports = {
  rules: {
    // 关闭规则
    'no-console': 'off',
    
    // 或者使用 0
    'no-console': 0,
    
    // 开启规则（警告级别）
    'no-console': 'warn',
    
    // 或者使用 1
    'no-console': 1,
    
    // 开启规则（错误级别）
    'no-console': 'error',
    
    // 或者使用 2
    'no-console': 2,
    
    // 带选项的规则
    'quotes': ['error', 'single'],  // 使用单引号
    'indent': ['error', 2],         // 2个空格缩进
    'max-len': ['error', { 'code': 120 }]  // 最大行长度
  }
};

规则分类

1. 可修复规则（Fixable Rules）

这些规则可以通过 --fix 自动修复：

javascript
module.exports = {
  rules: {
    'semi': ['error', 'always'],        // 自动添加分号
    'quotes': ['error', 'single'],      // 自动转换引号
    'indent': ['error', 2],            // 自动修复缩进
    'no-multiple-empty-lines': ['error', { 'max': 1 }],  // 自动删除多余空行
    'space-infix-ops': 'error'         // 自动在操作符周围添加空格
  }
};

2. 严重性规则（Severity Rules）

javascript
module.exports = {
  rules: {
    'no-console': 'error',      // 错误级别，阻止构建
    'no-debugger': 'warn',      // 警告级别，仅在控制台显示
    'no-alert': 'off'           // 关闭规则
  }
};

配置继承（Extends）

ESLint 支持继承其他配置：

javascript
module.exports = {
  // 继承 ESLint 推荐的规则
  extends: [
    'eslint:recommended',           // ESLint 官方推荐
    'airbnb',                     // Airbnb 风格
    'standard',                   // Standard 风格
    'prettier'                    // Prettier 配置
  ],
  
  // 继承插件的配置
  extends: [
    '@typescript-eslint/recommended',  // TypeScript 推荐规则
    'plugin:react/recommended'         // React 推荐规则
  ]
};

插件（Plugins）

插件扩展 ESLint 的功能：

javascript
module.exports = {
  // 使用插件
  plugins: [
    'react',           // React 插件
    '@typescript-eslint', // TypeScript 插件
    'import',          // import/export 规则插件
    'jsx-a11y'         // React 可访问性插件
  ],
  
  // 使用插件中的规则
  rules: {
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn'
  }
};

配置文件格式

ESLint 支持多种配置文件格式：

JavaScript 配置

javascript
// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'no-console': 'warn'
  }
};

JSON 配置

json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn"
  }
}

YAML 配置

yaml
env:
  browser: true
  es2021: true
extends:
  - eslint:recommended
parserOptions:
  ecmaVersion: 12
  sourceType: module
rules:
  no-console: warn

配置优先级

ESLint 遵循特定的优先级顺序：

  1. 内联注释（/* eslint-disable */）
  2. 文件级配置（/* eslint */）
  3. 目录级配置文件
  4. 父目录配置文件
  5. 命令行参数

配置文件解析

ESLint 会从目标文件所在目录开始向上查找配置文件，直到找到根目录：

project/
├── .eslintrc.js          # 根配置
├── src/
│   ├── .eslintrc.js      # 覆盖配置
│   └── components/
│       └── Button.js     # 使用 src/ 目录的配置
└── tests/
    └── .eslintrc.js      # 测试专用配置

抽象语法树（AST）

ESLint 使用 AST 进行代码分析：

javascript
// 原始代码
const greeting = 'Hello, World!';

// 转换为 AST 后，ESLint 可以分析：
// - 变量声明类型（const）
// - 变量名称（greeting）
// - 赋值表达式
// - 字符串字面量值

小结

ESLint 的基础概念包括解析器、环境、全局变量、规则、配置继承和插件等。理解这些概念有助于您更好地配置和使用 ESLint。下一章我们将详细介绍如何安装和配置 ESLint。