ESLint 规则大盘点：让代码更稳定更规范

ESLint 规则：提升 JavaScript 代码质量的 20 佳选择

引言

ESLint 是 JavaScript 开发人员不容忽视的强大工具。它可以帮助发现代码中的错误和潜在问题，确保代码质量，防止运行时错误。本文精心挑选了 20 个值得开启的 ESLint 规则，助你提升代码水平。

1. ** no-undef：告别未声明的变量**

这个规则检测未声明的变量，避免因引用错误（ReferenceError）而头疼不已。

// 报错：变量 `foo` 未声明
console.log(foo);

2. ** no-unused-vars：消除僵尸变量**

此规则识别未使用的变量，帮你清理无用代码，避免不必要的运行时开销。

// 报错：变量 `foo` 未使用
const foo = 1;

3. ** no-console：控制台静音**

这个规则禁止使用 console 对象，避免不必要的日志输出干扰开发或生产环境。

// 报错：使用了 `console.log`
console.log('Hello, world!');

4. ** strict：拥抱严格模式**

此规则强制执行严格模式，避免某些常见错误，让代码更安全、更可靠。

// 报错：未启用严格模式
"use strict";

5. ** quotes：引号统一**

这个规则确保使用一致的引号类型（单引号或双引号），提升代码可读性和一致性。

// 报错：引号使用不一致
const foo = 'bar';
const baz = "qux";

6. ** semi：分号大作战**

此规则强制使用分号，避免语法错误，让代码更清晰明了。

// 报错：缺少分号
const foo = 1

7. ** no-plusplus：警惕递增/递减运算符**

这个规则禁止使用递增（++）和递减（--）运算符，避免潜在错误和可读性差的问题。

// 报错：使用了递增运算符
let foo = 1;
foo++;

8. ** no-restricted-syntax：语法禁区**

此规则禁止使用某些不推荐的语法，避免代码中的潜在兼容性问题。

// 报错：使用了 `with` 语句
with (obj) {
  console.log(foo);
}

9. ** no-implicit-globals：隐式全局变量大扫除**

这个规则禁止使用隐式全局变量，避免与其他脚本或库的冲突。

// 报错：使用了隐式全局变量 `window`
console.log(window.location.href);

10. ** no-shadow：变量影子，小心陷阱**

此规则禁止变量影子，避免意外覆盖父作用域中的同名变量，导致混乱和错误。

// 报错：变量 `foo` 影子了全局变量 `foo`
const foo = 1;
function bar() {
  const foo = 2;
}

11. ** prefer-const：拥抱常量**

这个规则鼓励使用 const 声明常量，避免不必要的变量修改和潜在错误。

// 报错：使用了 `let` 声明变量
let foo = 1;

12. ** no-var：向 var 告别**

此规则禁止使用 var 声明变量，促使开发者使用更现代和安全的声明方式。

// 报错：使用了 `var` 声明变量
var foo = 1;

13. ** prefer-arrow-callback：箭头函数，简洁明了**

这个规则推荐使用箭头函数作为回调函数，简化代码，提升可读性。

// 报错：使用了匿名函数作为回调函数
[1, 2, 3].map(function(x) {
  return x * 2;
});

14. ** no-param-reassign：参数重分配，小心陷阱**

此规则禁止重新分配函数参数的值，避免潜在的混乱和错误。

// 报错：重新赋值了参数 `foo`
function bar(foo) {
  foo = 2;
}

15. ** no-duplicate-imports：重复导入，请止步**

这个规则检测并禁止重复导入，避免不必要的开销和潜在冲突。

// 报错：重复导入了 `foo` 模块
import { foo } from './foo';
import { foo } from './foo';

16. ** no-useless-escape：无用转义，徒劳无功**

此规则禁止使用不必要的转义字符，避免不必要的混乱和潜在错误。

// 报错：使用了不必要的转义字符
const foo = "Hello\\ world!";

17. ** no-restricted-globals：全局变量禁令**

这个规则允许开发者禁止使用某些全局变量，避免潜在的兼容性问题和代码安全性风险。

// 报错：使用了全局变量 `alert`
alert('Hello, world!');

18. ** no-prototype-builtins：原型内建，勿动**

此规则禁止使用原型内建属性，避免意外覆盖和潜在错误。

// 报错：使用了原型内建属性 `toString`
const foo = {};
console.log(foo.toString());

19. ** no-undef-init：无定义初始化，不可取**

这个规则禁止在变量声明中使用 undefined，避免不必要的混乱和潜在错误。

// 报错：在变量声明中使用了 `undefined`
const foo = undefined;

20. ** no-inner-declarations：函数内部声明，一禁了之**

此规则禁止在函数内部声明变量，避免意外覆盖和可读性差的问题。

// 报错：在函数体内声明了变量 `foo`
function bar() {
  let foo = 1;
}

结论

通过开启这些 ESLint 规则，开发者可以显著提高 JavaScript 代码的质量，减少运行时错误，确保代码的可读性、一致性和安全性。拥抱这些规则，让你的代码更上一层楼。

常见问题解答

1. 如何在项目中使用 ESLint？

可以在项目中安装 ESLint 包，并创建一个 .eslintrc 文件来配置规则。

2. 如何查看 ESLint 规则的详细信息？

可以访问 ESLint 官方文档或使用 eslint --rules 命令查看所有规则及其详细信息。

3. 我应该开启所有 ESLint 规则吗？

不一定，选择适合项目需求和编码风格的规则至关重要。

4. ESLint 规则是强制性的吗？

否，ESLint 规则可以配置为警告或错误，开发者可以选择是否强制执行。

5. 如何解决 ESLint 错误？

通过修复代码中导致错误的行来解决 ESLint 错误。可以在错误消息中找到具体建议。