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 个空格作为缩进单位，且违反时触发错误级别提示，这是前端项目中最常用的缩进规范之一，目的是统一团队的代码格式，提升代码可读性。