初探 ESLint 校验规则 – airbnb 规则篇

ESLint 是一个前端代码检查工具，可以帮助开发者发现代码中的潜在问题，提高代码的可读性、可维护性、降低 Bug 出现的可能性。而 Airbnb、Google 等大型公司制定的规则是业界公认的高质量规则，并且可用于很多项目中。本文将介绍如何使用 ESLint 来配置 Airbnb 规则。

安装和配置

1. 安装 ESLint

   npm install eslint --save-dev

2. 安装 eslint-config-airbnb 和 eslint-plugin-import

   npm install eslint-config-airbnb eslint-plugin-import --save-dev

3. 如下修改 .eslintrc.js 配置

   module.exports = {
     extends: [
       'airbnb',
     ],
     plugins: [
       'import',
     ],
     rules: {
       // your rules here
     },
   };

   除了规则的配置外，我们还可以在 .eslintrc.js 文件中添加其他的 ESLint 配置，例如 parserOptions、env 等等。

如何使用规则

下面是一些常用的规则：

不允许使用 var 变量

// bad
var a = 1;

// good
let a = 1;
const b = 2;

不允许使用 eval 函数

// bad
eval('console.log("Hello, world!")');

// good
const helloWorld = 'console.log("Hello, world!")';

对象属性须使用点进行访问

// bad
const obj = { name: "Alice" };
const name = obj["name"];

// good
const obj = { name: "Alice" };
const name = obj.name;

字符串使用单引号

// bad
const str = "Hello, world!";

// good
const str = 'Hello, world!';

方法及括号间无空格，关键字与括号间有空格

// bad
function sum (a, b) {
  return a + b ;
}

// good
function sum(a, b) {
  return a + b;
}

多个换行只保留一个

// bad
let x = 1;



let y = 2;

// good
let x = 1;

let y = 2;

总结

通过设置 ESLint 来使用 Airbnb 规则能够使我们的代码更加规范和易于阅读。在项目开发中，我们可以按照团队或个人的需求，在 .eslintrc.js 配置文件中进行自定义配置。

本文只介绍了一部分 ESLint Airbnb 规则，更多规则请参考官方文档：https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

希望本文能够帮助你更好地理解 ESLint 校验规则，提高代码质量。

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