vue和react缩进规则的配置项如何配置
2026/7/17 4:32:43 网站建设 项目流程

1,找到.eslintrc.js文件

2,找到indent

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

一、配置项的核心含义

  1. 第一部分:error这是规则的严重程度,对应 ESLint 规则的三种级别:

    • off(或0):禁用该规则,不检查缩进。
    • warn(或1):违反规则时触发警告(不会导致 lint 检查失败)。
    • error(或2):违反规则时触发错误(会导致 lint 检查失败,阻断构建 / 提交等流程)。这里的error表示:如果代码缩进不符合要求,ESLint 会将其标记为错误级别。
  2. 第二部分: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 个空格作为缩进单位,且违反时触发错误级别提示,这是前端项目中最常用的缩进规范之一,目的是统一团队的代码格式,提升代码可读性。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询