ESLint 详解 - 技术栈

ESLint 是一款开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年创建。它通过静态分析代码来识别模式问题，帮助开发者保持代码风格的一致性并避免潜在错误。

为什么需要 ESLint

JavaScript 是一门动态语言，代码错误往往在运行时才暴露出来。ESLint 的出现正是为了解决这一问题，它能够在编码阶段就发现潜在问题，包括：

语法错误：未闭合的括号、缺少分号等
逻辑错误：使用未声明的变量、重复声明等
代码风格：缩进不一致、引号混用等
最佳实践 ：避免使用 eval()、禁止 console.log 上线等

核心特性

特性	说明
插件化架构	支持自定义规则和插件，可扩展性强
ES6+ 全面支持	原生支持最新 ECMAScript 标准
自动修复	内置自动修复常见问题的能力
灵活配置	可根据项目需求定制规则集
多种格式支持	支持 JavaScript、TypeScript、JSX、Vue 等

工作原理

ESLint 使用**抽象语法树（AST）**来分析代码。它将源码解析成 AST，然后通过规则对 AST 进行检查，每个规则都会产生对应的警告或错误。

安装与初始化

安装

bash 复制代码

npm install eslint --save-dev
# 或
yarn add eslint --dev

初始化配置

bash 复制代码

npx eslint --init

初始化过程中会让你回答几个问题来生成配置文件：

你想如何使用 ESLint？（只检查问题、检查语法、检出问题+语法）
你的项目使用什么模块？（CommonJS、ES Modules、None）
使用什么框架？（None、React、Vue.js）
使用 TypeScript？ Yes / No
代码运行在哪里？（Browser、Node、ES6）
你想使用什么风格指南？（Airbnb、Google、Standard等）
你想如何定义格式？（JSON、JavaScript、YAML）
现在安装依赖？ Yes / No

配置文件详解

文件优先级

ESLint 会按以下顺序查找配置文件：

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json 中的 eslintConfig 字段

基本配置示例

javascript 复制代码

module.exports = {
  // 环境定义
  env: {
    browser: true,
    es2021: true,
    node: true
  },

  // 继承其他配置
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    '@vue/typescript/recommended'
  ],

  // 解析器配置
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },

  // 插件
  plugins: [
    'vue',
    '@typescript-eslint'
  ],

  // 规则配置
  rules: {
    'no-unused-vars': 'error',
    'no-undef': 'warn',
    'semi': ['error', 'always'],
    'quotes': ['error', 'single'],
    'indent': ['error', 2],
    'max-len': ['warn', { code: 100 }]
  },

  // 全局变量（禁用规则检查）
  globals: {
    _: 'readonly',
    $: 'readonly'
  },

  // 忽略文件
  ignorePatterns: ['dist/', 'node_modules/']
};

规则详解

规则严重程度

值	含义	效果
`off` 或 `0`	关闭规则	无提示
`warn` 或 `1`	警告	黄色提示，不影响构建
`error` 或 `2`	错误	红色提示，退出码为1

常用规则分类

潜在问题

javascript 复制代码

rules: {
  'no-unused-vars': 'error',        // 未使用的变量
  'no-undef': 'error',               // 未定义的变量
  'no-debugger': 'error',           // debugger 语句
  'no-dupe-args': 'error',          // 重复的参数
  'no-duplicate-case': 'error',     // 重复的 case
  'no-empty': 'warn',                // 空代码块
  'no-extra-semi': 'error'          // 多余的分号
}

代码风格

javascript 复制代码

rules: {
  'semi': ['error', 'always'],           // 分号
  'quotes': ['error', 'single'],         // 引号
  'indent': ['error', 2],                 // 缩进
  'linebreak-style': ['error', 'unix'],  // 换行符
  'max-len': ['warn', { code: 80 }],      // 最大行长度
  'no-mixed-spaces-and-tabs': 'error',   // 空格和 tab 混用
  'eol-last': ['error', 'always']        // 文件末尾换行
}

ES6+ 特性

