前言
在前端开发中，使用代码风格检查工具是十分重要的，一方面能够帮助开发者检查出潜在的语法错误，提高代码质量，另一方面还能规范代码的风格，让不同开发者之间的代码风格保持一致，提高代码可读性。
eslint 是一个十分流行的代码风格检查工具，它支持多种不同的配置，可以根据不同开发团队或者项目需求进行自定义配置。本文将着重介绍 @zeit/eslint-config-base 这个 npm 包的使用，它是一个非常好的基础配置包，能够帮助我们快速搭建一个基本的 eslint 配置。
安装
我们可以通过 npm 命令进行安装：
- --- ------- ------ ------------------------ ----------
配置
安装好 eslint 和 @zeit/eslint-config-base 后，我们需要在项目根目录下创建一个 .eslintrc.js 文件，文件内容为：
-------------- - - -------- ---------------------------- -
这里 extends 字段指定了使用 @zeit/eslint-config-base 包的配置。
使用
配置完成后，我们可以在命令行中运行 eslint 命令进行检查：
- --- ------ -------
上述命令将针对 file.js 文件进行代码检查。如果你想要检查整个项目的代码，可以使用 . 代替文件路径：
- --- ------ -
示例代码
为了更好地理解 @zeit/eslint-config-base 包的用法，下面我们给出一个示例代码进行说明。
假设我们有一个 JavaScript 文件 example.js，文件内容如下：
----- --- - -- -- - ------------------- -------- - -----
上述代码定义了一个函数 foo，其中函数体语句使用了单引号，函数名后面的括号与括号之间没有空格，这都是不符合 eslint 默认规则的。如果我们想要使用 @zeit/eslint-config-base 包的规则进行检查，可以在命令行中运行：
- --- ------ ----------
命令结果如下：
---------- --- ------- ---------- ------- --------- ---------- ---- ----- ------- ----- ------ -------- ----------- --------------------------- ---- ----- -------- -------- ----- ---- ------------- ---- ----- ------- ---- --- ----------- ------ - - -------- -- ------- - --------
由于我们使用了 @zeit/eslint-config-base 的规则，因此上述代码中的单引号、括号后面的空格、箭头函数的空格和双引号等问题都被检测到了，其中 no-console 规则属于警告级别，其他三个规则属于错误级别。
我们可以对上述代码进行修改，符合 @zeit/eslint-config-base 的规则，修改后的代码如下：
----- --- - -- -- - ------------------- -------- - -----
修改后的代码中，我们使用了双引号、在箭头函数的 => 前后增加空格，括号后面增加了一个空格，这些都符合 @zeit/eslint-config-base 的规则。如果我们再次运行 eslint 命令：
- --- ------ ----------
将不会输出任何检查错误，代码符合规范。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0811f5403f2923b035bfbb