ESLint array-bracket-spacing 规则完全指南统一数组方括号内部空格的格式校验【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintarray-bracket-spacing是 ESLint 核心库中的一条布局layout类规则用于强制数组字面量以及 ES6 解构赋值中方括号[、]内部空格的书写风格保持一致。本文以 规则官方文档 为骨架结合 规则源码实现 与 完整测试用例系统讲解该规则的字符串选项never/always、对象选项singleValue/objectsInArrays/arraysInArrays、内置例外规则、可自动修复能力及其底层实现原理读完即可在项目中落地配置并理解其判定逻辑。规则要解决什么问题不同风格指南对数组方括号内部是否需要空格持有不同主张。该规则同时作用于两类语法结构数组字面量Array Literalvar arr [ foo, bar ];解构赋值Destructuring AssignmentES6var [ x, y ] z;下面两段代码分别展示了「方括号内带空格」与「方括号内不带空格」两种风格// 方括号内部带空格 var arr [ foo, bar ]; var [ x, y ] z; // 方括号内部不带空格 var arr [foo, bar]; var [x,y] z;规则的目标是在同一个代码库内数组方括号内部的空格处理方式必须保持一致避免不同开发者书写风格混杂。值得注意的是该规则关注的是数组字面量/解构模式自身的方括号并不管方括号外部与相邻 token如赋值号、逗号之间的空格也不处理方括号内部元素之间的空格那是comma-spacing等规则的职责。Rule Details规则检查的核心从规则元信息看这是一条type: layout纯格式布局类规则recommended: false即默认情况下不会出现在 ESLint 的推荐配置中需要显式开启。它同时具备fixable: whitespace能力——所有违规都可通过--fix自动修复详见后文。规则会针对每个ArrayExpression数组字面量和ArrayPattern数组解构模式节点执行校验return { ArrayPattern: validateArraySpacing, ArrayExpression: validateArraySpacing, };这正是文档中「该规则同时适用于数组字面量与 ES6 解构赋值」这一表述的源码依据见 lib/rules/array-bracket-spacing.js#L296-L299。Options完整的配置项说明该规则包含一个字符串选项与一个对象选项字符串选项never默认值——禁止数组方括号内部出现空格always——要求在数组方括号内部有一个或多个空格或换行。对象选项对never的例外当主选项为never时以下对象属性可以放宽限制singleValue: true——当数组字面量只包含单个元素时要求方括号内部有一个或多个空格或换行即[ foo ]objectsInArrays: true——当数组的元素是对象字面量时要求在方括号与对象花括号之间有一个或多个空格或换行即[ {与} ]arraysInArrays: true——当数组的元素是嵌套数组时要求在方括号之间有一个或多个空格或换行即[ [与] ]。对象选项对always的例外当主选项为always时以下对象属性则反过来收紧限制singleValue: false——单元素数组的方括号内部不允许空格即[foo]objectsInArrays: false——数组与其对象元素之间的方括号/花括号之间不允许空格即[{与}]arraysInArrays: false——数组与其嵌套数组元素之间的方括号之间不允许空格即[[与]]。对象选项中除这三个属性外的任何键都会被拒绝schema 中设置了additionalProperties: false传入未知属性会直接抛出配置校验错误。内置例外Built-in Exceptions无论配置如何规则都内置了两条例外never以及always的例外场景允许方括号内部出现换行——因为「左括号后立即换行、多行排列元素」是极其常见的写法always对空数组字面量[]不强制要求空格——空数组不存在内部元素加空格毫无意义。这两条例外决定了后面各示例中「跨行数组」与「空数组」代码的判定结果。never默认模式示例不正确的代码never/*eslint array-bracket-spacing: [error, never]*/ var arr [ foo, bar ]; var arr [foo, bar ]; var arr [ [foo], bar]; var arr [[ foo ], bar]; var arr [ foo, bar ]; var [ x, y ] z; var [ x,y ] z; var [ x, ...y ] z; var [ ,,x, ] z;以上代码中凡是方括号内侧紧贴空格的情况包括[ foo、bar ]以及解构模式[ x, y ]都会被报告为错误。正确的代码never/*eslint array-bracket-spacing: [error, never]*/ var arr []; var arr [foo, bar, baz]; var arr [[foo], bar, baz]; var arr [ foo, bar, baz ]; var arr [foo, bar ]; var arr [ foo, bar]; var [x, y] z; var [x,y] z; var [x, ...y] z; var [,,x,] z;注意其中的关键细节空数组[]合法[ foo之后紧跟换行再写元素的写法var arr [foo,\n bar\n];合法——这正是「换行例外」的体现只要左括号与首元素不在同一行就不算方括号内部空格元素与逗号之间是否有空格如[x,y]vs[x, y]不属于本规则管辖两种都正确。always 模式示例不正确的代码always/*eslint array-bracket-spacing: [error, always]*/ var arr [foo, bar]; var arr [foo, bar ]; var arr [ [foo], bar ]; var arr [foo, bar ]; var arr [ foo, bar]; var [x, y] z; var [x,y] z; var [x, ...y] z; var [,,x,] z;正确的代码always/*eslint array-bracket-spacing: [error, always]*/ var arr []; var arr [ foo, bar, baz ]; var arr [ [ foo ], bar, baz ]; var arr [ foo, bar ]; var arr [ foo, bar ]; var arr [ foo, bar, baz ]; var [ x, y ] z; var [ x,y ] z; var [ x, ...y ] z; var [ ,,x, ] z;在always模式下空数组[]依然正确空数组例外首元素与左括号、末元素与右括号之间必须有一个或多个空格换行同样被视作满足「空格或换行」的要求例如[ foo,\n bar\n]中左括号与首元素foo在同一行有空格合法而[foo,\n bar\n]中左括号后直接是foo且在同一行缺少空格非法。又如var arr [\n foo,\n bar ];合法因为右括号前的bar与]在同一行且之间有空格。singleValue单元素数组的特殊处理singleValue用于协调「数组只有一个元素」这一边界场景的写法。配置always, { singleValue: false }表示整体要求方括号内有空格但当数组只有一个元素时反而不允许空格。不正确的代码always, { singleValue: false }/*eslint array-bracket-spacing: [error, always, { singleValue: false }]*/ var foo [ foo ]; var foo [ foo]; var foo [foo ]; var foo [ 1 ]; var foo [ 1]; var foo [1 ]; var foo [ [ 1, 2 ] ]; var foo [ { foo: bar } ];正确的代码always, { singleValue: false }/*eslint array-bracket-spacing: [error, always, { singleValue: false }]*/ var foo [foo]; var foo [1]; var foo [[ 1, 1 ]]; var foo [{ foo: bar }];需要特别留意singleValue的判定基准它只看数组的字面元素个数是否为 1。因此[ [ 1, 2 ] ]唯一元素是嵌套数组、[ { foo: bar } ]唯一元素是对象也都属于「单元素数组」在singleValue: false下必须写成[[ 1, 1 ]]、[{ foo: bar }]。在源码实现中对应options.singleElementException node.elements.length 1的判断见 lib/rules/array-bracket-spacing.js#L246并在测试中有var foo [[ 1, 1 ]]、var foo [{ foo: bar }]等对应用例见 tests/lib/rules/array-bracket-spacing.js#L52-L58。objectsInArrays数组与对象元素的边界objectsInArrays针对「数组的元素是对象字面量」时方括号与花括号之间的空格。配置always, { objectsInArrays: false }表示整体要求空格但当数组与对象元素相邻时不要求也不允许产生方括号与花括号之间的空格。不正确的代码always, { objectsInArrays: false }/*eslint array-bracket-spacing: [error, always, { objectsInArrays: false }]*/ var arr [ { foo: bar } ]; var arr [ { foo: bar } ]正确的代码always, { objectsInArrays: false }/*eslint array-bracket-spacing: [error, always, { objectsInArrays: false }]*/ var arr [{ foo: bar }]; var arr [{ foo: bar }];注意判定只看首元素/末元素是否对象[ { foo: bar } ]中对象紧贴方括号应去掉[与{、}与]之间的空格而[{ foo: bar }, 1, 5 ]这类「对象不在首尾」的情况不受影响]前是数字5仍需按always保持空格。测试用例var foo [ 1, { bar: baz }, 5 ];也验证了中间位置的对象不会触发例外见 tests/lib/rules/array-bracket-spacing.js#L85-L88。arraysInArrays数组与嵌套数组元素的边界arraysInArrays针对「数组的元素是嵌套数组」时两层方括号之间的空格。配置always, { arraysInArrays: false }表示整体要求空格但相邻的两层方括号之间不要求空格。不正确的代码always, { arraysInArrays: false }/*eslint array-bracket-spacing: [error, always, { arraysInArrays: false }]*/ var arr [ [ 1, 2 ], 2, 3, 4 ]; var arr [ [ 1, 2 ], 2, [ 3, 4 ] ];正确的代码always, { arraysInArrays: false })/*eslint array-bracket-spacing: [error, always, { arraysInArrays: false }]*/ var arr [[ 1, 2 ], 2, 3, 4 ]; var arr [[ 1, 2 ], 2, [ 3, 4 ]];同理该例外只作用于首尾元素为数组的场景[[ 1, 2 ], 2, 3, 4 ]中只有开头的[[被放宽结尾的4 ]前是数字仍需满足always。源码通过isArrayType(firstElement)/isArrayType(lastElement)判断元素是否为ArrayExpression或ArrayPattern见 lib/rules/array-bracket-spacing.js#L214-L220。objectsInArrays与arraysInArrays也可以组合使用例如配置[error, always, { arraysInArrays: false, objectsInArrays: false }]对应测试用例var arr [[ 1, 2 ], 2, 3, { foo: bar }];见 tests/lib/rules/array-bracket-spacing.js#L112-L118。源码实现深度解析从 lib/rules/array-bracket-spacing.js 的实现可以看清规则的判定流程这对理解「什么时候报错、什么时候修复」非常有帮助。选项归一化isOptionSet规则先把字符串选项与对象选项归一化为四个布尔开关const spaced context.options[0] always; ... function isOptionSet(option) { return context.options[1] ? context.options[1][option] !spaced : false; } const options { spaced, singleElementException: isOptionSet(singleValue), objectsInArraysException: isOptionSet(objectsInArrays), arraysInArraysException: isOptionSet(arraysInArrays), };这里的关键技巧在于context.options[1][option] !spaced当主选项为always时只有对象属性显式为false才算「启用例外」当主选项为never时只有对象属性显式为true才算「启用例外」。因此同一套判定代码同时支撑了「对 never 的放宽」与「对 always 的收紧」两种语义见 lib/rules/array-bracket-spacing.js#L79-L100。判定逻辑validateArraySpacingvalidateArraySpacing是核心校验函数大致流程为空数组短路if (options.spaced node.elements.length 0) return;——always模式下空数组直接跳过对应内置例外取左括号first、第二个 tokensecond、最后一个 tokenlast及倒数第二个 tokenpenultimate根据首/末元素类型与单元素条件计算openingBracketMustBeSpaced与closingBracketMustBeSpaced例外命中时取反!options.spaced只有当相邻 token在同一行时才检查空格astUtils.isTokenOnSameLine其实现为left.loc.end.line right.loc.start.line见 lib/rules/utils/ast-utils.js#L1585-L1587——这正对应「换行不算方括号内部空格」的内置例外空格检测使用sourceCode.isSpaceBetween(first, second)该函数遍历两个 token 之间的所有 token含注释只要任一相邻 token 的 range 之间存在间隙即判定为有空白字符见 lib/languages/js/source-code/source-code.js#L504-L529左侧检查first与second即左括号与首元素右侧检查penultimate与last即末元素与右括号且要求first ! penultimate避免空数组等边界。四条消息与自动修复规则预定义了四条消息见 lib/rules/array-bracket-spacing.js#L69-L76messageId含义自动修复动作unexpectedSpaceAfter[之后不应有空格删除左括号与下一 token 之间的空白unexpectedSpaceBefore]之前不应有空格删除上一 token 与右括号之间的空白missingSpaceAfter[之后缺少空格在左括号后插入一个空格missingSpaceBefore]之前缺少空格在右括号前插入一个空格四个报告函数分别通过fixer.removeRange(...)或fixer.insertTextAfter/Before(..., )完成修复。由于规则声明了fixable: whitespace在命令行执行eslint --fix或在编辑器中对单个文件执行修复即可自动规范化所有数组方括号内部空格无需手工逐个修改。测试文件对修复行为有精确断言例如var foo [ ]修复后为var foo []messageId 为unexpectedSpaceAfter见 tests/lib/rules/array-bracket-spacing.js#L449-L465var foo [ { bar: baz }, 1, 5];在always objectsInArrays: false下同时产生unexpectedSpaceAfter与missingSpaceBefore两条错误并修复为var foo [{ bar: baz }, 1, 5 ];见 tests/lib/rules/array-bracket-spacing.js#L468-L494。与相关规则的协同使用该规则的元信息声明了三条相关规则见文档 frontmatter 及 lib/rules/array-bracket-spacing.js#L40-L44space-in-parens负责圆括号()内部空格与方括号规则互补object-curly-spacing负责花括号{}内部空格与方括号规则并列computed-property-spacing负责计算属性访问obj[expr]、计算属性键{ [key]: value }的方括号内部空格。尤其要注意区分array-bracket-spacing与computed-property-spacing前者管数组字面量/解构的方括号后者管成员访问与计算属性键的方括号。例如obj[ 1 ]中的空格由computed-property-spacing检查测试中var foo obj[ 1 ]配options: [always]正是验证 computed 类场景不受 array-bracket-spacing 影响见 tests/lib/rules/array-bracket-spacing.js#L41而var arr [ 1 ]中的空格才由本规则检查。若三类括号风格都要统一建议同时启用这三条规则。在项目中启用该规则由于recommended: false需要在配置文件中显式开启。以扁平配置flat config为例// eslint.config.js export default [ { rules: { array-bracket-spacing: [error, never], // 或要求空格 // array-bracket-spacing: [error, always], // 组合例外 // array-bracket-spacing: [error, always, { singleValue: false }], }, }, ];命令行下也可通过--rule直接覆盖验证npx eslint --rule array-bracket-spacing: [error, always] src/配合--fix可让规则自动规范化代码。更精细的自动化校验可结合 RuleTester 编写单元测试本项目针对该规则提供了 1356 行的完整测试集 tests/lib/rules/array-bracket-spacing.js覆盖字符串选项、三个对象选项的排列组合、修复输出、行列位置断言以及自定义解析器场景可作为复刻行为的权威参考。版本与迁移注意该规则已进入弃用流程从当前仓库源码可以确认该规则在 ESLintv8.53.0 起被标记为弃用deprecatedSince: 8.53.0availableUntil: 11.0.0弃用原因声明为「格式类规则正逐步移出 ESLint 核心」替代方案由stylistic/eslint-plugin插件中的同名规则array-bracket-spacing接管见 lib/rules/array-bracket-spacing.js#L16-L37。这意味着在新项目中建议直接使用stylistic/eslint-plugin的对应规则在现有老项目中该规则在 v11.0.0 之前依然可用。由于格式规则不改变程序运行语义迁移时只需替换规则来源、保持同样的选项结构即可平滑过渡。When Not To Use It何时关闭该规则如果你并不关心数组方括号内部空格的一致性——例如团队风格本身允许多种写法并存或者你更倾向于用 Prettier 等独立格式化工具统一处理所有空白此时应关闭本规则以免与格式化工具冲突——可以直接关闭{ rules: { array-bracket-spacing: off } }总而言之array-bracket-spacing是一条聚焦单一格式维度的布局规则通过never/always二选一定基调再用singleValue、objectsInArrays、arraysInArrays三个开关处理边界场景并以「换行豁免」「空数组豁免」两条内置例外保证多行数组与空数组不被误伤。配合--fix自动修复、RuleTester 测试集与弃用迁移路径你可以在保持代码风格统一的同时理解每条规则背后的精确判定逻辑。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考