eslint-plugin-unicorn 数字字面量大小写规则快照解析JS / TOML / Vue 场景的自动化修复验证【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn导读本文以eslint-plugin-unicorn中number-literal-case规则的 AVA 快照报告test/snapshots/number-literal-case.js.md为主体结合规则源码rules/number-literal-case.js、官方文档docs/rules/number-literal-case.md与测试用例test/number-literal-case.js完整还原该规则在 JavaScript、TOML、Vue 单文件组件三大语言场景下的检查与自动修复行为。读完本文你将掌握该规则的大小写强制约定、hexadecimalValue选项语义、TOML 与 Vue 模板的遍历机制以及如何读懂快照文件验证规则行为。一、规则背景为什么要统一数字字面量的大小写number-literal-case是eslint-plugin-unicorn提供的一条可自动修复fixable: code的suggestion级规则其核心思想是用大小写把进制标识符与进制数值区分开让代码更易读。规则约定见 docs/rules/number-literal-case.md进制前缀radix identifier一律小写0x、0o、0b适用于Number与BigInt十六进制数值部分默认大写可通过选项改为小写同样适用于Number与BigInt指数记法的e一律小写该规则同时支持 TOML 文件中的十六进制值与指数记法。规则元数据rules/number-literal-case.js声明其仅在js/js与toml/toml两种语言上生效并在recommended、unopinionated配置中默认开启可配合 ESLint 的--fixCLI 选项自动修复。二、快照文档的定位一份行为证据链test/snapshots/number-literal-case.js.md是 AVA 测试框架为 test/number-literal-case.js 中test.snapshot()调用自动生成的快照报告对应的二进制快照保存在number-literal-case.js.snap中。它的价值在于逐条记录了每个 invalid 用例的输入源码、报错信息message、精确的报错位置caret 标记以及修复后的输出output是验证规则修复器行为最直接的事实依据。快照报告包含两大场景组TOML 文件example.toml7 个 invalid 用例与 Vue 单文件组件5 个 invalid 用例。下文逐一解析。三、TOML 场景快照逐条解析TOML 用例统一以example.toml为文件名走toml/toml语言通道。注意快照中报错消息统一为Invalid number literal casing.且所有用例都给出逐字符的报错范围。1. 十六进制大小写统一默认大写# 输入 value 0xaBcDeF # 修复输出 value 0xABCDEF快照invalid(1)显示混合大小写的0xaBcDeF被整体替换为0xABCDEF前缀0x保持小写数值部分统一为大写。invalid(2)进一步覆盖了带数字分隔符的场景0x7fff_ffff_ffff_ffff→0x7FFF_FFFF_FFFF_FFFF分隔符_的位置被完整保留仅调整字母大小写。2. 指数记法统一小写 e快照invalid(3)、invalid(4)、invalid(5)覆盖了指数记法的三种符号形态1E6 → 1e6 -1.2E-3 → -1.2e-3 1.2E3 → 1.2e3可见修复器只把小写化作用于指数标识E数值的符号-/、小数部分与指数部分数值均不受影响。3. 数组与内联表中的多处错误及注释保留invalid(6)是最能体现修复器工程细节的用例# 输入 value [0xff, { number 1E3 }] # Keep comment # 修复输出 value [0xFF, { number 1e3 }] # Keep comment该行同时命中两处错误Error 1/2与Error 2/2数组元素0xff与内联表值1E3分别被修复且行尾注释# Keep comment原样保留。这得益于修复器基于 AST 节点位置做精准的replaceText替换而非整行重写见下文源码解析。4. 自定义选项hexadecimalValue: lowercaseinvalid(7)是唯一带选项的 TOML 用例当配置hexadecimalValue: lowercase时0xAB_CD被修复为0xab_cd。注意此时前缀仍是小写0x只是数值部分改为小写。这也验证了 docs/rules/number-literal-case.md 中的说明0x始终小写不受该选项控制。四、Vue 单文件组件场景快照逐条解析快照第二组用例通过vue-eslint-parser解析 Vue 单文件组件覆盖模板表达式、插值表达式与script块三种位置用例位置输入修复输出invalid(1)v-if指令表达式0XdeEd_Beef0xDEED_BEEFinvalid(2)v-if指令表达式BigInt0XdeEd_Beefn0xDEED_BEEFninvalid(3)插值{{ }}1.2E31.2e3invalid(4)插值{{ }}BigInt 二进制0B1n0b1ninvalid(5)script块0XdeEd_Beefn0xDEED_BEEFn关键细节invalid(2)与invalid(5)展示了 BigInt 的n后缀被正确保留修复逻辑先将去除n的部分规范化再拼回ninvalid(4)的0B1n→0b1n证明二进制前缀同样被强制小写化五处用例覆盖了模板指令、文本插值、脚本三个区域说明规则在 Vue 场景下是全组件范围生效的。结合 test/number-literal-case.js 可见Vue 场景的 valid 用例还包括普通 HTML 属性值input value0XdeEd_Beef中的数字不被当作数值字面量检查以及已符合规范的0xDEED_BEEF不报错——这体现了只检查真正的数值表达式的设计边界。五、源码级原理修复器与遍历机制1. 核心修复函数rules/number-literal-case.js 中的fix函数是整个规则的修复核心const fix (raw, {hexadecimalValue}) { let fixed raw.toLowerCase(); if (fixed.startsWith(0x)) { fixed 0x fixed.slice(2)[hexadecimalValue lowercase ? toLowerCase : toUpperCase](); } return fixed; };实现要点默认路径直接toLowerCase()一步完成前缀0X/0O/0B与指数E的小写化若为十六进制字面量以0x开头则前缀强制小写数值部分根据hexadecimalValue选项决定整体转小写或转大写——这正是快照中0xaBcDeF → 0xABCDEF与0xAB_CD → 0xab_cd两种相反结果的原因BigInt 的处理在create中对0XdeEd_Beefn这类节点先对去掉尾部n的原始文本执行fix再拼回nrules/number-literal-case.js。2. 节点识别与语言扩展create函数监听Literal与TOMLValue两类节点rules/number-literal-case.js其中Literal节点通过 rules/ast/literal.js 中的isNumericLiteraltypeof node.value number与isBigIntLiteralBoolean(node.bigint)区分普通数值与 BigIntTOMLValue节点仅当其kind为integer或float时才参与检查——这正是快照中 TOML 日期时间如1979-05-27T07:32:00Z、字符串值0xff 1E3、特殊值inf/nan不会被误报的原因见 test/number-literal-case.js。3. Vue 模板的双通道遍历规则通过 rules/utils/rule.js 的checkVueTemplate包装器接入vue-eslint-parserif (parserServices?.defineTemplateBodyVisitor) { return visitScriptBlock ? parserServices.defineTemplateBodyVisitor(listeners, listeners) : parserServices.defineTemplateBodyVisitor(listeners); }defineTemplateBodyVisitor(listeners, listeners)将同一套监听器同时注册到模板 body 与script块上因此快照中v-if指令、{{ }}插值和script内的数字字面量均被同一逻辑覆盖而在非 Vue 环境下如纯 JS 或 TOML则直接返回原始监听器。4. 选项 schema 与默认值规则的 JSON schemarules/number-literal-case.js只接受一个可选对象{ hexadecimalValue: uppercase | lowercase }additionalProperties: false拒绝其他未知键defaultOptions中的默认值为uppercaserules/number-literal-case.js与快照中默认修复结果全部为大写十六进制一致。六、配置方式与实战建议1. ESLint 配置在 ESLint 配置中按需开启默认行为十六进制大写{ unicorn/number-literal-case: error, }需要十六进制小写风格时{ unicorn/number-literal-case: [ error, { hexadecimalValue: lowercase, }, ], }开启后即可通过npx eslint --fix自动完成全部修复该规则属于fixable: code无需手工改动。2. 推荐写法速查综合 docs/rules/number-literal-case.md 与快照验证结果团队应统一的风格为// ✅ 前缀小写、十六进制大写、指数 e 小写 const a 0xFF; const b 0b10; const c 0o76; const d 1.2e-3; // ❌ 以下均会被修复 const e 0XFF; const f 0xff; const g 1.2E-3;# ✅ hexadecimal 0xDEAD_BEEF exponent -1.2e33. 如何自行扩展验证若想验证其他边界场景可在仓库中运行快照测试npm test -- test/number-literal-case.jsAVA 会自动生成或对比test/snapshots/number-literal-case.js.snap及其对应的.md报告或在test/number-literal-case.js的tests对象中追加valid/invalid用例。值得留意的既有边界包括传统八进制字面量0777/0888不报错见 test/number-literal-case.js、字符串形式的0Xff不检查、以及负号与数字分离的写法-0XaBcDeF修复后仍保留负号。七、总结通过这份快照报告可以完整勾勒出number-literal-case规则的行为边界统一约定进制前缀小写、十六进制数值默认大写可配置为小写、指数e小写多语言覆盖同一套逻辑在 JS、TOML 与 Vue 单文件组件中一致生效TOML 仅检查 integer/float 值Vue 覆盖模板指令、插值与脚本块修复可靠性基于 AST 节点的精准替换保证数字分隔符、符号位、n后缀与行尾注释均不受破坏修复后可安全配合--fix全量落地。对于追求数值可读性与跨语言风格统一的团队直接在推荐配置中启用该规则并用--fix一键收敛是最低成本的工程化方案。【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考