npm 包 eslint-config-zillow 使用教程-JavaScript中文网-JavaScript教程资源分享门户

引言

eslint-config-zillow 是由 Zillow Group 开发的一款基于 eslint 的代码风格检查配置。该配置方案针对 JavaScript、TypeScript 所编写的代码，可以帮助团队在项目开发过程中保持代码风格和质量的一致性。本文将详细介绍 eslint-config-zillow 的使用，包括配置取法、替代方案和代码示例。

安装与配置

使用 npm 全局安装 eslint：

npm install -g eslint

创建项目目录并进入该目录，使用npm init 命令初始化项目，安装eslint-config-zillow ：

npm init
npm i eslint-config-zillow -D

创建 .eslintrc.json 文件并添加如下配置：

{
  "extends": "eslint-config-zillow"
}

在 package.json 中添加 npm script 来运行 eslint：

"scripts": {
  "lint": "eslint ."
}

运行 npm script：

npm run lint

如果提示缺少依赖，可以在提示信息中看到缺少那个依赖。可以直接使用全局安装eslint进入全局安装后的目录执行

npm i eslint-plugin-react -D

对你的代码进行测试。当你的代码有语法错误或不符合规则时，将会收到错误信息。

配置取法

eslint-config-zillow 分别提供了 3 个扩展包，可以根据代码的不同类型进行引用，它们分别是 eslint-config-zillow、eslint-config-zillow-react、eslint-config-zillow-typescript。在 extends 字段中引入并选择合适的扩展包。例如，使用 eslint-config-zillow 和 eslint-config-zillow-react，可将 .eslintrc.json 文件配置如下：

{
  "extends": [
    "eslint-config-zillow",
    "eslint-config-zillow-react"
  ]
}

可以覆盖您的规则。请修改您的 .eslintrc：（以 react hooks 为例）

{
  "extends": ["eslint-config-zillow"],
  "rules": {
    "react-hooks/rules-of-hooks": "error"
  },
  "plugins": ["react-hooks"]
}

替代方案

如果你不想使用 eslint-config-zillow，还有一些替代方案:

eslint-config-airbnb-base: Airbnb 出品，根据其风格指南针对 JavaScript 代码进行了配置；
eslint-config-google: Google 出品，根据其对代码风格的见解，开发了这个配置方案；
eslint-config-standard: 社区提供的一种 JavaScript 风格的配置，它致力于提供一种合理的方案。

示例代码

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------

-------- ----- -
  ----- ------- --------- - ------------

  ------------ -- -
    -------------- - ---- ------- -------- -------
  -- --------- 

  ------ -
    ---- ----------------
      ------ ------- ------- ---------
      ------- ----------- -- -------------- - --------- -----------
    ------
  --
-

------ ------- ----

此为使用 eslint-config-zillow 规定的 react hooks 写法，在使用中我们应该尽量减少代码规范的警告和错误。可以最大限度地保证代码质量和减少技术债务。

总结

eslint-config-zillow 是一款非常优秀的代码规范检查工具，可以有效提高团队代码风格的一致性和规范性，同时保证代码质量和减少技术债务。本文介绍了 eslint-config-zillow 的配置方式、如何覆盖规则、替代方案，并给出了使用示例。在开发中，我们应该尽量规避不规范的代码，使代码整洁美观，易于维护。

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