npm 包 eslint-config-bighuman 使用教程

背景 & 简介

JavaScript 语言本身是比较松散的语言，代码质量的统一规范是十分有必要的，尤其在协作开发中。有了代码规范的统一，会更能够减少开发中出现的 bug 和错误，提高代码质量。

一些现成的代码规范配置可以直接使用，其中一个较为流行的配置是 eslint-config-bighuman，其包含了一系列的规范，在此教程中，我们将详细介绍如何使用与配置该 npm 包。

步骤

1. 安装

要使用 eslint-config-bighuman，我们首先需要安装它。可以使用以下命令：

npm install --save-dev eslint-config-bighuman

或

yarn add -D eslint-config-bighuman

2. 配置

安装完成后，我们需要在项目根目录下的 .eslintrc.js 文件中进行配置。该文件可以手动创建，也可以使用 eslint --init 命令来自动生成。

在 .eslintrc.js 文件中，我们需要配置 extends 字段，将 bighuman 配置作为 eslint 的一个扩展：

module.exports = {
  extends: 'bighuman'
}

如果你的配置不仅仅是 bighuman，可以进行如下配置：

module.exports = {
  extends: [
    "bighuman",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ]
}

3. 集成其它插件

eslint 本身就提供了一些插件扩展，例如在上面的配置中我们使用了 react 插件。除此之外，我们还可以集成其它的插件，例如：

{
  "plugins": [
    // eslint-plugin-react-hooks
    "react-hooks",
    // eslint-plugin-prettier
    "prettier"
  ]
}

4. 解决冲突

有时在集成其它插件的时候，可能会和 bighuman 规范产生冲突，在此情况下，我们需要在 rules 字段中进行手动覆盖。

以下是一个简单的例子，我们需要在 eslint-plugin-prettier 插件配置中，覆盖掉 bighuman 配置中的 prettier/prettier 规则。

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

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

5. 检测 & 修复

现在我们已经配置好了 eslint-config-bighuman，可以通过以下命令对项目中的 JavaScript 代码进行检查：

eslint .

如果你的代码中有不符合规范的地方， eslint 会提示你有哪些地方需要规范。

我们也可以通过以下命令修复不符合规范地方：

eslint . --fix

结论

通过本教程，我们介绍了如何使用 eslint-config-bighuman 进行 JavaScript 代码规范化，同时也学习到了如何配置 eslint 和配置 plug-ins。希望本教程能够对你有所帮助，增强你的前端开发技能。

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