前言
在前端项目开发中,为了保证代码的规范性和可维护性,我们通常会使用代码检查工具来规范我们的代码,其中一种非常流行的工具就是 ESLint。ESLint 可以通过配置文件来定义代码检查规则,而 eslint-config-zillow-base 就是一种现成的基础规则配置,它基于 Airbnb 的规则进行了定制化的修改,可以帮助我们快速搭建起代码检查的基础架构,提高代码的质量和可读性。
安装
ESLint 需要在项目中全局安装,并且我们需要安装 eslint-config-zillow-base 包来使用其预设的代码规则。在终端中输入以下命令可以安装这两个依赖:
npm install eslint eslint-config-zillow-base --save-dev
配置
安装完了 eslint-config-zillow-base,我们需要在项目中创建一个 .eslintrc.js 文件,指定我们需要使用的规则。
在 .eslintrc.js 文件中添加以下内容:
module.exports = { "extends": [ "eslint-config-zillow-base" ] };
这份配置文件的意思是,代码检查工具将使用 eslint-config-zillow-base 包中的规则进行代码检查。我们也可以在这个文件中定义自己的规则,让 ESLint 更加符合我们项目的需要。
使用
配置好了规则之后,我们就可以运行 ESLint 来检查代码了。
我们可以在 package.json 文件中添加一些 NPM 脚本来方便地使用 ESLint:
"scripts": { "lint": "eslint src" },
以上配置为在 src 目录中检查代码。我们运行以下命令即可启动代码检查:
npm run lint
如果有不符合规定的代码,输出的信息会类似以下内容:
path/to/file.js 1:1 error Unexpected console statement no-console
每一行的意义分别是:
- 第一列:错误位置,指出错误发生在了当前文件的第几行第几个字符;
- 第二列:错误级别,分为 3 个级别:“off” 表示关掉该规则,不检查;“warn” 表示开启该规则,不符合规则的代码将不会阻塞运行;“error” 表示开启该规则,不符合规则的代码将阻塞运行;
- 第三列:错误信息;
- 第四列:错误规则名称,用于快速定位错误问题。
示例代码
下面是一个简单的示例代码,演示了如何使用 eslint-config-zillow-base:
const greeting = "hello world"; console.log(greeting);
然后在命令行中运行 ESLint(假设示例代码存放于项目中的 src 目录下),将得到以下输出:
src/index.js 1:1 error Missing JSDoc comment require-jsdoc 1:7 error "greeting" is never reassigned. Use 'const' instead. prefer-const 2:1 error Unexpected console statement no-console ✖ 3 problems (3 errors, 0 warnings)
根据输出可以看到,ESLint 检查出当前代码中存在三个问题,其中包括错用 let 关键字和使用 console 语句的问题。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f3f16b7dbf7be33b256718b