如何在 ESLint 中设置代码缩进-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码缩进是非常重要的，它能够使代码更加易读，也能够帮助我们更好地组织代码。然而，在团队开发中，由于不同开发者的习惯不同，代码缩进也存在差异。ESLint 是一个常用的代码检查工具，它可以帮助我们规范代码风格，那么在 ESLint 中如何设置代码缩进呢？本文将从如何安装和配置 ESLint，以及如何设置代码缩进两个方面来介绍。

安装和配置 ESLint

安装 ESLint

首先，我们需要在项目中安装 ESLint。可以使用 npm 或 yarn 进行安装。

使用 npm 安装：

npm install eslint --save-dev

使用 yarn 安装：

yarn add eslint --dev

初始化配置文件

安装完成后，需要生成 ESLint 配置文件，可以使用 ESLint 提供的命令行工具来生成。执行下面的命令：

npx eslint --init

接着，根据提示依次输入相关信息，生成配置文件。生成的配置文件通常是 .eslintrc，.eslintrc.js 或 .eslintrc.json。

此外，我们还可以根据自己的需求进行配置，具体的配置项可以参考 ESLint 的官方文档。

设置代码缩进

当我们生成了 ESLint 配置文件后，就可以开始设置代码缩进了。

在 ESLint 中，我们可以使用 indent 规则来设置代码缩进。indent 规则有两个配置选项：SwitchCase 和 MemberExpression.

SwitchCase：设置 switch case 语句中缩进的级别
MemberExpression：设置成员表达式（例如 obj.prop）的缩进级别

设置 `SwitchCase` 的缩进级别

假设我们希望 SwitchCase 语句中的缩进级别为 2，我们可以这样进行配置：

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

以上代码中，error 表示如果有缩进错误，则会在命令行中报错。

设置 `MemberExpression` 的缩进级别

假设我们希望 MemberExpression 的缩进级别为 4，我们可以这样进行配置：

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

以上代码中，我们将 MemberExpression 的级别设置为 1，因为它实际上是在 2 级的缩进中。

示例代码

以下是一份示例代码，演示如何在 ESLint 中设置代码缩进：

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

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

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

根据上面的代码，我们可以看到，switch case 语句中的缩进级别为 2，而成员表达式的缩进级别为 4。

总结

以上便是如何在 ESLint 中设置代码缩进的方法及示例代码。在使用时，我们可以根据自己的需求进行配置，同时注意缩进的一致性，以保证代码的可读性和可维护性。

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

如何在 ESLint 中设置代码缩进