news 2026/4/10 7:43:08

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/4/2 8:29:24

基于GUI-PLUS 搭配 Java Robot 实现智能桌面操控

目录 一、引言 二、代码实现 1. 新增工具类 CoordinateExtractUtil 1.1 核心方法说明 2. DesktopRobotUtil 修改 2.1 功能概述 2.2 核心方法解析 鼠标操作 键盘操作 滚轮操作 注意事项 3. OperationController 接口 三、结果演示 一、引言 在前文 基于GUI-PLUS 的桌…

作者头像 李华
网站建设 2026/4/3 22:18:52

Langchain-Chatchat实现多租户知识隔离的技术方案

Langchain-Chatchat 实现多租户知识隔离的技术方案 在企业智能化转型加速的今天,越来越多组织开始构建基于大语言模型(LLM)的本地知识库系统。然而,一个现实难题摆在面前:如何让多个部门、子公司甚至外部客户共享同一套…

作者头像 李华
网站建设 2026/4/8 10:57:09

震撼发现!GPT-5记忆系统不用RAG?四大层级架构详解(建议收藏)

本文通过逆向工程揭秘GPT-5记忆系统架构,发现其摒弃了传统向量数据库和RAG技术,转而采用四大层级:会话元数据、用户记忆、近期对话摘要和当前会话滑动窗口。这种分层设计既实现了个性化体验,又避免了高计算开销,在速度…

作者头像 李华
网站建设 2026/4/6 15:26:06

AI应用架构师主动学习实践:解决实际难题

AI应用架构师主动学习实践:解决实际难题 关键词:AI应用架构师、主动学习、实际难题、数据处理、模型优化、应用部署 摘要:本文深入探讨AI应用架构师在主动学习方面的实践,旨在解决实际工作中面临的各类难题。通过阐述主动学习的概…

作者头像 李华
网站建设 2026/4/3 13:51:16

Pandas库基础概念和基础操作

Pandas 是 Python 中用于数据分析和处理最流行的开源库之一,建立在 NumPy 之上,提供了高性能、易用的数据结构和数据分析工具。它特别适合处理结构化数据(如表格型或异质型数据)。以下是 Pandas 的基础概念详细介绍:一…

作者头像 李华