WebStorm 2020.3 如何启用React Props的IntelliSense智能补全？

• 开发环境为WebStorm 2020.3，项目基于create-react-app脚手架搭建，样式处理采用react-css-modules方案
• 异常表现：开发过程中为自定义组件编写Props时，无法触发正确的IntelliSense智能补全
• 异常状态说明：输入自定义组件的JSX标签时，补全列表仅显示原生HTML标签属性，不包含组件本身定义的isSelected、label、onClick等自定义Props项
• 涉及的Checkbox组件核心代码：

const CheckboxWrapperInner = ({
  isSelected,
  customStyleName = 'checkbox',
  hex6Color = '#221ecc',
  additionalSelectedStyles = {
    borderColor: hex6Color || '#221ecc',
  },
  additionalUnselectedStyles = {
    backgroundColor: 'transparent',
  },
  label,
  onClick = () => {},
}) => {
  // 组件内部业务逻辑
}

const CheckboxInner = ({...rest}) => {
  return <CheckboxWrapper customStyleName="checkbox" {...rest}></CheckboxWrapper>;
};

const CheckboxWrapper = CSSModules(CheckboxWrapperInner, style, {
  allowMultiple: true,
  handleNotFoundStyleName: 'ignore',
});
export const Checkbox = CSSModules(CheckboxInner, style, {allowMultiple: true});

1. 补充组件Props的静态类型声明
   WebStorm的React Props智能补全能力，完全依赖可被静态扫描识别的Props类型定义。现有代码仅在函数解构参数时设置了默认值，没有对外暴露明确的Props类型结构，是提示缺失的核心原因：
   • 纯JS开发项目：安装prop-types依赖，为每个内层基础组件（CheckboxWrapperInner、CheckboxInner）补充对应的propTypes字段，明确每个Props的类型、是否必填
   • TS开发项目：为每个内层基础组件定义独立的Props接口，在函数组件的入参位置关联对应的泛型类型
2. 解决高阶组件的类型透传兼容问题
   最终导出的Checkbox组件，是经过CSSModules高阶组件包装后的返回值。WebStorm 2020.3 版本内置的react-css-modules类型声明存在兼容缺陷，无法把内层组件的Props类型透传给最终导出的组件，会导致IDE扫描不到对应的Props结构：
   • 对高阶组件包装后的导出组件，做显式的类型标注，将内层组件的Props类型关联到最终导出的组件上
   • 打开WebStorm设置面板，依次进入Settings > Languages & Frameworks > JavaScript > React，确认已开启React Props validation选项；TS项目同时检查TypeScript Language Service的运行状态，确保服务正常启动
3. 清除IDE本地缓存重建索引
   执行菜单栏File > Invalidate Caches...操作，选择清除全部本地缓存后重启WebStorm，让IDE重新扫描项目结构、第三方依赖与对应的类型声明文件，完成索引重建。

内容的提问来源于stack exchange，提问作者Freestyle09