ESLint arrow-spacing 规则完全指南规范化箭头函数两侧空格【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint箭头函数是现代 JavaScript 中使用频率最高的语法之一而其前后的空格风格在不同开发者之间往往千差万别。本指南围绕 ESLint 核心规则arrow-spacing完整讲解其配置选项、正确与错误示例、底层实现原理与自动修复机制帮助读者在项目中一键统一箭头函数的空格风格。读完本文你将掌握该规则的全部配置能力并能从源码层面理解它如何定位token、如何统计与修正空格。规则概述arrow-spacing是一条布局layout类规则作用是规范化箭头函数箭头前后before/after的空格风格。它保证同一代码库中所有箭头函数的两侧空格保持一致// { before: true, after: true } (a) {} // { before: false, after: false } (a){}该规则在 ESLint 中定位为rule_type: layout且不属于eslint:recommended推荐集源码 lib/rules/arrow-spacing.js 中recommended: false需要团队显式开启。同时它是一条可自动修复fixable: whitespace的规则使用eslint --fix即可一键统一风格。从版本历史上看arrow-spacing自1.0.0-rc-1起便已加入 ESLint见 docs/src/_data/rule_versions.json是历史最悠久的核心规则之一。规则选项与默认配置该规则接收一个对象参数包含before和after两个布尔属性默认配置为{ before: true, after: true }选项类型默认值含义beforebooleantruetrue表示之前应有一个或多个空格false表示不能有空格afterbooleantruetrue表示之后应有一个或多个空格false表示不能有空格选项的 JSON Schema 定义在源码 lib/rules/arrow-spacing.js 中before与after均为布尔类型且additionalProperties: false即传入任何未定义的额外属性都会被判定为配置非法。在配置文件中启用{ rules: { arrow-spacing: [error, { before: true, after: true }] } }若省略第二个参数不传选项对象规则将直接采用默认值{ before: true, after: true }。值得注意的是源码中通过rule.before rule.before ! false和rule.after rule.after ! false合并选项lib/rules/arrow-spacing.js因此只要选项值不是显式的false就会被视为true——这与 Schema 中声明的默认值行为一致。规则详情与示例本节完整覆盖四种选项组合的正确/错误代码示例。所有示例均假设在配置中启用该规则error级别。默认配置{ before: true, after: true }要求两侧各有一个或多个空格。错误代码示例/*eslint arrow-spacing: error*/ () {}; () {}; (a) {}; (a) {}; a a; a a; () {\n}; () {\n};正确代码示例/*eslint arrow-spacing: error*/ () {}; (a) {}; a a; () {\n};选项{ before: false, after: false }要求两侧均不得有空格紧凑风格。错误代码示例/*eslint arrow-spacing: [error, { before: false, after: false }]*/ () {}; (a) {}; () {\n};正确代码示例/*eslint arrow-spacing: [error, { before: false, after: false }]*/ (){}; (a){}; (){\n};选项{ before: false, after: true }要求之前无空格、之后有空格。错误代码示例/*eslint arrow-spacing: [error, { before: false, after: true }]*/ () {}; (a) {}; (){\n};正确代码示例/*eslint arrow-spacing: [error, { before: false, after: true }]*/ () {}; (a) {}; () {\n};{ before: true, after: false }的组合逻辑与此对称之前有空格、之后无空格。跨行场景与测试佐证规则同样适用于后换行的写法。在测试文件 tests/lib/rules/arrow-spacing.js 中(a) \n{}、(a) \r\n{}、(a) \n 0均被判定为有效代码——只要之后存在换行即使换行后紧接内容即满足有空格的要求不会误报。这一点在将规则应用于多行箭头函数如 JSX 回调、链式调用时尤为重要。源码级原理规则如何工作arrow-spacing的实现非常精简整个逻辑集中在 lib/rules/arrow-spacing.js 的create(context)函数中由三个核心步骤构成1. 定位tokengetTokens规则监听ArrowFunctionExpression节点lib/rules/arrow-spacing.js对每个箭头函数节点调用getTokens(node)const arrow sourceCode.getTokenBefore( node.body, astUtils.isArrowToken, ); return { before: sourceCode.getTokenBefore(arrow), arrow, after: sourceCode.getTokenAfter(arrow), };其思路是先找到函数体node.body之前的、符合isArrowToken判定的那个 token即再分别取它前一个和后一个 token。isArrowToken定义在 lib/rules/utils/ast-utils.js 中用于从 token 流中精确识别符号。2. 统计空格数countSpaces借助 token 的range源码位置区间计算两侧的空格数量const before tokens.arrow.range[0] - tokens.before.range[1]; const after tokens.after.range[0] - tokens.arrow.range[1]; return { before, after };即用起点减去前一个 token 的终点得到前的空格数用后一个 token 的起点减去的终点得到后的空格数。3. 校验并报告spacesspaces(node)根据合并后的rule.before/rule.after进行判定lib/rules/arrow-spacing.jsrule.before为true且countSpace.before 0→ 报告expectedBeforeMissing space before .修复方式为在前插入一个空格rule.before为false且countSpace.before 0→ 报告unexpectedBeforeUnexpected space before .修复方式为删除前的整段空白rule.after的判定逻辑完全对称对应消息expectedAfter/unexpectedAfter。所有四条消息文案定义在源码的meta.messages中lib/rules/arrow-spacing.js。注意空格数量只做是否为 0 / 是否大于 0的判断因此多个空格也会被统一修复为单个空格或完全移除。自动修复的完整行为由于fixable: whitespace执行eslint --fix时规则会调用fixer.insertTextBefore、fixer.insertTextAfter或fixer.removeRange自动改写代码。测试文件 tests/lib/rules/arrow-spacing.js 中的invalid用例完整验证了修复后的输出例如输入配置修复输出aa{before:true, after:true}a aa a{after:false, before:true}a aa a{before:false, after:false}aa(a) \n{}{after:false}(a) {}其中最后一个用例tests/lib/rules/arrow-spacing.js对应 GitHub issue #7079 的回归场景后紧跟换行时after: false会移除换行前残留的空格但不会移除换行本身。嵌套箭头函数的处理ArrowFunctionExpression监听对所有箭头函数生效包括嵌套场景。测试中(a ()0)1被修复为(a () 0) 1tests/lib/rules/arrow-spacing.js说明规则会依次处理外层与内层每个一次--fix即可同时修正全部问题。在代码库中的元数据与生态定位规则元数据同样维护在文档站点数据中docs/src/_data/rules_meta.json 记录了其type: layout、fixable: whitespace、非推荐recommended: false以及弃用信息docs/src/_data/rules.json 的条目包含replacedBy字段指明迁移去向。关于弃用状态的提醒依据源码头部注释lib/rules/arrow-spacing.js与meta.deprecated字段arrow-spacing已在ESLint v8.53.0被标记为弃用格式化类规则正逐步移出 ESLint 核心官方建议迁移到由 ESLint Stylistic 维护的stylistic/eslint-plugin插件对应规则stylistic/arrow-spacing该规则将在ESLint v11.0.0从核心中移除。文档数据中同样保留这一弃用与替代信息见 docs/src/_data/rules_meta.json。因此在实际项目中若使用 ESLint v8.53.0 及以上版本建议已有配置中仍可继续使用arrow-spacing但会在 IDE 与 CLI 中收到弃用提示新项目或正在升级的项目优先安装stylistic/eslint-plugin并改用其arrow-spacing规则选项与行为保持兼容迁移成本极低若团队暂不迁移可固定 ESLint 版本或接受弃用警告规则本身在 v11 之前依然可用。实战建议沿用社区主流默认值绝大多数风格指南包括 ESLint 自身示例采用{ before: true, after: true }这也是规则的默认配置开启规则即可通常无需显式传参。与arrow-parens搭配使用arrow-parens控制箭头函数参数的括号风格与arrow-spacing同属箭头函数格式化规则二者常同时开启分别约束括号与空格。放心使用--fix该规则仅处理空白字符不改变任何语义可安全地加入 pre-commit 钩子或 CI 的eslint --fix流程中。警惕多空格被统一规则对两侧多空格会一并修正为单空格或零空格若团队存在对齐排版需求如对齐多个需知悉这一行为后自行权衡。参考路径汇总规则文档docs/src/rules/arrow-spacing.md规则源码lib/rules/arrow-spacing.js规则测试tests/lib/rules/arrow-spacing.jsToken 判定工具lib/rules/utils/ast-utils.js规则元数据docs/src/_data/rules_meta.json规则列表与替代信息docs/src/_data/rules.json版本历史docs/src/_data/rule_versions.json【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考