开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载react/sort-default-props是 eslint-plugin-react 提供的一个样式类Stylistic Issues规则用于强制组件defaultProps中的所有声明按字母顺序排列方便后续快速定位某个默认值声明。本文基于 docs/rules/sort-default-props.md 官方文档结合 lib/rules/sort-default-props.js 源码与 tests/lib/rules/sort-default-props.js 测试用例完整讲解该规则的适用场景、判错逻辑、ignoreCase配置以及底层实现原理。读完本文你将能够准确配置该规则、理解它如何解析createReactClass、类组件与函数组件中的默认值声明并掌握展开属性spread在排序校验中的特殊行为。规则概览与演进背景该规则由 Vladimir Kattsov 编写元信息定义于 lib/rules/sort-default-props.jscategory: Stylistic Issues样式类规则recommended: false不包含在推荐配置中需手动开启fixable注释掉了当前版本不提供自动修复只报告问题通过 lib/rules/index.js 以sort-default-props名称注册值得注意的是它在源码文件头标注了deprecated标记该规则此前名为react/jsx-sort-default-props现已重命名为react/sort-default-props并迁移到当前文件。旧规则 lib/rules/jsx-sort-default-props.js 仍保留兼容其meta中标明deprecated: true、replacedBy: [sort-default-props]且每次运行会在控制台打印一次弃用提示The react/jsx-sort-default-props rule is deprecated. It has been renamed to react/sort-default-props.如果你在旧项目里看到react/jsx-sort-default-props的配置应将其迁移为react/sort-default-props对应的历史文档见 docs/rules/jsx-sort-default-props.md。规则详解检查什么、如何判定该规则会检查项目中的所有组件验证其defaultProps声明是否按字母序排列。它覆盖三类典型写法createReactClass中的getDefaultProps方法返回值类组件class component的静态defaultProps属性static defaultProps {...}或类外赋值Component.defaultProps {...}函数组件function component / 箭头函数组件的Component.defaultProps {...}赋值。规则默认采用大小写敏感的比较方式。排序判定基于属性名key的字典序只要后一个属性名的字符串值小于前一个就会触发报告。错误示例会触发警告以下模式均被视为不合规直接引自官方文档var Component createReactClass({ ... getDefaultProps: function() { return { z: z, a: a, b: b }; }, ... }); class Component extends React.Component { ... } Component.defaultProps { z: z, a: a, b: b }; class Component extends React.Component { static defaultProps { z: z, y: y, a: a } render() { return div /; } } const Component (props) (...); Component.defaultProps { z: z, y: y, a: a }; const defaults { b: b }; const types { a: PropTypes.string, b: PropTypes.string, c: PropTypes.string }; function StatelessComponentWithSpreadInPropTypes({ a, b, c }) { return div{a}{b}{c}/div; } StatelessComponentWithSpreadInPropTypes.propTypes types; StatelessComponentWithSpreadInPropTypes.defaultProps { c: c, a: a, ...defaults, }; export default class ClassWithSpreadInPropTypes extends BaseClass { static propTypes { a: PropTypes.string, b: PropTypes.string, c: PropTypes.string, d: PropTypes.string, e: PropTypes.string, f: PropTypes.string } static defaultProps { b: b, a: a, ...c.defaultProps, f: f, e: e, ...d.defaultProps } }正确示例不会触发警告var Component createReactClass({ ... getDefaultProps: function() { return { a: a, b: b, c: c }; }, ... }); class Component extends React.Component { ... } Component.defaultProps { a: a, b: b, c: c }; class Component extends React.Component { static defaultProps { a: PropTypes.any, b: PropTypes.any, c: PropTypes.any } render() { return div /; } } const Component (props) (...); Component.defaultProps { a: a, y: y, z: z }; const defaults { b: b }; const types { a: PropTypes.string, b: PropTypes.string, c: PropTypes.string }; function StatelessComponentWithSpreadInPropTypes({ a, b, c }) { return div{a}{b}{c}/div; } StatelessComponentWithSpreadInPropTypes.propTypes types; StatelessComponentWithSpreadInPropTypes.defaultProps { a: a, c: c, ...defaults, }; export default class ClassWithSpreadInPropTypes extends BaseClass { static propTypes { a: PropTypes.string, b: PropTypes.string, c: PropTypes.string, d: PropTypes.string, e: PropTypes.string, f: PropTypes.string } static defaultProps { a: a, b: b, ...c.defaultProps, e: e, f: f, ...d.defaultProps } }规则配置与 ignoreCase 选项规则遵循 ESLint 通用配置格式可启用并传入一个选项对象... react/sort-default-props: [enabled, { ignoreCase: boolean, }] ...ignoreCase类型boolean默认值false大小写敏感比较当设为true时规则忽略声明顺序中的大小写差异即比较前会把属性名统一转为小写后再做字典序比较。例如默认配置下Z会排在a之前因为大写字母的字符码更小而开启ignoreCase后Z与z被同等对待此时a, Z这样的顺序才是合法的。测试用例中即有a, A, z, Z在ignoreCase: true下被判定为合法的验证见 tests/lib/rules/sort-default-props.js。该选项的 schema 定义在 lib/rules/sort-default-props.js源码解析逻辑为const configuration context.options[0] || {}; const ignoreCase configuration.ignoreCase || false;注意ignoreCase使用||回退到false因此传入false、0、空字符串等 falsy 值均视为关闭大小写忽略。源码级实现原理规则的核心逻辑集中在 lib/rules/sort-default-props.js 的几个内部函数中理解它们有助于你在边界场景下预判规则行为。1. 声明识别isDefaultPropsDeclaration规则通过getPropertyName提取节点属性名只对defaultProps或getDefaultProps两种名字执行检查lib/rules/sort-default-props.js。对于早期babel-eslint解析器不暴露属性名的ClassProperty节点会退回到通过 token 流取前两个 token 来推断名称lib/rules/sort-default-props.js这是与老解析器兼容的历史处理。2. 排序判定checkSortedcheckSorted使用数组reduce遍历对象属性维护前一个属性与当前属性的比较lib/rules/sort-default-props.jsif (currentPropName prevPropName) { report(context, messages.propsNotSorted, propsNotSorted, { node: curr }); return prev; } return curr;一旦发现current prev就以propsNotSorted消息上报报告信息为Default prop types declarations should be sorted alphabetically。源码中fix相关逻辑被注释掉与meta中fixable: code被注释一致——即该规则不会自动修复代码只会报错。3. 展开属性重置比较基准这是本规则最重要的边界行为遇到展开spread属性时排序校验会被重置。checkSorted中的关键判断是if (/Spread(?:Property|Element)$/.test(curr.type)) { return decls[idx 1]; }即当当前节点是展开属性SpreadProperty或SpreadElement时直接跳过它并把前一个属性重置为展开之后的第一个属性重新开始比较。因此官方文档示例中的{ c, a, ...defaults }会被判为非法c a而{ c: c, ...defaults, a: a }是合法的——因为...defaults重置了基准后续a只与展开后的第一个属性比较且展开点之后没有其他普通属性需要与前段比较。同理static defaultProps { b, a, ...c.defaultProps, f, e, ...d.defaultProps }会报告两处问题b a、f e因为两处展开把声明切分成三段独立的排序区间而{ a, b, ...c.defaultProps, e, f, ...d.defaultProps }则完全合法。对应的errors: 2断言见 tests/lib/rules/sort-default-props.js 中的无效用例。4. 间接引用解析checkNode与findVariableByName规则不仅能直接检查内联的对象字面量还能解析通过变量间接赋值的defaultProps。checkNode对ObjectExpression直接调用checkSorted对Identifier例如First.defaultProps defaultProps则通过findVariableByName在作用域内查找该变量的初始化对象lib/rules/sort-default-props.js底层依赖 lib/util/variable.js 的getVariableFromContext再对其properties排序检查。测试中const defaultProps { z, a }; First.defaultProps defaultProps;被报告为不合规即源于此见 tests/lib/rules/sort-default-props.js。5. 监听节点规则通过两个 AST 监听器触发检查lib/rules/sort-default-props.jsClassProperty, PropertyDefinition处理类字段static defaultProps {...}以及早期 babel 解析器产出的类属性节点MemberExpression处理Component.defaultProps {...}赋值检查时取父节点AssignmentExpression的right侧。与其他排序规则的区分eslint-plugin-react 中还有两个名字相近的排序规则容易混淆规则作用对象说明react/sort-default-propsdefaultProps声明本文主题按字母序检查默认值声明react/sort-prop-typespropTypes声明检查类型声明排序见 lib/rules/sort-prop-types.js支持requiredFirst、callbacksLast、noSortAlphabetically、sortShapeProp、checkTypes等选项且是fixable的react/jsx-sort-propsJSX 上的 props 属性检查Component /标签内属性的书写顺序sort-default-props目前是三者中唯一不带fixable的它只做检测、不做自动修复。react/sort-default-props未出现在 configs/recommended.js 与 configs/all.js 之外的特殊位置——它属于recommended: false的样式偏好规则需要开发者显式开启。何时不应使用本规则这是一个纯粹的格式偏好规则。不遵循它不会对代码质量产生任何负面影响只是牺牲一点按字母序快速定位默认值的便利。如果按字母序排列defaultProps不属于你的团队编码规范完全可以把这条规则关闭不配置即可。另外由于当前版本不支持自动修复若团队希望自动整理而非手动调整可以评估配合编辑器 sort-on-save 等机制或关注上游是否恢复fixable能力。小结启用方式react/sort-default-props: warn或error可搭配{ ignoreCase: true }忽略大小写检查范围getDefaultProps、类静态defaultProps、类/函数组件外部赋值的defaultProps包括通过变量间接引用的情况边界行为展开属性spread会重置排序基准将其视为独立排序区间的分界点规则定位样式类、非推荐、无自动修复适合作为团队风格约定的一部分按需开启关键文件规则源码、规则文档、测试用例、旧版弃用规则文档。赞分享开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载相关推荐ESLint sort-keys 规则详解强制对象属性名按字母序排列的完整配置指南ESLint sort keys 规则详解强制对象属性名按字母序排列的完整配置指南 本文以 ESLint 仓库中的 sort keys 官方文档 https:开发工具Lint静态分析代码质量深入解析 ESLint sort-imports 规则import 声明排序的完整实战指南深入解析 ESLint sort imports 规则import 声明排序的完整实战指南 本篇技术指南以 ESLint 内置规则 sort imports开发工具Lint静态分析代码质量[语言名称]开源项目精选语言名称 开源项目精选 入门级项目 项目名称 一句话描述难度★☆☆☆☆ 适用场景适合初学者的具体应用场景 技术栈标签 Web 数据处理 进阶项目 项目文档上一篇从零到贡献者gdbgui开源项目实战参与指南下一篇Yuedu项目文档贡献指南本地化适应不同语言创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
