指南

ESLint 规则介绍

详细讲解 ESLint 版本中常用规则与配置推荐，帮助前端初学者理解和应用 ESLint。

🎯 引言

ESLint 是前端开发中最常用的代码静态检查工具之一，能够帮助我们提升代码质量和统一团队代码风格。文章将带你全面了解 ESLint 版本中的常用规则，配合实用示例，帮助你快速上手规则配置，并推荐适合不同项目的配置组合。掌握这些内容后，你将能有效避免代码错误，保证代码风格一致，提升开发效率。

✨ 常见规则解析

ESLint 的规则非常丰富，这里我们将根据规则类型分为三大类来讲解：语法相关、风格相关、错误预防相关。每类规则都配合示例展示，方便理解。

🔍 语法相关规则

这类规则主要用于保证代码语法的规范性，避免一些语法上的误用或不推荐写法。

`no-unused-vars` ：禁止出现未使用的变量

这个规则可以帮助我们及时发现声明了却没用的变量，避免代码冗余。

// ❌ 错误示范
const foo = 1;
function demo() {
  const bar = 2; // bar 未被使用，会报错
}

// ✅ 正确示范
const foo = 1;
function demo() {
    console.log(foo);
}

`no-undef` ：禁止使用未定义的变量

防止拼写错误或漏引入变量导致运行时错误。

// ❌ 错误示范
console.log(undeclaredVar);

// ✅ 正确示范
const declaredVar = 'hello';
console.log(declaredVar);

`eqeqeq` ：强制使用全等 `===` 和全不等 `!==`

防止因为类型隐式转换导致的逻辑错误。

// ❌ 错误示范
if (a == 10) { ... }

// ✅ 正确示范
if (a === 10) { ... }

这个规则对 JS 新手特别友好，能避免一些莫名其妙的类型转换错误。

🎨 风格相关规则

风格规则帮助我们保持代码统一、整洁，提升代码的可读性和维护性。

`indent` ：强制统一缩进风格，默认 2 个空格

统一缩进非常重要，能让代码结构一目了然。

// ❌ 错误示范
function test() {
    console.log('indent error');
  }

// ✅ 正确示范
function test() {
    console.log('indent correct');
}

`semi` ：强制或禁止使用分号

你喜欢写分号还是不写，ESLint 都能帮你统一。

// ❌ 错误示范（未统一）
const a = 1
const b = 2;

// ✅ 正确示范（都写分号）
const a = 1;
const b = 2;

`quotes` ：强制使用单引号或双引号（推荐单引号）

// ❌ 错误示范
const str = "hello";

// ✅ 正确示范
const str = 'hello';

`comma-dangle` ：要求或禁止对象、数组、函数参数末尾逗号

有助于减少 git diff 无意义的变化。

// ❌ 错误示范
const arr = [1, 2, 3];

// ✅ 正确示范（末尾带逗号）
const arr = [1, 2, 3];

风格规则能让团队成员写出风格统一的代码，减少审查的争议。

🚫 错误预防相关规则

这些规则更多聚焦于避免潜在的逻辑错误或难以发现的bug。

`no-console` ：禁止使用 `console.log`

生产环境通常不允许留有调试信息。

// ❌ 错误示范
console.log('调试信息');

// ✅ 正确示范
// 调试完成后删除或注释掉日志

`no-debugger` ：禁止使用 `debugger`

避免开发调试代码意外提交到线上。

`no-duplicate-case` ：禁止重复的 `case` 标签

这种错误在写复杂 switch 时容易犯。

// ❌ 错误示范
switch (x) {
  case 1:
    break;
  case 1: // 重复case
    break;
}

// ✅ 正确示范
switch (x) {
    case 1:
        break;
    case 2:
        break;
}

`no-fallthrough` ：禁止 `switch` 语句中 `case` 之间的贯穿

防止忘记写 break 导致意外执行后续 case 代码。

// ❌ 错误示范
switch (x) {
  case 1:
    doSomething();
  case 2:
    doSomethingElse(); // 会误执行
}

// ✅ 正确示范
switch (x) {
    case 1:
        doSomething();
        break;
    case 2:
        doSomethingElse();
        break;
}

错误预防类规则对于减少线上故障非常重要，建议项目中严禁关闭。

🧾 小节总结

ESLint 提供了丰富且实用的规则，涵盖语法规范、代码风格与错误预防，适合不同阶段的前端开发者。
Airbnb 规则集适合大型项目，规则更加严格和全面，能全面提升团队代码质量。
结合 Prettier 使用 ESLint，既保证语法正确，又实现代码自动格式化，提高开发效率。

❓ 知识问答（Q&A）

Q： ESLint 和之前版本有什么主要区别？

A： ESLint 对规则配置和插件支持进行了性能优化，规则更新更贴合现代 JS 生态，同时更好支持 TypeScript 和现代语法。

🧪 小练习

练习1

编写一个函数，参数是一个数字数组，返回数组中所有偶数的平方和。使用 ESLint 的 no-unused-vars 和 eqeqeq 规则检测，有未使用变量或使用了 == 的地方修改。

function sumEvenSquares(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        const num = arr[i];
        if (num % 2 == 0) {
            sum += num * num;
        }
    }
    return sum;
}

练习2

配置 ESLint 和 Prettier 同时工作，写一个 .eslintrc.js 配置，确保格式化和语法检查兼容，并且写出一段代码测试 semi 和 quotes 规则。

const message = 'Hello, ESLint and Prettier!';
console.log(message);

🎉 恭喜你已经掌握 ESLint 规则解析、常见规则技能啦！通过合理配置 ESLint，你可以写出更规范、更易维护的前端代码，成为团队不可或缺的代码质量守护者！

ESLint 安装与运行详解

本文详细介绍如何安装和运行 ESLint，帮助你快速掌握代码规范检测工具。

集成 ESLint 到 Webpack

详细介绍如何将 ESLint 插件集成到 Webpack 构建流程，提升代码质量和开发效率。