javascript 复制代码

rules: {
  'no-var': 'error',                      // 禁止使用 var
  'prefer-const': 'warn',                // 优先使用 const
  'prefer-template': 'warn',             // 优先使用模板字符串
  'no-useless-escape': 'warn',           // 无用的转义
  'arrow-body-style': ['warn', 'as-needed'] // 箭头函数简写
}

最佳实践

javascript 复制代码

rules: {
  'eqeqeq': ['error', 'always'],          // 强制使用 === 和 !==
  'no-console': 'warn',                   // 禁止 console
  'no-alert': 'error',                    // 禁止 alert
  'no-eval': 'error',                     // 禁止 eval
  'no-extend-native': 'error',           // 禁止扩展原生对象
  'no-param-reassign': 'warn',           // 禁止修改函数参数
  'consistent-return': 'error',          // return 语句一致性
  'default-case': 'warn'                 // switch 必须有 default
}

继承与共享配置

使用预设配置

javascript 复制代码

module.exports = {
  extends: [
    'eslint:recommended',      // ESLint 推荐规则
    'plugin:vue/recommended',   // Vue.js 推荐规则
    'airbnb-base',              // Airbnb 基础配置
    'standard'                  // Standard 风格
  ]
};

覆盖继承的规则

javascript 复制代码

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // 覆盖 eslint:recommended 中的规则
    'no-unused-vars': 'off',
    // 覆盖 plugin:vue/recommended 中的规则
    'vue/multi-word-component-names': 'off'
  }
};

在 CI/CD 中集成

Git Hooks（使用 Husky）

bash 复制代码

npm install husky @commitlint/cli --save-dev

json 复制代码

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "git add"]
  }
}

GitHub Actions

yaml 复制代码

# .github/workflows/lint.yml
name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

GitLab CI

yaml 复制代码

# .gitlab-ci.yml
lint:
  image: node:18
  script:
    - npm ci
    - npm run lint
  only:
    - merge_requests
    - main

IDE 集成

VSCode

安装 ESLint 插件
配置保存时自动修复

json 复制代码

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

WebStorm

打开 Settings → Languages and Frameworks → JavaScript → Code Quality Tools → ESLint
勾选 "Enable"
配置 ESLint executable 路径

高级配置

在不同文件中启用不同规则

javascript 复制代码

module.exports = {
  overrides: [
    {
      files: ['*.test.js'],
      env: {
        jest: true
      },
      rules: {
        'no-unused-expressions': 'off'
      }
    },
    {
      files: ['*.config.js'],
      rules: {
        'no-process-exit': 'off'
      }
    }
  ]
};

使用处理器

javascript 复制代码

module.exports = {
  plugins: ['vue'],
  processor: 'vue/vue',
  rules: {
    'vue/no-unused-vars': 'error'
  }
};

常见问题

Q1: 规则不生效？

检查以下几点：

配置文件是否在正确的位置
ESLint 是否正确安装
文件是否在 ignorePatterns 中
规则名称是否正确

Q2: 如何临时禁用规则？

javascript 复制代码

// 禁用下一行
// eslint-disable-next-line no-console
console.log('test');

// 禁用整个文件
/* eslint-disable no-console */
console.log('test');
/* eslint-enable no-console */

// 禁用整行
console.log('test'); // eslint-disable-line no-console

Q3: 如何升级到 ESLint 9？

ESLint 9 使用 Flat Config，配置方式有较大变化：

javascript 复制代码

// eslint.config.js（新版）
export default [
  {
    files: ['**/*.js'],
    rules: {
      'no-unused-vars': 'error'
    }
  }
];

总结

ESLint 作为 JavaScript 生态中最流行的代码检查工具，能够显著提升代码质量和团队协作效率：

提前发现问题：在编码阶段发现潜在错误
统一代码风格：保证团队代码一致性
自动化检查：与 CI/CD 流程集成，自动化执行
高度可配置：满足不同项目需求

建议在项目初期就集成 ESLint，选择合适的规则集，并在团队中达成共识。