ESLint 规则 no-mixed-spaces-and-tabs 详解禁止缩进混用空格与制表符【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本规则用于在 JavaScript 代码中检测并报告**同一行缩进中混用空格与制表符Tab**的问题是 ESLint 核心库中的一条布局类layout规则。绝大多数团队规范都会要求缩进要么统一使用空格、要么统一使用 Tab混用会导致代码在不同编辑器、不同 Tab 宽度设置下显示错位破坏可读性与 diff 整洁度。阅读本文后你将掌握该规则的配置方式、smart-tabs对齐豁免模式的使用场景、其源码级判定原理与边界行为以及它在 ESLint 8.53.0 之后被弃用并迁移到 ESLint Stylistic 的完整脉络。规则背景为什么禁止混用缩进大多数代码规范都会规定代码缩进必须使用空格或制表符中的一种。这是因为Tab 的实际显示宽度由编辑器决定常见为 2、4、8 个空格宽度混用时同一段代码在不同环境下显示效果完全不同混用缩进的行在代码审查Code Review与 git diff 中容易产生看似对齐实则错位的视觉干扰团队协作中混用意味着没有统一的缩进约定代码风格难以自动格式化与校验。因此ESLint 提供了no-mixed-spaces-and-tabs规则如果一行代码的缩进部分同时出现了空格与 Tab就视为错误。规则详情与判定示例该规则会检查每一行源码开头的空白字符序列只要缩进中同时存在空格与 Tab就报告一条mixedSpacesAndTabs错误错误消息为Mixed spaces and tabs.见 lib/rules/no-mixed-spaces-and-tabs.js 中的meta.messages。不正确的代码示例以下代码中return行使用了 Tab 加一个空格混合缩进var y 7行则在 Tab 缩进后又用空格做了额外对齐均属于违规/*eslint no-mixed-spaces-and-tabs: error*/ function add(x, y) { return x y; // Tab 空格 混用 } function main() { var x 5, y 7; // Tab 多个空格 混用 }正确的代码示例只要一行缩进全部由 Tab 组成或全部由空格组成即为合规/*eslint no-mixed-spaces-and-tabs: error*/ function add(x, y) { return x y; // 仅 Tab 缩进 } function main() { var x 5, y 7; // 仅空格缩进 }注意此规则只检查行首缩进不检查行内、代码之后的空白。例如foo \t代码后跟空格和 Tab不会被报告——这一行为在 tests/lib/rules/no-mixed-spaces-and-tabs.js 的有效用例foo \t、foo\t 中得到了明确验证。Options 配置说明该规则接受一个字符串选项schema 定义为枚举值[smart-tabs, true, false]见 lib/rules/no-mixed-spaces-and-tabs.js 中的meta.schema配置值行为默认不传任何行首缩进中同时出现空格与 Tab 都报错smart-tabs允许Tab 缩进 空格对齐即 Tab 之后跟随的空格若仅用于对齐则不报错true历史遗留写法等价于smart-tabs源码中case true与case smart-tabs走同一分支见 lib/rules/no-mixed-spaces-and-tabs.jsfalse显式关闭该选项等价于默认行为smart-tabs 模式smart-tabs允许混用空格与 Tab前提是空格被用于对齐alignment而非缩进。这是源自 Emacs Smart Tabs 方案参见原文档的further_reading指向的 emacswiki.org SmartTabs 概念的一种折中策略缩进用 Tab跨行对齐用空格。启用方式/*eslint no-mixed-spaces-and-tabs: [error, smart-tabs]*/启用后以下代码被认为是正确的——第一行用 Tab 缩进后续行用空格对齐到同一层级/*eslint no-mixed-spaces-and-tabs: [error, smart-tabs]*/ function main() { var x 5, y 7; // Tab 缩进 空格对齐合法 }而空格之后又出现 Tab的序列如\t \tfoo、\t\t\t \tfoo在smart-tabs模式下依然会报错对应测试见 tests/lib/rules/no-mixed-spaces-and-tabs.js 中options: [smart-tabs]的无效用例。源码实现判定正则与报告位置从 lib/rules/no-mixed-spaces-and-tabs.js 的create方法可以看到规则在Program:exit事件中对sourceCode.lines逐行执行正则匹配其核心逻辑如下默认模式的正则^(?( |\t))\1(?:\t| )要求行首至少有一个空格或一组 Tab紧接着出现相反类型的空白字符——即至少一个空格后跟 Tab或至少一个 Tab 后跟空格smart-tabs 模式的正则^(?(\t*))\1(?( ))\2\t只匹配若干 Tab含零个之后出现空格空格之后又出现 Tab的序列从而放行Tab 空格对齐。匹配成功后报告位置定位在首次发生混用的两个字符处column: match[0].length - 2到match[0].length这一列信息与 tests/lib/rules/no-mixed-spaces-and-tabs.js 中各类无效用例断言的行列号如\t return报告在第 1 列到第 3 列完全吻合。边界情况注释、字符串与模板字面量该规则并非对所有文本一律报告实现中内置了两类豁免这是阅读源码时最值得注意的细节多行注释的内部行对每个注释节点将其loc.start.line 1到loc.end.line之间的行加入ignoredCommentLines集合这些注释体内部行不参与混用检测见 lib/rules/no-mixed-spaces-and-tabs.js。因此/*\n\t * Hello\n\t */这类注释排版是合法的。Literal 与 TemplateElement 节点内部规则通过sourceCode.getNodeByRangeIndex()找到混用发生处所在的 AST 节点若该节点类型属于Literal或TemplateElement即混用发生在字符串字面量、模板字符串内容里则不报告见 lib/rules/no-mixed-spaces-and-tabs.js。这与测试中的用例var foo \\t /* comment inside template\t */;、 \n\t ; 等保持一致——模板字符串内部的空白是内容而非缩进不应被误报。测试用例验证lib/rules/no-mixed-spaces-and-tabs.js 的完整测试集位于 tests/lib/rules/no-mixed-spaces-and-tabs.js覆盖了有效用例纯 Tab 缩进\tvar x 5;、纯空格缩进 var x 5;、代码尾部空白foo \t、多行注释排版、模板字符串内部空白以及smart-tabs模式下的\tvar x 5,\n\t y 2;无效用例\t return x y;、 \t/* comment */、\t // comment、 \t;、\t\t\t foo等并逐一断言错误消息 ID、行列号与结束行列号。这些用例精确刻画了规则的行为边界是理解本规则最直接的规格说明书。弃用状态与迁移建议需要特别提醒从源码 lib/rules/no-mixed-spaces-and-tabs.js 的meta.deprecated字段可以看到该规则已在 ESLint v8.53.0 起被标记为弃用availableUntil为11.0.0即从 ESLint 11.0.0 起将从核心包中移除。弃用原因是格式类规则正在从 ESLint 核心迁移出去。弃用期间规则仍可正常使用但不再被推荐用于新项目官方推荐的替代方案是ESLint Stylistic插件中的同名规则no-mixed-spaces-and-tabs来自stylistic/eslint-plugin迁移方式可参考 docs/src/contribute/core-rules.md 所述的规则演进流程及 ESLint 官方格式化规则弃用公告若你仍在维护旧配置可将原配置中的该规则条目平滑迁移到 Stylistic 插件配置语义保持一致。总结no-mixed-spaces-and-tabs是 ESLint 布局类规则中实现简洁、边界处理考究的一条它用两个正则区分默认严格模式与smart-tabs 对齐豁免模式并对多行注释、字符串与模板字面量做了精准豁免。虽然它已随 ESLint 8.53.0 进入弃用流程并被 ESLint Stylistic 承接但其判定思想——缩进必须纯粹、对齐可以例外——至今仍是团队统一缩进风格、避免跨编辑器错位的有效手段。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ESLint 规则 no-mixed-spaces-and-tabs 详解禁止缩进混用空格与制表符【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本规则用于在 JavaScript 代码中检测并报告**同一行缩进中混用空格与制表符Tab**的问题是 ESLint 核心库中的一条布局类layout规则。绝大多数团队规范都会要求缩进要么统一使用空格、要么统一使用 Tab混用会导致代码在不同编辑器、不同 Tab 宽度设置下显示错位破坏可读性与 diff 整洁度。阅读本文后你将掌握该规则的配置方式、smart-tabs对齐豁免模式的使用场景、其源码级判定原理与边界行为以及它在 ESLint 8.53.0 之后被弃用并迁移到 ESLint Stylistic 的完整脉络。规则背景为什么禁止混用缩进大多数代码规范都会规定代码缩进必须使用空格或制表符中的一种。这是因为Tab 的实际显示宽度由编辑器决定常见为 2、4、8 个空格宽度混用时同一段代码在不同环境下显示效果完全不同混用缩进的行在代码审查Code Review与 git diff 中容易产生看似对齐实则错位的视觉干扰团队协作中混用意味着没有统一的缩进约定代码风格难以自动格式化与校验。因此ESLint 提供了no-mixed-spaces-and-tabs规则如果一行代码的缩进部分同时出现了空格与 Tab就视为错误。规则详情与判定示例该规则会检查每一行源码开头的空白字符序列只要缩进中同时存在空格与 Tab就报告一条mixedSpacesAndTabs错误错误消息为Mixed spaces and tabs.见 lib/rules/no-mixed-spaces-and-tabs.js 中的meta.messages。不正确的代码示例以下代码中return行使用了 Tab 加一个空格混合缩进var y 7行则在 Tab 缩进后又用空格做了额外对齐均属于违规/*eslint no-mixed-spaces-and-tabs: error*/ function add(x, y) { return x y; // Tab 空格 混用 } function main() { var x 5, y 7; // Tab 多个空格 混用 }正确的代码示例只要一行缩进全部由 Tab 组成或全部由空格组成即为合规/*eslint no-mixed-spaces-and-tabs: error*/ function add(x, y) { return x y; // 仅 Tab 缩进 } function main() { var x 5, y 7; // 仅空格缩进 }注意此规则只检查行首缩进不检查行内、代码之后的空白。例如foo \t代码后跟空格和 Tab不会被报告——这一行为在 tests/lib/rules/no-mixed-spaces-and-tabs.js 的有效用例foo \t、foo\t 中得到了明确验证。Options 配置说明该规则接受一个字符串选项schema 定义为枚举值[smart-tabs, true, false]见 lib/rules/no-mixed-spaces-and-tabs.js 中的meta.schema配置值行为默认不传任何行首缩进中同时出现空格与 Tab 都报错smart-tabs允许Tab 缩进 空格对齐即 Tab 之后跟随的空格若仅用于对齐则不报错true历史遗留写法等价于smart-tabs源码中case true与case smart-tabs走同一分支见 lib/rules/no-mixed-spaces-and-tabs.jsfalse显式关闭该选项等价于默认行为smart-tabs 模式smart-tabs允许混用空格与 Tab前提是空格被用于对齐alignment而非缩进。这是源自 Emacs Smart Tabs 方案参见原文档的further_reading指向的 emacswiki.org SmartTabs 概念的一种折中策略缩进用 Tab跨行对齐用空格。启用方式/*eslint no-mixed-spaces-and-tabs: [error, smart-tabs]*/启用后以下代码被认为是正确的——第一行用 Tab 缩进后续行用空格对齐到同一层级/*eslint no-mixed-spaces-and-tabs: [error, smart-tabs]*/ function main() { var x 5, y 7; // Tab 缩进 空格对齐合法 }而空格之后又出现 Tab的序列如\t \tfoo、\t\t\t \tfoo在smart-tabs模式下依然会报错对应测试见 tests/lib/rules/no-mixed-spaces-and-tabs.js 中options: [smart-tabs]的无效用例。源码实现判定正则与报告位置从 lib/rules/no-mixed-spaces-and-tabs.js 的create方法可以看到规则在Program:exit事件中对sourceCode.lines逐行执行正则匹配其核心逻辑如下默认模式的正则^(?( |\t))\1(?:\t| )要求行首至少有一个空格或一组 Tab紧接着出现相反类型的空白字符——即至少一个空格后跟 Tab或至少一个 Tab 后跟空格smart-tabs 模式的正则^(?(\t*))\1(?( ))\2\t只匹配若干 Tab含零个之后出现空格空格之后又出现 Tab的序列从而放行Tab 空格对齐。匹配成功后报告位置定位在首次发生混用的两个字符处column: match[0].length - 2到match[0].length这一列信息与 tests/lib/rules/no-mixed-spaces-and-tabs.js 中各类无效用例断言的行列号如\t return报告在第 1 列到第 3 列完全吻合。边界情况注释、字符串与模板字面量该规则并非对所有文本一律报告实现中内置了两类豁免这是阅读源码时最值得注意的细节多行注释的内部行对每个注释节点将其loc.start.line 1到loc.end.line之间的行加入ignoredCommentLines集合这些注释体内部行不参与混用检测见 lib/rules/no-mixed-spaces-and-tabs.js。因此/*\n\t * Hello\n\t */这类注释排版是合法的。Literal 与 TemplateElement 节点内部规则通过sourceCode.getNodeByRangeIndex()找到混用发生处所在的 AST 节点若该节点类型属于Literal或TemplateElement即混用发生在字符串字面量、模板字符串内容里则不报告见 lib/rules/no-mixed-spaces-and-tabs.js。这与测试中的用例var foo \\t /* comment inside template\t */;、 \n\t ; 等保持一致——模板字符串内部的空白是内容而非缩进不应被误报。测试用例验证lib/rules/no-mixed-spaces-and-tabs.js 的完整测试集位于 tests/lib/rules/no-mixed-spaces-and-tabs.js覆盖了有效用例纯 Tab 缩进\tvar x 5;、纯空格缩进 var x 5;、代码尾部空白foo \t、多行注释排版、模板字符串内部空白以及smart-tabs模式下的\tvar x 5,\n\t y 2;无效用例\t return x y;、 \t/* comment */、\t // comment、 \t;、\t\t\t foo等并逐一断言错误消息 ID、行列号与结束行列号。这些用例精确刻画了规则的行为边界是理解本规则最直接的规格说明书。弃用状态与迁移建议需要特别提醒从源码 lib/rules/no-mixed-spaces-and-tabs.js 的meta.deprecated字段可以看到该规则已在 ESLint v8.53.0 起被标记为弃用availableUntil为11.0.0即从 ESLint 11.0.0 起将从核心包中移除。弃用原因是格式类规则正在从 ESLint 核心迁移出去。弃用期间规则仍可正常使用但不再被推荐用于新项目官方推荐的替代方案是ESLint Stylistic插件中的同名规则no-mixed-spaces-and-tabs来自stylistic/eslint-plugin迁移方式可参考 docs/src/contribute/core-rules.md 所述的规则演进流程及 ESLint 官方格式化规则弃用公告若你仍在维护旧配置可将原配置中的该规则条目平滑迁移到 Stylistic 插件配置语义保持一致。总结no-mixed-spaces-and-tabs是 ESLint 布局类规则中实现简洁、边界处理考究的一条它用两个正则区分默认严格模式与smart-tabs 对齐豁免模式并对多行注释、字符串与模板字面量做了精准豁免。虽然它已随 ESLint 8.53.0 进入弃用流程并被 ESLint Stylistic 承接但其判定思想——缩进必须纯粹、对齐可以例外——至今仍是团队统一缩进风格、避免跨编辑器错位的有效手段。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
