ESLint 规则semi-spacing全解分号前后空格的强制与禁止【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintESLint 的semi-spacing规则docs/src/rules/semi-spacing.md专门用于统一分号;前后的空格风格避免var a b ;这类前后缀空格混乱、以及var c d;var e f;这类缺少分隔空格的写法从而提升代码的可读性与一致性。读完本文你将掌握该规则的完整配置参数before/after、默认行为、与semi、comma-spacing等相邻规则的职责划分以及其底层实现原理和可自动修复--fix能力。规则概览JavaScript 语法允许在分号前后放置多余空格例如var a b ; var c d;var e f;第一行的分号前多了一个空格第二行两个语句之间的分号后缺少空格。semi-spacing规则的目标就是在分号两侧强制执行一致的空格风格禁止表达式中的分号前出现空格并按配置约束分号后的空格。从源码 lib/rules/semi-spacing.js 的meta定义可以看出该规则属于layout排版布局类型且声明为fixable: whitespace意味着它产生的全部报告都能被 ESLint 的--fix自动修复。同时该规则未被纳入recommendedrecommended: false需要你在配置中显式开启。注意该规则已在 ESLint v8.53.0 中被标记为已废弃deprecated可用至 v11.0.0。核心团队正在将格式化类规则移出 ESLint 核心交由 ESLint Stylistic 项目stylistic/eslint-plugin中的semi-spacing规则继续维护详见源码中的 deprecated 元数据。如果项目从旧版本迁移这条规则的行为与配置方式保持不变。规则细节与检查范围规则的检查核心逻辑位于checkSemicolonSpacinglib/rules/semi-spacing.js它只对真正是分号的 token通过astUtils.isSemicolonToken判断见 lib/rules/utils/ast-utils.js进行两项判定分号前是否有空格hasLeadingSpace结合配置决定是报告多余空格还是缺失空格分号后是否有空格hasTrailingSpace同样结合配置决定报告方向。具体的报告消息messageId有四种均定义在 lib/rules/semi-spacing.jsmessageId文案触发场景unexpectedWhitespaceBeforeUnexpected whitespace before semicolon.配置禁止分号前空格却出现了空格unexpectedWhitespaceAfterUnexpected whitespace after semicolon.配置禁止分号后空格却出现了空格missingWhitespaceBeforeMissing whitespace before semicolon.配置要求分号前空格却缺失missingWhitespaceAfterMissing whitespace after semicolon.配置要求分号后空格却缺失规则不检查的三种情况原文档明确了该规则不会检查以下三种场景这些边界在源码中都有对应的守卫条件分号是行首第一个 token 时不检查分号后的空格对应源码中的isFirstTokenInCurrentLine判断lib/rules/semi-spacing.js。例如下一行的;foo();这种用于防御 ASI 问题的写法不会被干涉。分号紧跟左括号(或{时不检查分号前的空格分号紧跟右括号)或}时不检查分号后的空格。这部分间距分别由space-in-parens和block-spacing负责对应源码中的isBeforeClosingParen判断lib/rules/semi-spacing.js。例如if (true) {;}中的分号紧贴{与}semi-spacing会主动让位。空条件的 for 循环for(;;)中的分号间距不检查。测试用例for (;;) {}在默认配置下是合法的tests/lib/rules/semi-spacing.js。检查覆盖的语句类型从规则底部的return对象lib/rules/semi-spacing.js可以看出checkNode会检查所有最后一个 token 是分号的语句包括VariableDeclaration变量声明ExpressionStatement表达式语句BreakStatement/ContinueStatementbreak/continueDebuggerStatementdebuggerDoWhileStatementdo...whileReturnStatementreturnThrowStatementthrowImportDeclaration/ExportNamedDeclaration/ExportAllDeclaration/ExportDefaultDeclarationES Module 导入导出PropertyDefinition类字段ES2022见测试 tests/lib/rules/semi-spacing.js此外ForStatement有专门的处理器只检查for头部init与test之后、非末尾处的分号lib/rules/semi-spacing.js。配置选项规则接受一个对象参数包含两个布尔键选项键类型默认值含义beforebooleanfalse为true时强制分号前有空格为false时禁止分号前空格afterbooleantrue为true时强制分号后有空格为false时禁止分号后空格其中after选项只在分号不在行末时生效即分号后面同一行还有别的 token。默认配置为{before: false, after: true}即分号前禁空格、分号后要空格。在配置文件中开启该规则的完整写法{ rules: { semi-spacing: [error, { before: false, after: true }] } }如果省略选项对象等价于使用默认值{ before: false, after: true }源码中create函数的初始化逻辑正是如此lib/rules/semi-spacing.js。同时schema 定义 声明了additionalProperties: false即不接受任何未知键传入{ before: false, after: true, foo: 1 }这类配置会直接触发配置校验错误。默认选项{before: false, after: true}这是默认选项也是最贴近社区主流风格配合semi规则的语句末必须加分号的组合禁止分号前空格强制分号后空格。不正确的代码示例/*eslint semi-spacing: error*/ var foo ; var foo;var bar; throw new Error(error) ; while (a) { break ; } for (i 0 ; i 10 ; i) {} for (i 0;i 10;i) {}这些例子分别触发了分号前多余空格var foo ;、throw ... ;、break ;、for 头部和分号后缺失空格var foo;var bar;、for (i 0;i 10;i) {}。正确的代码示例/*eslint semi-spacing: error*/ var foo; var foo; var bar; throw new Error(error); while (a) { break; } for (i 0; i 10; i) {} for (;;) {} if (true) {;} ;foo();注意后三行属于前面提到的豁免场景for(;;)空条件不检查{;}中的分号紧贴括号由block-spacing负责行首的;foo();属于 ASI 防御写法分号后不强制空格。反向选项{before: true, after: false}该选项要求分号前必须有空格分号后禁止空格。这是一种比较少见的风格通常与语句不以分号收尾或semi: [error, never]搭配使用分号仅用于分割同一行的语句。不正确的代码示例/*eslint semi-spacing: [error, { before: true, after: false }]*/ var foo; var foo ; var bar; throw new Error(error); while (a) { break; } for (i 0;i 10;i) {} for (i 0; i 10; i) {}正确的代码示例/*eslint semi-spacing: [error, { before: true, after: false }]*/ var foo ; var foo ;var bar ; throw new Error(error) ; while (a) {break ;} for (i 0 ;i 10 ;i) {}对比两组例子可以直观看出before: true时var foo;变成错误、var foo ;才是正确after: false时var foo ; var bar;中的分号后空格成为错误正确的写法是var foo ;var bar ;。自动修复与源码实现原理由于规则声明了fixable: whitespace所有报告都可以通过--fix自动修复。修复逻辑直接内嵌在checkSemicolonSpacing的fix回调中lib/rules/semi-spacing.js移除分号前的多余空格fixer.removeRange([tokenBefore.range[1], token.range[0]])在分号前插入一个空格fixer.insertTextBefore(token, )移除分号后的多余空格fixer.removeRange([token.range[1], tokenAfter.range[0]])在分号后插入一个空格fixer.insertTextAfter(token, )。报告位置也有讲究分号前的问题报告区间覆盖分号前一个 token 的结尾到分号开头的空白区域分号后的问题同理lib/rules/semi-spacing.js。测试文件 tests/lib/rules/semi-spacing.js 中的大量用例同时验证了code原始代码与output修复后代码例如var a b ;→var a b;移除分号前两个空格var a b;c d;→var a b; c d;补上分号后缺失的空格for(a ; ; );→for(a;; );before: false, after: false组合下同时移除两个空格do {} while (true); foo→do {} while (true) ;foobefore: true, after: false下先补后删。这些测试还覆盖了字符串内的分号不被误判var a b ; c;合法、跨行变量声明、IIFE、正则字面量后分号、debugger、类字段等边界场景tests/lib/rules/semi-spacing.js。与相邻规则的职责划分semi-spacing只是分号处理体系中的一环原文档 frontmatter 声明的相关规则related_rules明确了各自的边界规则职责与 semi-spacing 的关系semi决定是否必须/禁止写分号搭配使用semi: [error, always]保证分号存在semi-spacing保证分号两侧空格no-extra-semi移除多余的分号分号本体重复/多余的问题归它管semi-spacing只关注空格。测试中foo; ;;;;;;;;;之所以合法正是因为多余分号由no-extra-semi清理comma-spacing控制逗号前后空格对标分号场景语义几乎一致block-spacing控制代码块花括号{ }内部空格负责{;}这类紧贴花括号的分号两侧空格space-in-parens控制圆括号( )内部空格负责(;;)这类紧贴圆括号的分号两侧空格用一句话概括semi-spacing只管分号两侧的空格凡是分号紧贴括号或处于行首/行末的边界情形都由上述相邻规则接管。历史沿革合并自no-space-before-semi从 conf/rule-type-list.json 的移除规则清单可以看到旧版规则no-space-before-semi禁止分号前空格已被移除其功能合并进semi-spacing{ removed: no-space-before-semi, replacedBy: [{ rule: { name: semi-spacing } }] }因此在配置中看到遗留的no-space-before-semi时应当迁移为semi-spacing的before: false配置。何时关闭该规则如果你不关心分号前后空格的一致性——例如团队已经统一使用格式化工具Prettier 等管理空白、或刻意使用无分号风格且不在意行内分割——可以直接关闭该规则。另外需要重申由于该规则已被标记为废弃见 lib/rules/semi-spacing.js新项目更建议直接使用 ESLint Stylistic 的semi-spacing规则其选项与行为完全一致迁移成本为零。参考资源规则文档docs/src/rules/semi-spacing.md规则实现lib/rules/semi-spacing.js单元测试含全部自动修复用例tests/lib/rules/semi-spacing.js相关规则文档docs/src/rules/semi.md、docs/src/rules/no-extra-semi.md、docs/src/rules/comma-spacing.md、docs/src/rules/block-spacing.md、docs/src/rules/space-in-parens.md移除规则对照表conf/rule-type-list.json【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ESLint 规则semi-spacing全解分号前后空格的强制与禁止【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintESLint 的semi-spacing规则docs/src/rules/semi-spacing.md专门用于统一分号;前后的空格风格避免var a b ;这类前后缀空格混乱、以及var c d;var e f;这类缺少分隔空格的写法从而提升代码的可读性与一致性。读完本文你将掌握该规则的完整配置参数before/after、默认行为、与semi、comma-spacing等相邻规则的职责划分以及其底层实现原理和可自动修复--fix能力。规则概览JavaScript 语法允许在分号前后放置多余空格例如var a b ; var c d;var e f;第一行的分号前多了一个空格第二行两个语句之间的分号后缺少空格。semi-spacing规则的目标就是在分号两侧强制执行一致的空格风格禁止表达式中的分号前出现空格并按配置约束分号后的空格。从源码 lib/rules/semi-spacing.js 的meta定义可以看出该规则属于layout排版布局类型且声明为fixable: whitespace意味着它产生的全部报告都能被 ESLint 的--fix自动修复。同时该规则未被纳入recommendedrecommended: false需要你在配置中显式开启。注意该规则已在 ESLint v8.53.0 中被标记为已废弃deprecated可用至 v11.0.0。核心团队正在将格式化类规则移出 ESLint 核心交由 ESLint Stylistic 项目stylistic/eslint-plugin中的semi-spacing规则继续维护详见源码中的 deprecated 元数据。如果项目从旧版本迁移这条规则的行为与配置方式保持不变。规则细节与检查范围规则的检查核心逻辑位于checkSemicolonSpacinglib/rules/semi-spacing.js它只对真正是分号的 token通过astUtils.isSemicolonToken判断见 lib/rules/utils/ast-utils.js进行两项判定分号前是否有空格hasLeadingSpace结合配置决定是报告多余空格还是缺失空格分号后是否有空格hasTrailingSpace同样结合配置决定报告方向。具体的报告消息messageId有四种均定义在 lib/rules/semi-spacing.jsmessageId文案触发场景unexpectedWhitespaceBeforeUnexpected whitespace before semicolon.配置禁止分号前空格却出现了空格unexpectedWhitespaceAfterUnexpected whitespace after semicolon.配置禁止分号后空格却出现了空格missingWhitespaceBeforeMissing whitespace before semicolon.配置要求分号前空格却缺失missingWhitespaceAfterMissing whitespace after semicolon.配置要求分号后空格却缺失规则不检查的三种情况原文档明确了该规则不会检查以下三种场景这些边界在源码中都有对应的守卫条件分号是行首第一个 token 时不检查分号后的空格对应源码中的isFirstTokenInCurrentLine判断lib/rules/semi-spacing.js。例如下一行的;foo();这种用于防御 ASI 问题的写法不会被干涉。分号紧跟左括号(或{时不检查分号前的空格分号紧跟右括号)或}时不检查分号后的空格。这部分间距分别由space-in-parens和block-spacing负责对应源码中的isBeforeClosingParen判断lib/rules/semi-spacing.js。例如if (true) {;}中的分号紧贴{与}semi-spacing会主动让位。空条件的 for 循环for(;;)中的分号间距不检查。测试用例for (;;) {}在默认配置下是合法的tests/lib/rules/semi-spacing.js。检查覆盖的语句类型从规则底部的return对象lib/rules/semi-spacing.js可以看出checkNode会检查所有最后一个 token 是分号的语句包括VariableDeclaration变量声明ExpressionStatement表达式语句BreakStatement/ContinueStatementbreak/continueDebuggerStatementdebuggerDoWhileStatementdo...whileReturnStatementreturnThrowStatementthrowImportDeclaration/ExportNamedDeclaration/ExportAllDeclaration/ExportDefaultDeclarationES Module 导入导出PropertyDefinition类字段ES2022见测试 tests/lib/rules/semi-spacing.js此外ForStatement有专门的处理器只检查for头部init与test之后、非末尾处的分号lib/rules/semi-spacing.js。配置选项规则接受一个对象参数包含两个布尔键选项键类型默认值含义beforebooleanfalse为true时强制分号前有空格为false时禁止分号前空格afterbooleantrue为true时强制分号后有空格为false时禁止分号后空格其中after选项只在分号不在行末时生效即分号后面同一行还有别的 token。默认配置为{before: false, after: true}即分号前禁空格、分号后要空格。在配置文件中开启该规则的完整写法{ rules: { semi-spacing: [error, { before: false, after: true }] } }如果省略选项对象等价于使用默认值{ before: false, after: true }源码中create函数的初始化逻辑正是如此lib/rules/semi-spacing.js。同时schema 定义 声明了additionalProperties: false即不接受任何未知键传入{ before: false, after: true, foo: 1 }这类配置会直接触发配置校验错误。默认选项{before: false, after: true}这是默认选项也是最贴近社区主流风格配合semi规则的语句末必须加分号的组合禁止分号前空格强制分号后空格。不正确的代码示例/*eslint semi-spacing: error*/ var foo ; var foo;var bar; throw new Error(error) ; while (a) { break ; } for (i 0 ; i 10 ; i) {} for (i 0;i 10;i) {}这些例子分别触发了分号前多余空格var foo ;、throw ... ;、break ;、for 头部和分号后缺失空格var foo;var bar;、for (i 0;i 10;i) {}。正确的代码示例/*eslint semi-spacing: error*/ var foo; var foo; var bar; throw new Error(error); while (a) { break; } for (i 0; i 10; i) {} for (;;) {} if (true) {;} ;foo();注意后三行属于前面提到的豁免场景for(;;)空条件不检查{;}中的分号紧贴括号由block-spacing负责行首的;foo();属于 ASI 防御写法分号后不强制空格。反向选项{before: true, after: false}该选项要求分号前必须有空格分号后禁止空格。这是一种比较少见的风格通常与语句不以分号收尾或semi: [error, never]搭配使用分号仅用于分割同一行的语句。不正确的代码示例/*eslint semi-spacing: [error, { before: true, after: false }]*/ var foo; var foo ; var bar; throw new Error(error); while (a) { break; } for (i 0;i 10;i) {} for (i 0; i 10; i) {}正确的代码示例/*eslint semi-spacing: [error, { before: true, after: false }]*/ var foo ; var foo ;var bar ; throw new Error(error) ; while (a) {break ;} for (i 0 ;i 10 ;i) {}对比两组例子可以直观看出before: true时var foo;变成错误、var foo ;才是正确after: false时var foo ; var bar;中的分号后空格成为错误正确的写法是var foo ;var bar ;。自动修复与源码实现原理由于规则声明了fixable: whitespace所有报告都可以通过--fix自动修复。修复逻辑直接内嵌在checkSemicolonSpacing的fix回调中lib/rules/semi-spacing.js移除分号前的多余空格fixer.removeRange([tokenBefore.range[1], token.range[0]])在分号前插入一个空格fixer.insertTextBefore(token, )移除分号后的多余空格fixer.removeRange([token.range[1], tokenAfter.range[0]])在分号后插入一个空格fixer.insertTextAfter(token, )。报告位置也有讲究分号前的问题报告区间覆盖分号前一个 token 的结尾到分号开头的空白区域分号后的问题同理lib/rules/semi-spacing.js。测试文件 tests/lib/rules/semi-spacing.js 中的大量用例同时验证了code原始代码与output修复后代码例如var a b ;→var a b;移除分号前两个空格var a b;c d;→var a b; c d;补上分号后缺失的空格for(a ; ; );→for(a;; );before: false, after: false组合下同时移除两个空格do {} while (true); foo→do {} while (true) ;foobefore: true, after: false下先补后删。这些测试还覆盖了字符串内的分号不被误判var a b ; c;合法、跨行变量声明、IIFE、正则字面量后分号、debugger、类字段等边界场景tests/lib/rules/semi-spacing.js。与相邻规则的职责划分semi-spacing只是分号处理体系中的一环原文档 frontmatter 声明的相关规则related_rules明确了各自的边界规则职责与 semi-spacing 的关系semi决定是否必须/禁止写分号搭配使用semi: [error, always]保证分号存在semi-spacing保证分号两侧空格no-extra-semi移除多余的分号分号本体重复/多余的问题归它管semi-spacing只关注空格。测试中foo; ;;;;;;;;;之所以合法正是因为多余分号由no-extra-semi清理comma-spacing控制逗号前后空格对标分号场景语义几乎一致block-spacing控制代码块花括号{ }内部空格负责{;}这类紧贴花括号的分号两侧空格space-in-parens控制圆括号( )内部空格负责(;;)这类紧贴圆括号的分号两侧空格用一句话概括semi-spacing只管分号两侧的空格凡是分号紧贴括号或处于行首/行末的边界情形都由上述相邻规则接管。历史沿革合并自no-space-before-semi从 conf/rule-type-list.json 的移除规则清单可以看到旧版规则no-space-before-semi禁止分号前空格已被移除其功能合并进semi-spacing{ removed: no-space-before-semi, replacedBy: [{ rule: { name: semi-spacing } }] }因此在配置中看到遗留的no-space-before-semi时应当迁移为semi-spacing的before: false配置。何时关闭该规则如果你不关心分号前后空格的一致性——例如团队已经统一使用格式化工具Prettier 等管理空白、或刻意使用无分号风格且不在意行内分割——可以直接关闭该规则。另外需要重申由于该规则已被标记为废弃见 lib/rules/semi-spacing.js新项目更建议直接使用 ESLint Stylistic 的semi-spacing规则其选项与行为完全一致迁移成本为零。参考资源规则文档docs/src/rules/semi-spacing.md规则实现lib/rules/semi-spacing.js单元测试含全部自动修复用例tests/lib/rules/semi-spacing.js相关规则文档docs/src/rules/semi.md、docs/src/rules/no-extra-semi.md、docs/src/rules/comma-spacing.md、docs/src/rules/block-spacing.md、docs/src/rules/space-in-parens.md移除规则对照表conf/rule-type-list.json【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
