总结 18 个最常用的 ESLint 规则

ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们发现代码中的错误和潜在问题，并通过强制执行代码风格规则来提高代码质量。在前端开发中，ESLint 是非常常用的工具之一。本文将总结 18 个最常用的 ESLint 规则，详细介绍它们的用法、作用以及示例代码。

1. no-var

这个规则的作用是禁止使用 var 声明变量，推荐使用 let 或 const。这是因为使用 var 声明变量会存在变量提升的问题，给代码维护带来困难。

// bad
var a = 1;

// good
let b = 2;
const c = 3;

2. no-unused-vars

这个规则的作用是禁止定义未使用的变量。这样可以避免代码冗余，提高代码的可读性和可维护性。

// bad
let a = 1;
let b;

// good
let c = 2;

3. no-console

这个规则的作用是禁止使用 console。在生产环境中，console 可能会暴露敏感信息，因此需要禁用。

// bad
console.log('hello');

// good
let a = 1;

4. semi

这个规则的作用是强制使用分号。虽然 JavaScript 中分号是可选的，但是在某些情况下会导致意外的结果，因此建议使用分号。

// bad
let a = 1

// good
let b = 2;

5. quotes

这个规则的作用是强制使用一致的引号风格。可以选择单引号或双引号，但是需要保持一致。

// bad
let a = "hello";

// good
let b = 'world';

6. indent

这个规则的作用是强制使用一致的缩进风格。可以使用空格或制表符，但是需要保持一致。

// javascriptcn.com 代码示例
// bad
function foo() {
console.log('hello');
}

// good
function bar() {
  console.log('world');
}

7. no-trailing-spaces

这个规则的作用是禁止在行末添加空格。这样可以避免代码冗余，提高代码的可读性和可维护性。

// bad
let a = 1; 

// good
let b = 2;

8. comma-dangle

这个规则的作用是强制在对象和数组字面量中使用尾随逗号。这样可以避免添加新元素时修改多行代码的问题。

// javascriptcn.com 代码示例
// bad
let a = {
  name: 'Tom',
  age: 18
};

// good
let b = {
  name: 'Jerry',
  age: 20,
};

9. arrow-spacing

这个规则的作用是强制箭头函数的箭头前后使用一致的空格。

// bad
let foo = () =>{console.log('hello')};

// good
let bar = () => {
  console.log('world');
};

10. no-multiple-empty-lines

这个规则的作用是禁止使用多个空行。这样可以避免代码冗余，提高代码的可读性和可维护性。

// bad
let a = 1;


let b = 2;

// good
let c = 3;

11. no-use-before-define

这个规则的作用是禁止在变量声明之前使用变量。这样可以避免变量提升的问题，提高代码的可读性和可维护性。

// bad
console.log(a);
let a = 1;

// good
let b = 2;
console.log(b);

12. object-curly-spacing

这个规则的作用是强制在对象字面量中使用一致的空格。可以选择在花括号内或外添加空格。

// bad
let a = {name:'Tom',age:18};

// good
let b = { name: 'Jerry', age: 20 };

13. space-infix-ops

这个规则的作用是要求操作符周围有空格。可以选择在操作符前后添加空格。

// bad
let a = 1+2;

// good
let b = 3 + 4;

14. space-before-function-paren

这个规则的作用是要求函数括号前有空格。这样可以提高代码的可读性和可维护性。

// bad
function foo(){}

// good
function bar() {}

15. no-extra-semi

这个规则的作用是禁止不必要的分号。这样可以避免代码冗余，提高代码的可读性和可维护性。

// bad
let a = 1;;

// good
let b = 2;

16. no-undef

这个规则的作用是禁止使用未定义的变量。这样可以避免代码中的错误和潜在问题。

// bad
console.log(c);

// good
let d = 3;
console.log(d);

17. no-extra-boolean-cast

这个规则的作用是禁止不必要的布尔类型转换。这样可以避免代码冗余，提高代码的可读性和可维护性。

// bad
let a = !!b;

// good
let c = Boolean(d);

18. prefer-const

这个规则的作用是推荐使用 const 声明常量。这样可以避免常量被修改的问题，提高代码的可读性和可维护性。

// bad
let a = 1;

// good
const b = 2;

结论

通过上述 18 个常用的 ESLint 规则的介绍，我们可以更好地了解 ESLint 的使用方法和作用。在开发过程中，使用 ESLint 可以帮助我们提高代码的质量和可读性，减少错误和潜在问题，从而提高开发效率和代码的可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65756a03d2f5e1655de9b2bf