ESLint 规则大全，让你代码规范如一
作为前端工程师，我们都知道代码质量是非常重要的。随着代码量的增长，代码规范性越来越重要。良好的代码规范可以降低代码维护成本，提高代码可读性和可维护性。而对于前端开发中的 JavaScript，ESLint 工具可以帮助我们实现代码规范的自动化检查，让我们的代码规范如一。本文将为大家介绍 ESLint 规则大全，详细解析各种规则及其作用，并提供示例代码作为参考。
ESLint 介绍
ESLint 是一个开源的 JavaScript 代码检查工具，它可以自动化检查常见的代码错误、代码风格、变量声明和未使用变量等问题。ESLint 可以帮助我们管理代码，并促进代码的一致性和可移植性。
ESLint 的规则
ESLint 根据代码是否符合规则来发出警告或错误。规则描述了代码应该如何编写。ESLint 提供了一系列标准的规则，同时也支持用户自定义规则。
ESLint 规则分为两种类型：强制和建议。强制类型的规则必须被遵循，否则会导致错误；建议类型的规则则只是提供一些代码风格的建议，如果不遵循也不会出错。
下面我们将按照这两种规则类型，详细解析一些常用的规则。
强制类型规则
- no-var
no-var 规则禁止使用 var 关键字进行变量声明，推荐使用 let 或 const 关键字。
示例代码：
// bad var name = 'Tom'; // good let name = 'Tom'; // good const name = 'Tom';
- no-unused-vars
no-unused-vars 规则禁止声明但未使用的变量，减少不必要的内存占用。
示例代码：
// bad const name = 'Tom'; // good const name = 'Tom'; console.log(name);
- semi
semi 规则要求在语句结尾加上分号，这是一个良好的代码风格。
示例代码：
// bad const name = 'Tom' // good const name = 'Tom';
- no-const-assign
no-const-assign 规则禁止对 const 声明的变量进行赋值。
示例代码：
// bad const name = 'Tom'; name = 'Tina'; // good let name = 'Tom'; name = 'Tina';
- no-console
no-console 规则禁止使用 console.log 等控制台方法，防止代码在生产环境中暴露敏感信息。
示例代码：
// bad
console.log('hello world');
// good
function sayHello() {
console.log('hello world');
}- no-alert
no-alert 规则禁止使用 alert 弹窗，提醒开发者使用其他方式展示警告信息。
示例代码：
// bad
alert('error');
// good
function showError() {
// other way to show error
}建议类型规则
- indent
indent 规则用于控制代码缩进。规定缩进的空格数或硬制表字符。
示例代码：
// www.javascriptcn.com code example
// bad
function sayHello(){
console.log('hello');
}
// good
function sayHello() {
console.log('hello');
}- quotes
quotes 规则控制字符串使用引号还是单引号。推荐使用单引号，以方便在字符串中使用双引号。
示例代码：
// bad const message = "hello world"; // good const message = 'hello world';
- object-curly-spacing
object-curly-spacing 规则用于控制对象字面量中花括号内的空格数。
示例代码：
// bad
const person = {name:'Tom',age:20};
// good
const person = { name: 'Tom', age: 20 };- comma-dangle
comma-dangle 规则用于控制对在数组或对象字面量的末尾是否需要额外的逗号。推荐在最后一项后面添加一个额外的逗号，以便于添加或删除项目时进行区分，也能避免在将来添加新项目时出现问题。
示例代码：
// bad const list = [1, 2, 3,]; // good const list = [1, 2, 3, ];
- eol-last
eol-last 规则用于控制在文件末尾添加一个额外的空行，推荐添加。
示例代码：
// www.javascriptcn.com code example
// bad
function sayHello() {
console.log('hello');
}
// good
function sayHello() {
console.log('hello');
}\n- eqeqeq
eqeqeq 规则强制使用严格相等运算符（===）取代 lose 相等运算符（==）。理由是严格相等运算符更具可读性和安全性，避免意外类型转换。
示例代码：
// www.javascriptcn.com code example
// bad
const name = 'Tom';
if (name == 1) {
console.log('truthy');
}
// good
const name = 'Tom';
if (name === 1) {
console.log('truthy');
}结语
ESLint 是一个非常强大的工具，使用它可以帮助开发者避免一些常见的错误，提高代码质量。通过对 ESList 规则的学习与应用，可以使代码规范一致，有助于团队的合作与代码的可维护性。在实际项目中，我们可以根据具体需求去自定义一些规则，以适应项目的实际情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfce080c976d473a4ae1b1