vue和react缩进规则的配置项如何配置

1，找到.eslintrc.js文件

2，找到indent

在 ESLint 的配置中，"indent": ["error", 2] 是代码缩进规则的配置项，用于强制规范代码的缩进方式，具体含义可以拆解为两部分：

一、配置项的核心含义

第一部分：error 这是规则的严重程度，对应 ESLint 规则的三种级别：
- off（或 0）：禁用该规则，不检查缩进。
- warn（或 1）：违反规则时触发警告（不会导致 lint 检查失败）。
- error（或 2）：违反规则时触发错误（会导致 lint 检查失败，阻断构建 / 提交等流程）。这里的 error 表示：如果代码缩进不符合要求，ESLint 会将其标记为错误级别。
第二部分：2 这是规则的核心选项 ，指定缩进的空格数 为 2 个。也就是说，代码中每一级缩进必须使用2 个空格，而非制表符（Tab）或 4 个空格等。

二、规则的作用示例

启用该规则后，ESLint 会检查并报错以下情况：

错误示例 （使用 4 个空格缩进）：

javascript

运行

复制代码

function foo() {
    // 这里用了 4 个空格，违反了 2 个空格的规则，会触发 error
    console.log('hello');
}

正确示例 （使用 2 个空格缩进）：

javascript

运行

复制代码

function foo() {
  // 2 个空格，符合规则
  console.log('hello');
}

三、该规则的扩展配置（可选）

indent 规则还支持更精细的配置，比如指定缩进使用制表符、对 switch/case 语句的缩进特殊处理等，格式为：

javascript

运行

复制代码

"indent": ["error", 2, {
  "SwitchCase": 1, // case 语句相对于 switch 缩进 1 级（即 2 个空格）
  "VariableDeclarator": {
    "var": 2, // var 声明的变量缩进 2 个空格
    "let": 2, // let/const 声明的变量缩进 2 个空格
    "const": 2
  },
  "outerIIFEBody": 1 // 立即执行函数的体部缩进 1 级
}]

四、常见的缩进配置对比

配置	效果	适用场景
`"indent": ["error", 2]`	强制 2 个空格缩进	React/Vue 等前端项目（主流）
`"indent": ["error", 4]`	强制 4 个空格缩进	Node.js/ 后端项目（部分团队习惯）
`"indent": ["error", "tab"]`	强制使用制表符缩进	偏好 Tab 的团队

总结

"indent": ["error", 2] 的核心作用是强制代码使用 2 个空格作为缩进单位，且违反时触发错误级别提示，这是前端项目中最常用的缩进规范之一，目的是统一团队的代码格式，提升代码可读性。