开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载本文围绕 eslint-plugin-react 仓库中的react/forbid-prop-types规则展开讲解它如何拦截PropTypes.any、PropTypes.array、PropTypes.object这类信息量过低、无法精确描述组件接口的类型声明并深入剖析其配置项、底层 AST 实现原理与测试验证。读完本文你将掌握该规则的默认行为、三个核心选项的用法forbid、checkContextTypes、checkChildContextTypes以及如何在 legacy 与 flat 两种 ESLint 配置中落地这一代码规范。规则概述它检查什么react/forbid-prop-types是 eslint-plugin-react 内置的一条「Best Practices」类规则用于禁止在propTypes中使用指定的模糊类型。规则默认是关闭的recommended: false需要你显式在 ESLint 配置中开启这一点可以在 规则源码 的meta.docs元数据中得到印证docs: { description: Disallow certain propTypes, category: Best Practices, recommended: false, url: docsUrl(forbid-prop-types), },规则会对所有 JSX 组件做检查无论组件是用createReactClass、class组件含static propTypes类字段还是函数式组件 外部赋值声明只要在propTypes中使用了被列入禁止清单的类型就会报出Prop type {{target}} is forbidden错误消息定义见 lib/rules/forbid-prop-types.js#L25-L27。默认禁止清单为什么是 any、array、object规则默认禁止三个类型any、array、object源码常量DEFAULTS定义于 lib/rules/forbid-prop-types.js#L19const DEFAULTS [any, array, object];选这三个作为默认值是因为它们都存在含义更明确的替代方案PropTypes.any表示「什么都可以」等价于没有做任何类型约束应替换为任何有实际意义的类型PropTypes.array只说明了「是数组」但没有说明数组元素的类型可用PropTypes.arrayOf(Type)精确描述PropTypes.object只说明了「是对象」但完全没有描述对象的结构可用PropTypes.shape({ ... })定义字段结构。需要强调的是forbid清单完全可以自定义——你可以保留这些默认值也可以改成禁止任何其他 PropTypes 键例如PropTypes.number、PropTypes.instanceOf甚至把整个清单替换成你自己的团队约定。从源码 isForbidden 的实现可以看到只要配置了forbid选项就会整体覆盖默认值而不是追加function isForbidden(type) { const forbid configuration.forbid || DEFAULTS; return forbid.indexOf(type) 0; }触发规则的错误代码示例以下三类写法都会触发默认配置下的报错。第一种是createReactClass风格直接在组件对象中声明propTypesvar Component createReactClass({ propTypes: { a: PropTypes.any, r: PropTypes.array, o: PropTypes.object }, // ... });第二种是类组件声明之后通过类属性赋值的经典写法class Component extends React.Component { // ... } Component.propTypes { a: PropTypes.any, r: PropTypes.array, o: PropTypes.object };第三种是类组件内部使用static propTypes类字段的现代写法class Component extends React.Component { static propTypes { a: PropTypes.any, r: PropTypes.array, o: PropTypes.object } render() { return div /; } }上面三个示例中a、r、o三个属性分别命中any、array、object会在默认配置下各报一次Prop type xxx is forbidden。规则选项与配置规则的配置语法遵循 eslint-plugin-react 的统一格式第一个位置是启用开关第二个位置是选项对象react/forbid-prop-types: [enabled, { forbid: [string], checkContextTypes: boolean, checkChildContextTypes: boolean }]对应的 JSON Schema 定义在 lib/rules/forbid-prop-types.js#L41-L58选项对象的所有属性均可选且允许额外的自定义属性additionalProperties: true。forbid类型字符串数组元素为要禁止的PropTypes键名默认值[any, array, object]行为只要propTypes声明中出现了清单内的类型名即被判定为非法。注意该配置会完全替换默认清单因此如果你只想在默认基础上额外禁止某个类型需要把默认三个也一并写进去。checkContextTypes类型布尔值默认值false行为开启后规则同时检查组件的contextTypes声明contextTypes中出现的禁止类型同样会报错。判定逻辑见 shouldCheckContextTypes它内部调用了propsUtil.isContextTypesDeclaration(node)定义于 lib/util/props.js#L29-L37用于识别名为contextTypes的属性节点。checkChildContextTypes类型布尔值默认值false行为开启后规则同时检查组件的childContextTypes声明配合getChildContext使用的旧版 Context API。对应判定函数 shouldCheckChildContextTypes 依赖propsUtil.isChildContextTypesDeclaration(node)见 lib/util/props.js#L53-L55。一个完整的 legacy 配置示例// .eslintrc.js module.exports { plugins: [react], rules: { react/forbid-prop-types: [2, { forbid: [any, array, object, func], checkContextTypes: true, checkChildContextTypes: true }] } };flat config 配置示例在 ESLint 9 的 flat config 体系中通过plugin.configs拿到规则定义后按同样结构配置// eslint.config.js const reactPlugin require(eslint-plugin-react); module.exports [ { plugins: { react: reactPlugin }, rules: { react/forbid-prop-types: [error, { forbid: [any, array, object], checkContextTypes: true, checkChildContextTypes: false, }], }, }, ];源码级实现规则如何在 AST 上工作为了覆盖真实项目中的各种声明形态规则的create函数在 lib/rules/forbid-prop-types.js#L61-L297 中挂载了六个 AST visitor分别处理不同类型的节点ImportDeclaration识别 PropTypes 的来源。当从prop-types包默认导入如import PropTypes from prop-types或从react包具名导入如import { PropTypes } from react时记录实际的本地变量名若检测到从其他包导入名为PropTypes的标识符则标记为外来包isForeignPropTypesPackage避免误判ClassProperty/PropertyDefinition处理类字段覆盖static propTypes {...}以及 Flow 类型标注的props/context声明MemberExpression处理类外赋值如Component.propTypes {...}、Foo.contextTypes {...}CallExpression处理函数式调用形态如propTypes: forbidExtraProps({...})并专门识别shape(...)调用以递归检查其内部字段MethodDefinition处理 getter 形态如static get propTypes() { return {...} }ObjectExpression兜底处理对象字面量内部嵌套的propTypes/contextTypes/childContextTypes属性。在这些 visitor 之上核心检查逻辑是 checkProperties 和 checkNode它们共同实现了几个值得注意的行为细节1..isRequired会被剥离后再判断。如果值形如PropTypes.any.isRequired规则会先取到.isRequired的左侧对象lib/rules/forbid-prop-types.js#L130-L137因此PropTypes.any.isRequired依然会被any命中。这符合预期——加不加isRequired都无法改变类型本身是模糊类型的事实。2.shape内部嵌套类型会被递归检查。例如PropTypes.shape({ o: PropTypes.object })中内部的object也会被捕获见 CallExpression visitor。测试用例 tests/lib/rules/forbid-prop-types.js#L1792-L1806 专门验证了这一场景arrayOf(object)、objectOf(any)等嵌套组合同样会被检查。3. 具名导入与别名导入都被支持。测试覆盖了import { object, string } from prop-types、import { PropTypes as CustomPropTypes } from react、import CustomPropTypes from prop-types、import CustomReact from react后使用CustomReact.PropTypes.object等多种形态见 tests/lib/rules/forbid-prop-types.js#L1728-L1908。4. prop-wrapper 函数内的声明也能穿透检查。当通过settings.propWrapperFunctions配置了forbidExtraProps之类的包装函数如 airbnb-prop-types 提供的用法checkNode会识别调用并递归检查其参数内部的propTypes对象lib/rules/forbid-prop-types.js#L173-L181对应测试见 tests/lib/rules/forbid-prop-types.js#L927-L973。5. 变量引用会被追踪。如果propTypes被赋值为var object PropTypes.object这样的变量规则会通过variableUtil.findVariableByName找到变量的声明对象并检查其属性lib/rules/forbid-prop-types.js#L168-L172测试用例见 tests/lib/rules/forbid-prop-types.js#L1057-L1071。该规则在插件中的注册入口位于 lib/rules/index.js#L18即forbid-prop-types: require(./forbid-prop-types)。测试验证行为覆盖一览规则的测试文件 tests/lib/rules/forbid-prop-types.js 共 1909 行包含大量 valid不报错与 invalid报错用例值得关注的关键覆盖点包括默认清单命中PropTypes.any、PropTypes.array、PropTypes.object及各自的.isRequired变体均报错tests/lib/rules/forbid-prop-types.js#L718-L868自定义清单覆盖默认值当forbid只配置[any, object]时PropTypes.array不再报错PropTypes.object依然报错tests/lib/rules/forbid-prop-types.js#L68-L93checkContextTypes/checkChildContextTypes覆盖createReactClass、类字段、getter、类外赋值、函数组件赋值等全部声明形态tests/lib/rules/forbid-prop-types.js#L1072-L1727多组件多报错同文件多个组件各命中一个禁止类型时按数量汇总errors: 2、errors: 4。何时不该使用此规则规则文档的「When Not To Use It」部分给出了明确的取舍建议forbid-prop-types本质上是一种格式与文档规范偏好不遵守它并不会直接损害代码质量。它鼓励的是让propTypes更精确地描述自身用途——例如用arrayOf取代array、用shape取代object、用具体类型取代any。如果你所在的团队或现有代码库更看重「类型约束的宽松性」——比如 props 结构高度动态、频繁变化或者你已经在使用 TypeScript / Flow 等静态类型系统承担类型校验职责、propTypes仅作为运行时兜底——那么启用本规则可能带来不必要的摩擦。这种情况下可以选择不开启它或通过自定义forbid清单只保留你认为真正不可接受的一两个类型。与其他规则的分工forbid-prop-types关注的是「类型名是否被禁止」与仓库内其他类型相关规则形成互补读者可结合使用forbid-foreign-prop-types禁止在其他组件上使用非本组件声明的propTypes对象no-unused-prop-types禁止声明了但从未使用的propTypesprop-types强制对缺失propTypes的组件发出警告。小结react/forbid-prop-types是一条简单但实用的「类型卫生」规则默认禁止any、array、object三个模糊类型通过forbid可自定义禁用清单通过checkContextTypes与checkChildContextTypes可将检查范围扩展到旧版 Context API 的声明。其实现上覆盖了类字段、getter、类外赋值、函数组件、变量引用、shape嵌套、isRequired、命名导入、prop-wrapper 等多种真实代码形态并有完备的测试用例佐证。配合精确的arrayOf/shape替换它能让组件的接口文档propTypes真正具备「自解释」的价值。赞分享开发工具代码质量静态分析【免费下载链接】eslint-plugin-reactReact-specific linting rules for ESLint项目地址https://gitcode.com/gh_mirrors/es/eslint-plugin-react点击查看免费下载相关推荐eslint-plugin-react 的 react/forbid-foreign-prop-types 规则禁止跨组件引用 propTypes 的完整指南eslint plugin react 的 react/forbid foreign prop types 规则禁止跨组件引用 propTypes 的完整指南开发工具代码质量静态分析eslint-plugin-react 之 sort-prop-types 规则propTypes 声明字母序排序的完整配置与实现原理eslint plugin react 之 sort prop types 规则propTypes 声明字母序排序的完整配置与实现原理 本篇文章聚焦 esli开发工具代码质量静态分析eslint-plugin-react 的 prefer-exact-props 规则强制精确 propTypes 与 Flow 精确对象类型eslint plugin react 的 prefer exact props 规则强制精确 propTypes 与 Flow 精确对象类型 导读 pref开发工具代码质量静态分析上一篇Repomix 代码压缩--compress实战指南用 Tree-sitter 智能精简代码结构、大幅降低 Token下一篇curl 库 CURLOPT_XOAUTH2_BEARER 详解OAuth 2.0 Bearer Token 认证的完整接入指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考