ESLint 规则 space-before-blocks 完全指南统一代码块前的空格风格【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本文围绕 ESLint 核心格式化规则space-before-blocks展开系统讲解其设计动机、always/never/ 对象配置三种选项的完整用法与代码示例、与keyword-spacing等相邻规则的职责边界并结合 lib/rules/space-before-blocks.js 的源码实现与 tests/lib/rules/space-before-blocks.js 的测试用例说明其底层判定逻辑与自动修复机制。读完本文你将能在项目中准确配置该规则并理解它与其他空白类规则如何协作而不冲突。规则简介为什么要在意代码块前的空格一致性是任何风格指南的重要组成部分。左花括号opening brace放在什么位置虽然属于个人偏好但在一个项目里应当保持统一——不一致的风格会分散读者注意力让人难以聚焦代码的关键逻辑。space-before-blocks正是为此而生它强制代码块与前置内容之间的空格保持一致。从规则元数据lib/rules/space-before-blocks.js可以看到该规则属于layout布局类型规则recommended为false不默认开启并且是可自动修复的fixable: whitespace在 ESLint 8.53.0 起被标记为弃用详见文末弃用状态一节。规则工作原理只检查同一行内的块该规则只对没有在新行开头的代码块生效。也就是说如果一个代码块的左花括号与它前面的 token 位于同一行规则才会检查它们之间的空格若左花括号独占一行或位于行首则不在检查范围内。规则明确忽略以下三种场景的空格这些职责分别由其他规则承担与代码块之间的空格由arrow-spacing规则处理见 docs/src/rules/arrow-spacing.md关键字与代码块之间的空格由keyword-spacing规则处理见 docs/src/rules/keyword-spacing.mdswitch分支冒号:与代码块之间的空格由switch-colon-spacing规则处理见 docs/src/rules/switch-colon-spacing.md。规则文档中登记的关联规则还包括 docs/src/rules/block-spacing.md控制花括号内部的空格与 docs/src/rules/brace-style.md控制花括号换行风格它们与space-before-blocks一起构成了完整的花括号风格约束体系。冲突检测的源码实现在源码层面上述忽略场景由isConflicted函数实现lib/rules/space-before-blocks.js当代码块前的第一个 token 满足以下任一条件时规则直接跳过检查是箭头 token利用astUtils.isArrowToken判断其实现为token.value token.type Punctuator见 lib/rules/utils/ast-utils.js是关键字 tokentoken.type Keyword见 lib/rules/utils/ast-utils.js且该块不是函数体是冒号 token且所属父节点是SwitchCase且该冒号正是该 switch 分支的冒号通过getSwitchCaseColonToken获取见 lib/rules/utils/ast-utils.js。选项详解三种配置方式该规则接受一个参数默认值为always配置值含义always默认代码块前必须至少有一个空格never代码块前不得有任何空格对象{ functions, keywords, classes }对函数块、关键字块、类分别配置任一值为off时该类代码块不强制任何风格其中函数块指函数声明 / 函数表达式 / 箭头函数的函数体关键字块指if、for、while、switch、try/catch等由关键字引导的代码块类块指class的ClassBody。示例对象配置如{ functions: never, keywords: always, classes: always }。选项 always默认不正确的代码/*eslint space-before-blocks: error*/ if (a){ b(); } function a(){} for (;;){ b(); } try {} catch(a){} class Foo{ constructor(){} }正确的代码/*eslint space-before-blocks: error*/ if (a) { b(); } if (a) { b(); } else{ /*no error. this is checked by keyword-spacing rule.*/ c(); } class C { static{} /*no error. this is checked by keyword-spacing rule.*/ } function a() {} for (;;) { b(); } try {} catch(a) {}注意上例中的两处细节else{之后紧接花括号的空格由keyword-spacing负责类中的static{}静态块之前的空格同样由keyword-spacing负责因此即使缺少空格也不会触发本规则。选项 never不正确的代码/*eslint space-before-blocks: [error, never]*/ if (a) { b(); } function a() {} for (;;) { b(); } try {} catch(a) {}正确的代码/*eslint space-before-blocks: [error, never]*/ if (a){ b(); } function a(){} for (;;){ b(); } try{} catch(a){} class Foo{ constructor(){} }在never模式下catch(a){}中catch与左花括号之间同样不允许出现空格。对象配置按块类型分别控制对象配置支持对functions、keywords、classes三类代码块独立设定always、never或off。以下为文档给出的全部组合示例。组合一{ functions: never, keywords: always, classes: never }不正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: always, classes: never }]*/ function a() {} try {} catch(a){} class Foo{ constructor() {} }正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: always, classes: never }]*/ for (;;) { // ... } describe(function(){ // ... }); class Foo{ constructor(){} }组合二{ functions: always, keywords: never, classes: never }不正确的代码/*eslint space-before-blocks: [error, { functions: always, keywords: never, classes: never }]*/ function a(){} try {} catch(a) {} class Foo { constructor(){} }正确的代码/*eslint space-before-blocks: [error, { functions: always, keywords: never, classes: never }]*/ if (a){ b(); } var a function() {} class Foo{ constructor() {} }注意var a function() {}中的空格属于函数体前的空格由functions控制因此必须保留if (a){中)与{之间不能有空格由keywords控制类的ClassBody前不能有空格由classes控制。组合三{ functions: never, keywords: never, classes: always }不正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: never, classes: always }]*/ class Foo{ constructor(){} }正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: never, classes: always }]*/ class Foo { constructor(){} }该组合下只有类名与{之间必须有空格类内的构造函数体函数块前则不允许空格。off 值对某类块不强制若对象配置中某一项为off则该类代码块无论有无前置空格都不会报错。例如{ functions: always, keywords: off, classes: off }只约束函数体前的空格关键字块与类块完全放行。测试用例中为此类组合定义了完整的合法/非法验证集见 tests/lib/rules/space-before-blocks.js覆盖functions/keywords/classes各自always与never配off的全部九种情形。配置示例在 flat config 中启用在 ESLint 的 flat configeslint.config.js中启用该规则export default [ { rules: { space-before-blocks: error, // 等价于 [error, always] space-before-blocks: [error, never], space-before-blocks: [error, { functions: never, keywords: always, classes: always }] } } ];规则的参数校验由schema定义lib/rules/space-before-blocks.js参数必须是always、never两者之一或一个仅含keywords、functions、classes三个可选属性每项取值always、never、off的对象且不允许额外属性additionalProperties: false。传入非法配置会在加载时直接报错。源码级解析判定与自动修复流程规则的核心逻辑位于create函数中lib/rules/space-before-blocks.js整体流程如下解析配置根据context.options[0]初始化六个布尔标志。默认未传参或传always时always*全为true传never时反转为never*全为true传对象时按各属性的值逐一设置lib/rules/space-before-blocks.js。监听三类节点规则注册了对BlockStatement、ClassBody、SwitchStatement三种节点的监听lib/rules/space-before-blocks.js。其中SwitchStatement单独通过checkSpaceBeforeCaseBlock处理——它定位 switch 的{有分支时取第一个分支前的 token无分支时取倒数第二个 token再走统一的检查函数lib/rules/space-before-blocks.js。统一检查checkPrecedingSpacelib/rules/space-before-blocks.js取代码块前一个 token若不存在、已与别的规则冲突isConflicted、或与该块不在同一行astUtils.isTokenOnSameLine则跳过用sourceCode.isSpaceBetween判断两个 token 之间是否存在空格按节点类型分派要求函数体走functions标志ClassBody走classes标志其余关键字块走keywords标志。自动修复缺少空格missingSpace消息 Missing space before opening brace.时在{前插入一个空格fixer.insertTextBefore(node, )多余空格unexpectedSpace消息 Unexpected space before opening brace.时删除前一 token 与{之间的整段文本fixer.removeRange([precedingToken.range[1], node.range[0]])。由于是空白类修复该规则与--fix配合时不会改变语义可安全地纳入自动修复流程。测试用例佐证tests/lib/rules/space-before-blocks.js 共 735 行覆盖了非常全面的场景节点覆盖if/else、函数声明与表达式、for、while、switch含空 switch 与带分支 switch、try/catch、class含constructor与静态块、ES6export default class/export function等边界场景if(a) {}else{}中else与{的空格归属keyword-spacing对应 eslint 历史 issue #1338、箭头函数(){}与() {}分别搭配always/never均不冲突issue #3769、switch(x) { case 9:{ break; } }中分支冒号后花括号的空格处理issue #15082、静态块(class{ static{} })不与该规则冲突错误消息与修复输出非法用例均断言了messageIdmissingSpace/unexpectedSpace、错误行列位置以及output修复结果例如if(a){}在默认配置下修复为if(a) {}function a() {}在never下修复为function a(){}。何时不使用该规则如果你并不关心代码块前空格的一致性可以关闭此规则。此外由于它仅约束同一行内花括号前的空格对花括号是否换行的风格完全交给 docs/src/rules/brace-style.md 管理若你的团队已全面采用 Prettier 等格式化工具统一排版也可以通过关闭它避免规则重复。补充弃用状态与迁移建议从 lib/rules/space-before-blocks.js 的元数据可见该规则自 ESLint v8.53.0 起被标记为弃用deprecatedSince: 8.53.0计划可用至 v11.0.0原因是 ESLint 核心正在逐步移除格式化类规则。官方推荐的替代方案是迁移到stylistic/eslint-plugin插件其中同样提供名为space-before-blocks的等价规则配置语义保持一致迁移成本很低。对于新项目建议直接在 ESLint Stylistic 生态中启用该规则以继续获得长期维护。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ESLint 规则 space-before-blocks 完全指南：统一代码块前的空格风格
ESLint 规则 space-before-blocks 完全指南统一代码块前的空格风格【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本文围绕 ESLint 核心格式化规则space-before-blocks展开系统讲解其设计动机、always/never/ 对象配置三种选项的完整用法与代码示例、与keyword-spacing等相邻规则的职责边界并结合 lib/rules/space-before-blocks.js 的源码实现与 tests/lib/rules/space-before-blocks.js 的测试用例说明其底层判定逻辑与自动修复机制。读完本文你将能在项目中准确配置该规则并理解它与其他空白类规则如何协作而不冲突。规则简介为什么要在意代码块前的空格一致性是任何风格指南的重要组成部分。左花括号opening brace放在什么位置虽然属于个人偏好但在一个项目里应当保持统一——不一致的风格会分散读者注意力让人难以聚焦代码的关键逻辑。space-before-blocks正是为此而生它强制代码块与前置内容之间的空格保持一致。从规则元数据lib/rules/space-before-blocks.js可以看到该规则属于layout布局类型规则recommended为false不默认开启并且是可自动修复的fixable: whitespace在 ESLint 8.53.0 起被标记为弃用详见文末弃用状态一节。规则工作原理只检查同一行内的块该规则只对没有在新行开头的代码块生效。也就是说如果一个代码块的左花括号与它前面的 token 位于同一行规则才会检查它们之间的空格若左花括号独占一行或位于行首则不在检查范围内。规则明确忽略以下三种场景的空格这些职责分别由其他规则承担与代码块之间的空格由arrow-spacing规则处理见 docs/src/rules/arrow-spacing.md关键字与代码块之间的空格由keyword-spacing规则处理见 docs/src/rules/keyword-spacing.mdswitch分支冒号:与代码块之间的空格由switch-colon-spacing规则处理见 docs/src/rules/switch-colon-spacing.md。规则文档中登记的关联规则还包括 docs/src/rules/block-spacing.md控制花括号内部的空格与 docs/src/rules/brace-style.md控制花括号换行风格它们与space-before-blocks一起构成了完整的花括号风格约束体系。冲突检测的源码实现在源码层面上述忽略场景由isConflicted函数实现lib/rules/space-before-blocks.js当代码块前的第一个 token 满足以下任一条件时规则直接跳过检查是箭头 token利用astUtils.isArrowToken判断其实现为token.value token.type Punctuator见 lib/rules/utils/ast-utils.js是关键字 tokentoken.type Keyword见 lib/rules/utils/ast-utils.js且该块不是函数体是冒号 token且所属父节点是SwitchCase且该冒号正是该 switch 分支的冒号通过getSwitchCaseColonToken获取见 lib/rules/utils/ast-utils.js。选项详解三种配置方式该规则接受一个参数默认值为always配置值含义always默认代码块前必须至少有一个空格never代码块前不得有任何空格对象{ functions, keywords, classes }对函数块、关键字块、类分别配置任一值为off时该类代码块不强制任何风格其中函数块指函数声明 / 函数表达式 / 箭头函数的函数体关键字块指if、for、while、switch、try/catch等由关键字引导的代码块类块指class的ClassBody。示例对象配置如{ functions: never, keywords: always, classes: always }。选项 always默认不正确的代码/*eslint space-before-blocks: error*/ if (a){ b(); } function a(){} for (;;){ b(); } try {} catch(a){} class Foo{ constructor(){} }正确的代码/*eslint space-before-blocks: error*/ if (a) { b(); } if (a) { b(); } else{ /*no error. this is checked by keyword-spacing rule.*/ c(); } class C { static{} /*no error. this is checked by keyword-spacing rule.*/ } function a() {} for (;;) { b(); } try {} catch(a) {}注意上例中的两处细节else{之后紧接花括号的空格由keyword-spacing负责类中的static{}静态块之前的空格同样由keyword-spacing负责因此即使缺少空格也不会触发本规则。选项 never不正确的代码/*eslint space-before-blocks: [error, never]*/ if (a) { b(); } function a() {} for (;;) { b(); } try {} catch(a) {}正确的代码/*eslint space-before-blocks: [error, never]*/ if (a){ b(); } function a(){} for (;;){ b(); } try{} catch(a){} class Foo{ constructor(){} }在never模式下catch(a){}中catch与左花括号之间同样不允许出现空格。对象配置按块类型分别控制对象配置支持对functions、keywords、classes三类代码块独立设定always、never或off。以下为文档给出的全部组合示例。组合一{ functions: never, keywords: always, classes: never }不正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: always, classes: never }]*/ function a() {} try {} catch(a){} class Foo{ constructor() {} }正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: always, classes: never }]*/ for (;;) { // ... } describe(function(){ // ... }); class Foo{ constructor(){} }组合二{ functions: always, keywords: never, classes: never }不正确的代码/*eslint space-before-blocks: [error, { functions: always, keywords: never, classes: never }]*/ function a(){} try {} catch(a) {} class Foo { constructor(){} }正确的代码/*eslint space-before-blocks: [error, { functions: always, keywords: never, classes: never }]*/ if (a){ b(); } var a function() {} class Foo{ constructor() {} }注意var a function() {}中的空格属于函数体前的空格由functions控制因此必须保留if (a){中)与{之间不能有空格由keywords控制类的ClassBody前不能有空格由classes控制。组合三{ functions: never, keywords: never, classes: always }不正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: never, classes: always }]*/ class Foo{ constructor(){} }正确的代码/*eslint space-before-blocks: [error, { functions: never, keywords: never, classes: always }]*/ class Foo { constructor(){} }该组合下只有类名与{之间必须有空格类内的构造函数体函数块前则不允许空格。off 值对某类块不强制若对象配置中某一项为off则该类代码块无论有无前置空格都不会报错。例如{ functions: always, keywords: off, classes: off }只约束函数体前的空格关键字块与类块完全放行。测试用例中为此类组合定义了完整的合法/非法验证集见 tests/lib/rules/space-before-blocks.js覆盖functions/keywords/classes各自always与never配off的全部九种情形。配置示例在 flat config 中启用在 ESLint 的 flat configeslint.config.js中启用该规则export default [ { rules: { space-before-blocks: error, // 等价于 [error, always] space-before-blocks: [error, never], space-before-blocks: [error, { functions: never, keywords: always, classes: always }] } } ];规则的参数校验由schema定义lib/rules/space-before-blocks.js参数必须是always、never两者之一或一个仅含keywords、functions、classes三个可选属性每项取值always、never、off的对象且不允许额外属性additionalProperties: false。传入非法配置会在加载时直接报错。源码级解析判定与自动修复流程规则的核心逻辑位于create函数中lib/rules/space-before-blocks.js整体流程如下解析配置根据context.options[0]初始化六个布尔标志。默认未传参或传always时always*全为true传never时反转为never*全为true传对象时按各属性的值逐一设置lib/rules/space-before-blocks.js。监听三类节点规则注册了对BlockStatement、ClassBody、SwitchStatement三种节点的监听lib/rules/space-before-blocks.js。其中SwitchStatement单独通过checkSpaceBeforeCaseBlock处理——它定位 switch 的{有分支时取第一个分支前的 token无分支时取倒数第二个 token再走统一的检查函数lib/rules/space-before-blocks.js。统一检查checkPrecedingSpacelib/rules/space-before-blocks.js取代码块前一个 token若不存在、已与别的规则冲突isConflicted、或与该块不在同一行astUtils.isTokenOnSameLine则跳过用sourceCode.isSpaceBetween判断两个 token 之间是否存在空格按节点类型分派要求函数体走functions标志ClassBody走classes标志其余关键字块走keywords标志。自动修复缺少空格missingSpace消息 Missing space before opening brace.时在{前插入一个空格fixer.insertTextBefore(node, )多余空格unexpectedSpace消息 Unexpected space before opening brace.时删除前一 token 与{之间的整段文本fixer.removeRange([precedingToken.range[1], node.range[0]])。由于是空白类修复该规则与--fix配合时不会改变语义可安全地纳入自动修复流程。测试用例佐证tests/lib/rules/space-before-blocks.js 共 735 行覆盖了非常全面的场景节点覆盖if/else、函数声明与表达式、for、while、switch含空 switch 与带分支 switch、try/catch、class含constructor与静态块、ES6export default class/export function等边界场景if(a) {}else{}中else与{的空格归属keyword-spacing对应 eslint 历史 issue #1338、箭头函数(){}与() {}分别搭配always/never均不冲突issue #3769、switch(x) { case 9:{ break; } }中分支冒号后花括号的空格处理issue #15082、静态块(class{ static{} })不与该规则冲突错误消息与修复输出非法用例均断言了messageIdmissingSpace/unexpectedSpace、错误行列位置以及output修复结果例如if(a){}在默认配置下修复为if(a) {}function a() {}在never下修复为function a(){}。何时不使用该规则如果你并不关心代码块前空格的一致性可以关闭此规则。此外由于它仅约束同一行内花括号前的空格对花括号是否换行的风格完全交给 docs/src/rules/brace-style.md 管理若你的团队已全面采用 Prettier 等格式化工具统一排版也可以通过关闭它避免规则重复。补充弃用状态与迁移建议从 lib/rules/space-before-blocks.js 的元数据可见该规则自 ESLint v8.53.0 起被标记为弃用deprecatedSince: 8.53.0计划可用至 v11.0.0原因是 ESLint 核心正在逐步移除格式化类规则。官方推荐的替代方案是迁移到stylistic/eslint-plugin插件其中同样提供名为space-before-blocks的等价规则配置语义保持一致迁移成本很低。对于新项目建议直接在 ESLint Stylistic 生态中启用该规则以继续获得长期维护。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
