news 2026/5/9 9:48:12

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue和react缩进规则的配置项如何配置

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/8 7:41:32

被网友们的“Excel用法”惊到了!开窍之后,比用 VBA 还要香!

国内在excel这块,可能会用个vlookup或者数据透视表,就已经可以超越60%的人了。更何况还有那种为了学会自动化报表,又去学了VBA、python、selenum测试、html、js前端等等的人。但,其实稍微换个用法,甚至比用VBA和python…

作者头像 李华
网站建设 2026/5/8 10:22:42

直播课冷场终结者|魔果云课这些工具真的能重塑线上课堂吗?

今天结合真实教学场景,深度分析一套最近被教育圈频繁提及的工具——魔果云课。一、线上课堂的“沉默螺旋”是如何被打破的?传统直播课最怕提问无人应答,而魔果云课的答题器功能,实际上是通过技术手段完成了课堂反馈的“轻量化重构…

作者头像 李华
网站建设 2026/5/3 14:57:24

网络安全启航指南:为你整合从零开始的系统知识与必备工具合集

网络安全的全面解析 一、网络安全的概念与重要性 网络安全(Cyber Security)是指网络系统的硬件、软件及其系统中的数据受到保护,不因偶然的或者恶意的原因而遭受到破坏、更改、泄露,系统连续可靠正常地运行,网络服务…

作者头像 李华
网站建设 2026/5/8 16:54:14

Langchain-Chatchat结合FastAPI构建高性能后端

Langchain-Chatchat 结合 FastAPI 构建高性能后端 在企业智能化升级的浪潮中,一个现实问题日益凸显:员工每天要面对堆积如山的内部文档——HR政策、IT操作手册、财务报销流程……而真正需要时,却总是“翻了半天找不到”。与此同时&#xff0c…

作者头像 李华