ESLint object-curly-spacing 规则全解析统一对象字面量、解构与 import/export 花括号内间距【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintobject-curly-spacing是 ESLint 核心内置的一条布局layout类规则用于强制统一对象字面量、解构赋值以及import/export声明中花括号{}内部的空格使用方式。无论团队偏好{ foo: bar }还是{foo: bar}本规则都能保证全仓库代码风格一致并通过--fix自动修复不规范的空白。阅读本文后你将掌握该规则的全部配置项、各选项下的正误代码示例、底层源码实现原理以及它在 ESLint 8.53.0 之后的弃用与迁移方案。规则概述它检查哪些花括号While formatting preferences are very personal尽管格式偏好是非常个人化的大量主流风格指南仍会对花括号内部是否留空格做出明确要求。object-curly-spacing覆盖以下四类语法结构中的花括号// simple object literals —— 简单对象字面量 var obj { foo: bar }; // nested object literals —— 嵌套对象字面量 var obj { foo: { zoo: bar } }; // destructuring assignment (EcmaScript 6) —— 解构赋值 var { x, y } y; // import/export declarations (EcmaScript 6) —— 导入/导出声明 import { foo } from bar; export { foo };该规则的定位是enforce consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers强制对象字面量、解构赋值和 import/export 说明符花括号内部的间距一致。从源码可见它实际监听四类 AST 节点ObjectExpression、ObjectPattern、ImportDeclaration与ExportNamedDeclaration见 lib/rules/object-curly-spacing.js因此只要出现上述语法规则都会生效。与object-curly-spacing配套的周边布局规则包括array-bracket-spacing数组方括号间距、comma-spacing逗号间距、computed-property-spacing计算属性方括号间距以及space-in-parens圆括号间距它们共同组成一套完整的括号/分隔符间距检查体系。配置选项详解该规则接受两个选项一个字符串选项和一个对象选项。字符串选项never默认值——禁止花括号内部出现空格即{foo: bar}风格always——要求花括号内部必须有空格{}空对象除外即{ foo: bar }风格。两个值在配置 Schema 中通过enum: [always, never]限定见 lib/rules/object-curly-spacing.js传入其他值会直接触发配置校验错误。对象选项对象选项中的两个布尔开关专门用于处理首尾元素是数组或对象的特殊嵌套场景它们的作用方向与字符串选项恰好相反arraysInObjects: true—— 当字符串选项为never时生效要求以数组元素开头/结尾的对象字面量保留花括号内部空格arraysInObjects: false—— 当字符串选项为always时生效要求以数组元素开头/结尾的对象字面量去除花括号内部空格objectsInObjects: true—— 当字符串选项为never时生效要求以对象元素开头/结尾的对象字面量保留花括号内部空格objectsInObjects: false—— 当字符串选项为always时生效要求以对象元素开头/结尾的对象字面量去除花括号内部空格。在源码中这两个选项的含义被统一为异常exception语义isOptionSet(arraysInObjects)会判断context.options[1][option] !spaced见 lib/rules/object-curly-spacing.js即只有当对象选项与主选项方向相反时才构成例外。Schema 也明确规定该对象只能包含这两个属性additionalProperties: false。在配置文件中启用在eslint.config.jsflat config中按如下方式配置export default [ { rules: { // 默认值 never可省略 object-curly-spacing: [error, never], // 或要求空格 object-curly-spacing: [error, always], // 带对象选项 object-curly-spacing: [error, never, { arraysInObjects: true }], }, }, ];never 模式默认禁止花括号内空格错误示例以下代码在默认的never选项下均会被报告/*eslint object-curly-spacing: [error, never]*/ var obj { foo: bar }; // 左花括号后有空格 var obj {foo: bar }; // 右花括号前有空格 var obj { baz: {foo: qux}, bar}; // 内层对象字面量有空格 var obj {baz: { foo: qux}, bar}; // 内层对象字面量有空格 var {x } y; // 解构模式右花括号前有空格 import { foo } from bar; // import 说明符花括号内有空格正确示例/*eslint object-curly-spacing: [error, never]*/ var obj {foo: bar}; var obj {foo: {bar: baz}, qux: quxx}; var obj { foo: bar }; // 换行布局不受影响 var obj {foo: bar }; // 换行后右花括号单独成行无间距问题 var obj { foo:bar}; var obj {}; // 空对象总是允许 var {x} y; import {foo} from bar;注意never只约束同一行内花括号与相邻 token 之间的空格上述多行写法花括号与内容分行均合法。测试用例中也印证了这一点例如var obj {foo: bar,\nbaz: qux\n};与var obj {\nfoo: bar,\nbaz: qux};在never下均为有效代码见 tests/lib/rules/object-curly-spacing.js。always 模式强制花括号内空格错误示例/*eslint object-curly-spacing: [error, always]*/ var obj {foo: bar}; // 左花括号后缺空格 var obj {foo: bar }; // 左花括号后缺空格 var obj { baz: {foo: qux}, bar}; // 内层对象右花括号前缺空格 var obj {baz: { foo: qux }, bar}; // 外层对象左花括号后缺空格 var obj {foo: bar }; // 左花括号后与内容同行却无空格 var obj { foo:bar}; // 右花括号前与内容同行却无空格 var {x} y; // 解构模式缺空格 import {foo } from bar; // import 左花括号后缺空格正确示例/*eslint object-curly-spacing: [error, always]*/ var obj {}; // 空对象始终例外 var obj { foo: bar }; var obj { foo: { bar: baz }, qux: quxx }; var obj { foo: bar }; // 换行布局合法 var { x } y; import { foo } from bar;在always下只要花括号与首个/末个 token 处于同一行就必须保证两者间存在空格一旦换行间距要求即解除。嵌套例外arraysInObjects 与 objectsInObjects当对象字面量的首尾元素本身是数组或对象时常规间距规则会造成视觉上的拥挤例如{foo: [ 1, 2 ] }在never下要求右花括号前无空格但数组自身的结束符]与右花括号紧贴会让嵌套层级难以辨识。这两个对象选项正是为这种场景提供例外。arraysInObjects 示例never搭配{ arraysInObjects: true }时的正确代码/*eslint object-curly-spacing: [error, never, { arraysInObjects: true }]*/ var obj {foo: [ 1, 2 ] }; var obj {foo: [ baz, bar ] };always搭配{ arraysInObjects: false }时的正确代码/*eslint object-curly-spacing: [error, always, { arraysInObjects: false }]*/ var obj { foo: [ 1, 2 ]}; var obj { foo: [ baz, bar ]};测试中还有更细致的组合用例例如var obj { foo: [ 1, 2 ]};在[always, { arraysInObjects: false }]下通过var a { thingInList: list[0] };同样通过——后者以成员表达式结尾而非数组字面量因此不触发数组例外见 tests/lib/rules/object-curly-spacing.js。objectsInObjects 示例never搭配{ objectsInObjects: true }时的正确代码/*eslint object-curly-spacing: [error, never, { objectsInObjects: true }]*/ var obj {foo: {baz: 1, bar: 2} };always搭配{ objectsInObjects: false }时的正确代码/*eslint object-curly-spacing: [error, always, { objectsInObjects: false }]*/ var obj { foo: { baz: 1, bar: 2 }};两个对象选项还可同时使用例如[always, { arraysInObjects: false, objectsInObjects: false }]下var obj { qux: [ 1, 2 ], foo: { bar: 1, baz: 2 }};是有效代码无论末尾元素是数组还是对象都允许右花括号前不留空格见 tests/lib/rules/object-curly-spacing.js。此外解构模式同样受这些例外影响如var { y: { z }} x在[always, { objectsInObjects: false }]下通过。源码实现原理从 AST 到报告的完整链路深入 lib/rules/object-curly-spacing.js 可以看到该规则的完整实现逻辑理解它有助于你预判边界行为。核心检查流程规则通过create(context)返回四个节点监听器分别对接ObjectPattern、ObjectExpression、ImportDeclaration和ExportNamedDeclaration源码 L355-L367。每个监听器提取花括号两侧的关键 tokencheckForObject处理对象字面量与解构模式获取{first、}last以及紧邻其内的 second、penultimate 四个 token源码 L272-L287对空对象properties.length 0直接跳过检查checkForImport与checkForExport处理import { ... }与export { ... }需要跳过默认导入、命名空间导入等非ImportSpecifier的说明符源码 L294-L349。随后统一交给validateBraceSpacing校验源码 L205-L245其核心逻辑是行内判断借助astUtils.isTokenOnSameLine(first, second)确认花括号与相邻 token 是否同一行只有同行才检查空格从而天然支持多行对象布局前后两端分别判定开头看sourceCode.isSpaceBetween(first, second)结尾看sourceCode.isSpaceBetween(penultimate, last)再结合options.spaced决定该要求空格还是禁止空格嵌套例外判定当arraysInObjectsException或objectsInObjectsException开启时通过astUtils.isClosingBracketToken(penultimate)/astUtils.isClosingBraceToken(penultimate)判断倒数第二个 token 是否为数组/对象的闭合符再用sourceCode.getNodeByRangeIndex(...)反查该 token 所属节点类型ArrayExpression、ObjectExpression、ObjectPattern以此翻转末尾空格的要求方向。其中用到的 token 判定工具如isClosingBraceToken判断token.value } token.type Punctuator定义在 lib/rules/utils/ast-utils.js。自动修复与报告信息该规则meta.fixable为whitespace源码 L46支持eslint --fix自动修复。修复动作分为四种reportNoBeginningSpace/reportNoEndingSpace用fixer.removeRange移除多余的空白区间reportRequiredBeginningSpace/reportRequiredEndingSpace用fixer.insertTextAfter/fixer.insertTextBefore在相应位置插入一个空格。对应的四条消息模板定义在meta.messages中源码 L66-L72运行 ESLint 时会输出 A space is required before {{token}}. / There should be no space after {{token}}. 等提示。值得注意的是token 的获取均开启了includeComments: true因此注释如{ /**/foo:bar/**/ }、{ //\nfoo:bar }会被视为相邻 token 参与间距判断测试用例对此有专门覆盖见 tests/lib/rules/object-curly-spacing.js。弃用状态与迁移建议ESLint 8.53.0 起该规则的meta中带有deprecated字段声明其自ESLint v8.53.0起弃用availableUntil: 11.0.0原因是Formatting rules are being moved out of ESLint core格式化类规则正被移出 ESLint 核心见 lib/rules/object-curly-spacing.js。迁移路径为使用社区维护的stylistic/eslint-pluginESLint Stylistic 项目中的同名规则object-curly-spacing作为替代对于使用旧版.eslintrc配置的项目规则在layout分类下可通过extends: eslint:recommended之外的显式配置或插件配置引入。尽管规则在核心中已被标记弃用其功能在当前仓库对应版本的 ESLint 中依然可用并正常通过测试完整的 valid/invalid 用例见 tests/lib/rules/object-curly-spacing.js只是新项目建议直接采用 ESLint Stylistic 方案以获得持续维护。当不需要此规则时如果你不关心花括号之间间距的一致性——例如团队已有统一使用的 Prettier 等格式化工具或项目代码量小、风格天然统一——可以关闭该规则export default [ { rules: { object-curly-spacing: off, }, }, ];关闭后ESLint 将不再对{ foo: bar }与{foo: bar}的混用作任何提示。需要说明的是该规则同样不会被 ESLint 的eslint:recommended预设默认启用docs.recommended: false见 lib/rules/object-curly-spacing.js因此是否启用完全取决于团队风格约定与它密切相关的array-bracket-spacing、comma-spacing、computed-property-spacing、space-in-parens等布局规则见 docs/src/rules/object-curly-spacing.md 的 front matter 中的related_rules建议一并配置以保证括号类间距检查的整体一致。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考