eslint-plugin-unicorn 规则详解number-literal-case 强制数字字面量大小写规范【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn本篇技术指南聚焦 eslint-plugin-unicorn 中的number-literal-case规则系统讲解该规则如何统一 JS/TS 与 TOML 中数值字面量的进制前缀、十六进制数值与指数记法的大小写写法结合仓库源码与测试用例说明其检测与自动修复原理并完整覆盖hexadecimalValue选项的配置方法。读完本文你将掌握该规则的完整行为边界、可配置项及在 flat config 中的接入方式。规则定位与核心主张number-literal-case是一条“建议suggestion”级别的规则由 规则实现 导出消息 ID 为number-literal-case报告信息为Invalid number literal casing.无效的数字字面量大小写。它要求代码对数字字面量采用统一的大小写风格从而让“进制标识符”与“数值部分”在视觉上形成清晰区分提升可读性进制标识符一律小写0x、0o、0b十六进制、八进制、二进制前缀对Number与BigInt均使用小写十六进制数值可大写或小写十六进制数值部分A-F按选项统一为大写或小写对Number与BigInt均生效指数记法中的e一律小写如2E5应写作2e5。根据 官方规则文档 的自动生成头部信息该规则已默认启用✅于recommended与unopinionated两套预设配置中且支持通过 ESLint 的--fix命令行选项 自动修复。为什么大小写会影响可读性数字字面量由“进制标识符”和“数值”两部分组成例如0xff中0x是十六进制标识符ff是数值。若两者大小写混用如0Xff、0xFf标识符与数值之间的边界会变得模糊反之统一小写标识符、统一数值大小写后读者可以一眼区分“这是哪个进制的数”和“数值本身是什么”。该规则因此通过强制规范大小写来消除这种视觉噪音。各类字面量的检查规则与示例规则对十六进制、二进制、八进制与指数记法分别定义了目标写法以下示例均来自 官方规则文档。十六进制Hexadecimal0x前缀必须小写十六进制数值部分默认大写// ❌ const foo 0XFF; const foo 0xff; const foo 0Xff; // ✅ const foo 0xFF;BigInt 十六进制同样适用n后缀保持原样// ❌ const foo 0Xffn; // ✅ const foo 0xFFn;二进制Binary0b前缀必须小写二进制数值只有 0 和 1无大小写问题// ❌ const foo 0B10; // ✅ const foo 0b10;// ❌ const foo 0B10n; // ✅ const foo 0b10n;八进制Octal0o前缀必须小写八进制数值为 0-7同样无大小写问题// ❌ const foo 0O76; // ✅ const foo 0o76;// ❌ const foo 0O76n; // ✅ const foo 0o76n;指数记法Exponential notation指数标记e一律小写无论指数为正、为负还是为零// ❌ const foo 2E-5; // ✅ const foo 2e-5; // ❌ const foo 2E5; // ✅ const foo 2e5; // ❌ const foo 2E5; // ✅ const foo 2e5;源码级实现原理查看 规则实现可以看到该规则的核心逻辑非常精炼监听节点类型通过context.on([Literal, TOMLValue], ...)同时监听 JavaScript 字面量与 TOML 值节点这使其能同时覆盖两种语言meta.languages声明了js/js与toml/toml。节点判定借助 rules/ast/literal.js 中的辅助函数isNumericLiteralLiteral且typeof node.value number与isBigIntLiteralLiteral且存在node.bigint区分普通数字与 BigIntTOML 侧则通过node.kind integer || node.kind float判定整型与浮点值。BigInt 特判BigInt 字面量带n后缀修复时先去掉末尾的n进行大小写转换再补回nfix(raw.slice(0, -1), options) n。修复逻辑fix函数先将整个原始文本转小写这天然修复了0X/0B/0O/E的大小写问题随后对0x开头的十六进制字面量根据hexadecimalValue选项对数值部分单独执行toUpperCase()或toLowerCase()0x前缀始终保持小写。自动修复当修复后文本与原文不一致时返回带fix的报告对象通过fixer.replaceText(node, fixed)实现--fix下的自动改写。另外规则通过 rules/utils/rule.js 的checkVueTemplate(create)包装创建函数当 parser services 中存在defineTemplateBodyVisitor即使用vue-eslint-parser时会将监听器同时应用于 Vue 模板表达式与script块因此该规则也覆盖 Vue 单文件组件模板中的数值字面量。配置选项hexadecimalValue规则接受一个对象类型的选项schema声明了additionalProperties: false不允许未声明键选项类型默认值说明hexadecimalValueuppercase \| lowercaseuppercase控制十六进制数值部分A-F的大小写。0x前缀始终小写不受该选项控制以维持代码可读性配置示例在 flat config 中针对 JS 文件启用{ unicorn/number-literal-case: [ error, { hexadecimalValue: lowercase, } ] }设置为lowercase后十六进制数值统一小写// ❌ const foo 0XFF; const foo 0xFF; const foo 0XFFn; const foo 0xFFn; // ✅ const foo 0xff; const foo 0xffn;选项的默认值同时在源码的defaultOptions中声明rules/number-literal-case.js且运行时通过options.hexadecimalValue ?? uppercase兜底因此即使不传选项规则也会以uppercase行为工作。额外支持TOML 十六进制与指数记法该规则将大小写规范延伸到了 TOML 文件。TOML 的十六进制整型0x前缀与浮点指数记法同样适用相同的规则# ❌ hexadecimal 0xdead_beef exponent -1.2E3 # ✅ hexadecimal 0xDEAD_BEEF exponent -1.2e3启用方式在 ESLint flat config 中为**/*.toml文件应用对应的语言选项并开启该规则即可详见 readme 中的 preset config 说明。需要注意的是TOML 字符串如0xff 1E3属于字符串而非数值不会被误报。测试用例佐证的行为边界测试文件 对规则行为进行了全面验证以下行为边界值得注意不误报的情况普通十进制1234、符号值NaN/Infinity、指数记法1.2e3/1.2e-3/1.2e3、字符串0Xff不是数字字面量、带数字分隔符的规范写法0xDEED_BEEF、负数-0xABCDEF以及 legacy 八进制字面量0777、0888仅在sourceType: script下合法且不报错。可修复的情况0B10 → 0b10、0O1234567 → 0o1234567、0XaBcDeF → 0xABCDEF、1.2E3 → 1.2e3、5E3 → 5e3、混合大小写带分隔符的0XdeEd_Beefn → 0xDEED_BEEFn、负数-0XaBcn → -0xABCn等均验证了--fix的输出。hexadecimalValue: lowercase场景0XaBcDeFn → 0xabcdefn、0XdeEd_Beefn → 0xdeed_beefn。TOML 与 Vue 模板场景TOML 快照测试覆盖0xaBcDeF、1E6、-1.2E-3、注释保留等Vue 测试使用vue-eslint-parser验证了v-if0XdeEd_Beef 0与模板插值{{1.2E3}}同样会被检测并修复。在项目中启用该规则若你使用该插件的预设配置number-literal-case已在recommended与unopinionated中默认开启无需额外配置见 readme 的 Recommended config 示例。若想单独启用并显式声明选项可在 flat config 中import unicorn from eslint-plugin-unicorn; import {defineConfig} from eslint/config; export default defineConfig([ { files: [**/*.js], plugins: {unicorn}, rules: { unicorn/number-literal-case: [error, {hexadecimalValue: uppercase}], }, }, // TOML 支持需配合 TOML 语言选项 ]);规则声明文件位于 rules/number-literal-case.js并已由 rules/index.js 导出注册。运行npx eslint --fix .即可让该规则自动统一所有数字字面量的大小写写法。小结number-literal-case以极小的规则面解决了数值字面量的可读性问题小写0x/0o/0b标识符与小写e指数标记是强制的十六进制数值大小写则由hexadecimalValue选项统一控制。结合其 JS、BigInt、TOML 与 Vue 模板的多语言覆盖能力以及--fix的自动化修复它是一条低侵入、高收益的代码风格规则非常适合作为代码库数值书写规范的统一手段。【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考