ESLint dot-notation 规则完全指南强制使用点表示法访问对象属性【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintdot-notation是 ESLint 内置的一条 suggestion 类型规则核心目标是维护代码风格一致性、提升可读性鼓励开发者在能够使用点表示法foo.bar的地方不要使用方括号表示法foo[bar]。本指南将以 关联文档 为主体结合当前仓库的 规则源码 与 完整测试用例系统讲解该规则的触发条件、两个可配置选项allowKeywords、allowPattern、自动修复行为以及众多边界情况帮助你在实际项目中正确配置并使用这一规则。为什么优先使用点表示法在 JavaScript 中访问对象属性有两种等价写法点表示法foo.bar和方括号表示法foo[bar]。虽然两者语义相同但点表示法通常更受青睐原因有三更易阅读foo.bar比foo[bar]更简洁直观视觉噪音更少更少冗长省略了引号和方括号代码更紧凑对压缩工具更友好配合激进的 JavaScript 压缩器minimizer时点表示法更利于属性名压缩与混淆。原文档中给出的反例foo[bar];正是规则要拦截的典型写法。Rule Details规则何时发出警告该规则的目标是“在尽可能的情况下”鼓励使用点表示法。当代码中出现不必要的方括号表示法时规则会发出警告。所谓“不必要”是指属性名本身是一个合法的标识符符合 JavaScript 标识符命名规范完全可以直接跟在点号后面。判断的精确条件详见 lib/rules/dot-notation.js 中checkComputedProperty函数为属性名同时满足——匹配合法标识符正则/^[a-zA-Z_$][\w$]*$/u在allowKeywords: false时不是 ES3 保留字在配置了allowPattern时不匹配允许使用方括号记法的模式。错误示例应改为点表示法/*eslint dot-notation: error*/ const x foo[bar]; // 报错bar 是合法标识符应写作 foo.bar正确示例不应报错/*eslint dot-notation: error*/ const x foo.bar; // 已经是点表示法 const y foo[bar]; // 属性名是变量必须用方括号规则不会触发第二行foo[bar]中bar是一个变量而非字符串字面量属性名在运行时才能确定此时方括号表示法是唯一正确的写法因此规则放行。这一点也直接体现在源码中MemberExpression的检查分支要求node.property.type Literal字符串/布尔/null字面量或静态模板字面量无插值的bar才进入checkComputedProperty而变量属性Identifier不在检查范围内lib/rules/dot-notation.js。Options两个可配置选项规则接受单个对象作为选项完整 schema 定义在 lib/rules/dot-notation.js选项类型默认值作用allowKeywordsbooleantrue设为false时遵循 ECMAScript 3 兼容风格对保留字属性禁止使用点表示法allowPatternstring空字符串即不测试任何模式正则表达式字符串匹配该模式的属性名允许继续使用方括号表示法两者的默认值同样固化在defaultOptions中lib/rules/dot-notation.js。allowKeywords默认情况下allowKeywords: true像foo.class、foo.true、foo.null这类使用保留字作属性名的点表示法是允许的因为现代 JavaScript 引擎ES5 及之后已支持在点号后使用保留字。但如果你需要兼容 ES3 风格的代码可以显式关闭/*eslint dot-notation: [error, { allowKeywords: false }]*/ const foo { class: CS 101 } const x foo[class]; // 属性名是保留字必须用方括号表示法上面代码是{ allowKeywords: false }下的正确写法。此时规则会反过来工作对foo.class这类写法报错提示改用方括号。消息为.class is a syntax error.源码中useBrackets消息lib/rules/dot-notation.js并自动修复为foo[class]。测试用例a.true;→a[true];即验证了该行为tests/lib/rules/dot-notation.js。私有字段特例对于类私有标识符private identifier点表示法是强制语法不能使用方括号因此规则不会干预/*eslint dot-notation: [error, { allowKeywords: false }]*/ class C { #in; foo() { this.#in; // 私有标识符必须使用点表示法 } }对应测试见 tests/lib/rules/dot-notation.js。另外this[#a]这类把私有字段名写成字符串的形式同样不会被转换tests/lib/rules/dot-notation.js。allowPattern与 camelcase 规则协同实际开发中向外部 API 发送数据时常常需要携带包含下划线的属性名snake_case 风格。如果项目中同时启用了camelcase规则这些下划线属性会被禁止使用驼峰以外的命名。此时可以给dot-notation配置allowPattern让匹配该正则的属性名继续使用方括号表示法形成互补。以下配置允许属性名匹配^[a-z](_[a-z])$即 snake case 模式时使用方括号/*eslint dot-notation: [error, { allowPattern: ^[a-z](_[a-z])$ }]*/错误示例不匹配模式应使用点表示法const data {}; data[fooBar] 42; // fooBar 是驼峰命名应写作 data.fooBar正确示例匹配模式方括号被放行const data {}; data[foo_bar] 42; // foo_bar 匹配 snake case 模式允许方括号从源码看allowPattern被编译为带u标志的正则lib/rules/dot-notation.js仅当模式非空时才生效当属性名匹配该模式时规则跳过报错。测试还验证了模式外的写法会被正常修复a[_dangle]以下划线开头和a[SHOUT_CASE]全大写都会在配置该模式后仍被改为点表示法tests/lib/rules/dot-notation.js。源码级实现剖析哪些写法会被检查规则仅监听MemberExpression节点lib/rules/dot-notation.js核心检查逻辑可归纳为两类1. 方括号 → 点主方向默认行为当成员表达式满足computed为真且属性是以下字面量之一时进入转换检查字符串字面量如foo[bar]布尔字面量true/false如foo[true]null字面量如foo[null]源码中用literalTypesToCheck集合专门区分null因为typeof null object见 lib/rules/dot-notation.js静态模板字面量无插值如foo[time]会被转换为foo.time判定函数isStaticTemplateLiteral要求expressions.length 0见 lib/rules/utils/ast-utils.js。注意数字下标a[0]、变量a[b]、含插值的模板字符串a[time${range}]都不会触发检查——它们本就无法用点表示法表达测试中均列为validtests/lib/rules/dot-notation.js。2. 点 → 方括号仅allowKeywords: false时当allowKeywords: false且成员表达式为非 computed、属性为标识符且命中了 ES3 保留字列表见 lib/rules/utils/keywords.js 中的keywords数组包含class、while、true、null等 60 余个词时规则反向报错并建议改写为方括号。此时消息为useBrackets。自动修复fix的细节规则声明了fixable: codelib/rules/dot-notation.js可在--fix模式下自动改写代码但修复器内部做了多处谨慎处理括号内有注释时不修复如foo[ /* comment */ bar ]或foo. /* comment */ while仅报告错误避免破坏注释对应测试输出为nulltests/lib/rules/dot-notation.js数字字面量补空格1[toString]会被修复为1 .toString而非1.toString后者会与数字字面量粘连产生语法歧义。源码用astUtils.isDecimalInteger(node.object)判断对象是否为纯十进制整数决定是否插入空格lib/rules/dot-notation.js测试覆盖了5[prop]、-5[prop]、08[prop]、01[prop]、5_000[prop]数值分隔符等多种数字形态tests/lib/rules/dot-notation.js相邻 token 补空格修复后若属性与下一个 token 直接相连且不能相邻如foo[bar]instanceof baz会自动插入空格变成foo.bar instanceof bazlib/rules/dot-notation.js可选链支持obj?.[prop]可修复为obj?.propobj?.true在allowKeywords: false下可修复为obj?.[true]tests/lib/rules/dot-notation.js避免破坏解构语法let.if()在allowKeywords: false下不执行修复因为let[if]()中的let[会被解析为解构变量声明属于语法错误源码注释明确说明这一点lib/rules/dot-notation.js。边界行为速查来自测试套件以下行为全部有 tests/lib/rules/dot-notation.js 中的对应用例佐证可作为理解规则语义的速查表代码默认行为备注a[12]、a[0]不报错属性名不是合法标识符无法用点表示法a[undefined]、a[void 0]、a[b()]不报错非字面量属性只能方括号a[/(?zero0)/]不报错正则字面量属性a[while]默认报错并修复为a.whileallowKeywords: false时放行a[null]、a[null]报错并修复为a.nullnull字面量单独处理foo[(bar)]、(foo)[bar]报错并修复括号包裹不影响修复foo\n .while;allowKeywords: false时报错跨行修复为foo[while]Promise 链catch报错并修复为.catch(fn)保留跨行链式结构值得一提的是 Promise 链示例getResource().then(...)catch会被逐一修复为.catch(...)tests/lib/rules/dot-notation.js这在实际代码中非常常见也是该规则在默认配置下高频命中的场景之一。如何在项目中启用与配置单独启用// eslint.config.jsflat config export default [ { rules: { dot-notation: [error, { allowKeywords: false, allowPattern: ^[a-z](_[a-z])$ }], }, }, ];配合 camelcase 的推荐组合当接口数据字段采用 snake_case、而代码风格要求 camelCase 时可以这样组合使用export default [ { rules: { camelcase: [error, { properties: never }], dot-notation: [error, { allowPattern: ^[a-z](_[a-z])$ }], }, }, ];这样data[foo_bar]被allowPattern放行而data[fooBar]则会被规则要求改写为data.fooBar两条规则分工明确、互不冲突。注意dot-notation并未包含在 ESLint 的recommended配置中meta.docs.recommended为false见 lib/rules/dot-notation.js需要团队自行决定是否开启及如何配置。规则元信息一览最后汇总该规则的元数据lib/rules/dot-notation.js便于在文档与工具链中快速检索规则类型typesuggestion——提供风格层面的改进建议不影响程序正确性是否推荐recommended否需显式开启是否可自动修复fixablecode--fix可安全改写消息模板useDot[{{key}}] is better written in dot notation.与useBrackets.{{key}} is a syntax error.默认选项{ allowKeywords: true, allowPattern: }注册入口lib/rules/index.js 中以懒加载方式导出。总结dot-notation通过“能点就不带括号”的简单策略显著提升了 JavaScript 代码的可读性与压缩友好度。理解它的两个选项便能应对绝大多数场景默认配置适合现代 JavaScript 代码库allowKeywords: false服务于 ES3 兼容风格allowPattern则是在 snake_case 数据与 camelCase 代码风格之间取得平衡的利器。结合其完善的自动修复能力与对注释、数字字面量、可选链、私有字段等边界情况的细腻处理这是一条开箱即用、值得纳入团队规范的风格类规则。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考