eslint-plugin-unicorn 之 prefer-switch用 switch 替代多重 else-if 的自动修复规则详解【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn本篇技术指南聚焦 eslint-plugin-unicorn包含 300 条 ESLint 规则的插件中的prefer-switch规则。该规则用于检测一连串基于简单相等比较的if/else if分支并建议改用更易读的switch语句且支持通过 ESLint 的--fix自动修复。读完本文你将掌握该规则的触发条件、minimumCases与emptyDefaultCase两个配置项的完整语义、自动修复的具体行为以及其背后基于源码的实现原理可直接在自己的项目中落地配置并读懂修复输出。规则动机为什么推荐 switch当一段代码由多个针对同一变量做简单相等比较的if/else if分支组成时switch语句往往更容易阅读判别式discriminant只出现一次、各分支结构整齐、case标签一目了然。这正是本规则的核心动机原文档在 docs/rules/prefer-switch.md 中开宗明义地指出A switch statement is easier to read than multiple if statements with simple equality comparisons.值得强调的是规则针对的是简单相等比较。源码 rules/prefer-switch.js 中getEqualityComparisons函数明确要求比较表达式必须是BinaryExpression且运算符为任何!、、、等非严格相等比较都会导致该分支链不满足转换条件测试用例 test/prefer-switch.js 也验证了这一点如foo ! 2或foo 2 foo 4均不会触发规则。何时触发官方示例与判定条件❌ 会被报告的多重 else-if当同一判别式出现三个及以上相等比较分支时规则会报告// ❌ if (foo 1) { // 1 } else if (foo 2) { // 2 } else if (foo 3) { // 3 } else { // default }✅ 不触发的情况分支不足、或仅有两个比较时不会触发因为此时switch的收益不大// ✅只有两个相等比较分支未达到默认阈值 3 if (foo 1) { // 1 } else if (foo 2) { // 2 }✅ 期望的修复结果// ✅ switch (foo) { case 1: { // 1 break; } case 2: { // 2 break; } case 3: { // 3 break; } default: { // default } }注意修复后的case均带有break且分支体被花括号包裹BlockStatement这避免了switch特有的“贯穿fall-through”语义改变原有行为是修复器保证语义等价的关键。判定逻辑的源码级剖析从源码结构看rules/prefer-switch.js规则在Program:exit阶段遍历所有IfStatement通过getStatements沿alternate链收集连续的分支判定核心如下仅收集相等比较getEqualityComparisons会递归展开||逻辑表达式foo 2 || foo 3视为一个 case遇到非的二元表达式立即返回空数组并中断整条链rules/prefer-switch.js。所有分支必须共享同一判别式通过getCommonReferences用isSameReference来自 rules/utils/is-same-reference.js判断左右操作数是否为同一引用。例如foo.baz 1与foo[baz] 2会被识别为同一判别式测试见 test/prefer-switch.js而foo()与foo()这类带副作用的函数调用不会被当作同一引用test/prefer-switch.js。常量识别Literal与undefined通过 rules/ast/index.js 中的isUndefined判断被视为常量不会作为判别式候选因此if (foo undefined) {...} else if (bar undefined) {...}这类逐变量判断undefined的代码不会被转换test/prefer-switch.js。变量可出现在左右任意一侧if (1 foo)与if (foo 2)混合也能正确提取foo作为判别式test/prefer-switch.js。此外typeof x function这种按能力检测浏览器 API 的常见模式如document.exitFullscreen的兼容性判断也不会被误报因为各分支比较的“常量”相同但判别式不同测试中专门给出了示例test/prefer-switch.js。配置项minimumCases 与 emptyDefaultCase规则支持一个object类型的 Options 配置schema定义在 rules/prefer-switch.js默认值由defaultOptions给出rules/prefer-switch.js。minimumCases类型integer最小值2默认值3含义达到多少个 case 分支才报告。default即else分支不计数同一个if块内的多个||比较算作一个 case。默认阈值是 3只有当收集到的相等比较分支数ifStatements.length options.minimumCases时才报告rules/prefer-switch.js。/* eslint unicorn/prefer-switch: [error, {minimumCases: 4}] */ // ✅只有 3 个 case不足 4 if (foo 1) {} else if (foo 2) {} else if (foo 3) {} // ✅仍是 3 个 caseelse 不计数 if (foo 1) {} else if (foo 2) {} else if (foo 3) {} else {} // ✅foo 2 || foo 3 合并后共 3 个 case if (foo 1) {} else if (foo 2 || foo 3) {} else if (foo 4) {}/* eslint unicorn/prefer-switch: [error, {minimumCases: 2}] */ // ❌2 个 case 已满足最低阈值 if (foo 1) {} else if (foo 2) {}||合并计数的逻辑对应源码中getEqualityComparisons对LogicalExpression||的展开处理多个比较共享同一if块时修复器会为每个比较分别生成一个case见 rules/prefer-switch.js。emptyDefaultCase类型string默认值no-default-comment含义当原始else-if链没有else分支时转换出的switch该如何处理“空 default”的问题。设置该选项的初衷是为了避免与 ESLint 内置的default-case规则冲突你可以按自己的偏好选择修复风格。三个可选值取值行为no-default-comment默认在最后一个case之后插入// No default注释do-nothing-comment插入default分支并添加// Do nothing注释no-default-case不插入 default 分支也不插入任何注释给定以下待修复代码if (foo 1) {} else if (foo 2) {} else if (foo 3) {}三种配置对应的修复输出/* eslint unicorn/prefer-switch: [error, { emptyDefaultCase: no-default-comment }] */ switch (foo) { case 1: { break; } case 2: { break; } case 3: { break; } // No default }/* eslint unicorn/prefer-switch: [error, { emptyDefaultCase: do-nothing-comment }] */ switch (foo) { case 1: { break; } case 2: { break; } case 3: { break; } default: // Do nothing }/* eslint unicorn/prefer-switch: [error, { emptyDefaultCase: no-default-case }] */ switch (foo) { case 1: { break; } case 2: { break; } case 3: { break; } }这三种分支的处理在源码中对应fix函数对options.emptyDefaultCase的switch分发rules/prefer-switch.js默认值no-default-comment时在首条语句后插入// No default注释do-nothing-comment时插入default:与// Do nothingno-default-case时什么都不插入而如果原代码带有else分支则统一转换为default:前缀rules/prefer-switch.js。自动修复的工程细节prefer-switch是fixable: code的规则rules/prefer-switch.js可在 ESLint CLI 中通过--fix自动修复。修复过程由fix函数实现rules/prefer-switch.js包含几个值得注意的细节判别式去重直接从多个候选引用中取第一个作为switch (…)的判别式文本rules/prefer-switch.js。break智能插入并非每个case都盲目加break。shouldInsertBreakStatement会递归检查分支体内是否以return/throw结尾——如果最后一条语句是return或throw则无需也不应插入breakrules/prefer-switch.js。测试用例 test/prefer-switch.js 覆盖了大量“以 return / throw 结尾时不要插入 break”的场景甚至包括return之后存在的不可达语句、空语句与函数声明等边缘情况。花括号补齐如果某个分支体不是BlockStatement如单表达式语句修复器会为其补上{ … }rules/prefer-switch.js保证case内可以安全插入break。带副作用时不自动修复如果判别式存在副作用通过hasSideEffect判断来自eslint-community/eslint-utils或分支内存在会中断外层循环的breakhasBreakInside配合getBreakTarget检测rules/prefer-switch.js规则仍会报告问题但只提示、不提供 fix避免静默改变程序行为rules/prefer-switch.js。测试中的 “Not fixable” 用例即验证了带break的while循环与switch嵌套场景test/prefer-switch.js。保留缩进修复时通过 rules/utils/get-indent-string.js 获取当前缩进保证嵌套在函数、循环中的if-else链转换后格式依然正确相关缩进测试见 test/prefer-switch.js。在项目中如何启用规则默认启用情况从 rules/prefer-switch.js 可知docs.recommended为unopinionated。结合 index.js 的配置生成逻辑该规则在unicorn/recommended与unicorn/unopinionated两类预设中都会被启用即文档头部标注的 ✅recommended、☑️unopinionated并可在规则表中找到对应条目readme.md。需要单独显式配置时可在 ESLint 配置中写入// eslint.config.jsflat config 风格 export default [ { rules: { unicorn/prefer-switch: [error, { minimumCases: 3, emptyDefaultCase: no-default-comment, }], }, }, ];也可以使用行内注释对单段代码做局部配置例如前文示例中的/* eslint unicorn/prefer-switch: [error, {minimumCases: 2}] */。规则本身通过meta.languages: [js/js]声明仅适用于 JavaScriptrules/prefer-switch.js但测试表明在使用 TypeScript 解析器parsers.typescript时(foo as number) 1、foo! 1等类型断言/非空断言语法的相等比较同样能够被正确识别与修复test/prefer-switch.js。小结prefer-switch是 eslint-plugin-unicorn 中一条“小而精”的可自动修复规则它只在确有多分支简单相等比较时建议switch通过minimumCases控制灵敏度、emptyDefaultCase协调与default-case规则的关系并在修复时细致地处理break、花括号与副作用边界保证转换语义等价。结合本仓库的 规则实现、快照测试 与 规则文档你可以放心地把它加入项目让--fix一键把冗长的else-if链整理成清晰可读的switch。【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
