npm 包 eslint-config-zillow-base 使用教程

阅读时长 3 分钟读完

前言

在前端项目开发中,为了保证代码的规范性和可维护性,我们通常会使用代码检查工具来规范我们的代码,其中一种非常流行的工具就是 ESLint。ESLint 可以通过配置文件来定义代码检查规则,而 eslint-config-zillow-base 就是一种现成的基础规则配置,它基于 Airbnb 的规则进行了定制化的修改,可以帮助我们快速搭建起代码检查的基础架构,提高代码的质量和可读性。

安装

ESLint 需要在项目中全局安装,并且我们需要安装 eslint-config-zillow-base 包来使用其预设的代码规则。在终端中输入以下命令可以安装这两个依赖:

配置

安装完了 eslint-config-zillow-base,我们需要在项目中创建一个 .eslintrc.js 文件,指定我们需要使用的规则。

在 .eslintrc.js 文件中添加以下内容:

这份配置文件的意思是,代码检查工具将使用 eslint-config-zillow-base 包中的规则进行代码检查。我们也可以在这个文件中定义自己的规则,让 ESLint 更加符合我们项目的需要。

使用

配置好了规则之后,我们就可以运行 ESLint 来检查代码了。

我们可以在 package.json 文件中添加一些 NPM 脚本来方便地使用 ESLint:

以上配置为在 src 目录中检查代码。我们运行以下命令即可启动代码检查:

如果有不符合规定的代码,输出的信息会类似以下内容:

每一行的意义分别是:

  • 第一列:错误位置,指出错误发生在了当前文件的第几行第几个字符;
  • 第二列:错误级别,分为 3 个级别:“off” 表示关掉该规则,不检查;“warn” 表示开启该规则,不符合规则的代码将不会阻塞运行;“error” 表示开启该规则,不符合规则的代码将阻塞运行;
  • 第三列:错误信息;
  • 第四列:错误规则名称,用于快速定位错误问题。

示例代码

下面是一个简单的示例代码,演示了如何使用 eslint-config-zillow-base:

然后在命令行中运行 ESLint(假设示例代码存放于项目中的 src 目录下),将得到以下输出:

根据输出可以看到,ESLint 检查出当前代码中存在三个问题,其中包括错用 let 关键字和使用 console 语句的问题。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f3f16b7dbf7be33b256718b

纠错
反馈