Skip to content

Latest commit

 

History

History
52 lines (42 loc) · 3.15 KB

README_ZH.md

File metadata and controls

52 lines (42 loc) · 3.15 KB
Raw

这是一个可以自动生成React组件的PropTypes代码的jetbrains插件，目前仅支持ES6、ES7。如果需要支持ES5，请在issue中留言。支持的平台有:IntelliJ IDEA、PhpStorm、WebStorm、PyCharm、RubyMine、AppCode、CLion、Gogland、Rider

如果你想在VS Code或者通过命令行使用这个插件，建议你去使用另一个插件: react-proptypes-generate, 现在并不是很完美，欢迎issue和PR

安装插件

  1. 在插件商店中搜索ReactPropTypes下载安装，这是商店链接，欢迎评论.
  2. 点击 ReactPropTypes.jar(最新版本，但可能不太稳定) 下载插件并且打开Setting/Plugins/Install Plugin from disk 本地安装这个插件

如何使用

  1. 选择组件名称
  2. 按下 command + N (Windows系统是alt + insert) 并且选择PropTypesGenerate, 或者按下shift + command + alt + P (Windows系统是shift + ctrl + alt + P) 在Mac系统中。
  3. 编辑弹框中的表格进行类型的修改稿

类组件

img

函数组件

img

当你选择了Shape作为类型

img

如何构建和开发这个项目

依赖库

  • IntelliJ Platform Plugin SDK (官方插件SDK)
  • JavaScriptLanguage's lib (在macOS中, 路径是 /Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/lib, Windows类似)

构建步骤

  1. 下载最新的IntelliJ IDEA商业版
  2. Git拷贝项目并且用IDEA打开
  3. 删除默认的module，并且通过ReactPropTypes.iml这个文件来导入module
  4. 配置IntelliJ Platform Plugin SDK 和 language level 8
  5. 配置插件的构建目录

示例

img

特性

  1. 如果你没有选择任何文字，插件将自动找到高亮的文字作为选择的组件名称。
  2. 在ES6的标准组件中，插件通过找到以props和nextProps为对象名称的引用和解析赋值来找到属性名。
  3. 在无状态组件中，只有当你的第一个参数命名为props或者是一个解析赋值的参数样式，插件才能识别出来。
  4. 如果你选择了ES6的代码风格，代码将生产在当前文件的最后一行。当然，如果你选择了ES7的代码风格, 代码将在你所选择的组件内部的第一行生成。
  5. 如果自动生成的名字不是你期盼的那样，你可以在表格中双击名字进行修改，当然也可以手动添加一行或者删除你不需要的。
  6. 如果你的组件中含有默认值的props, 插件会读取默认值的类型填充到最终表单之中。
  7. 支持PropTypes.shape 和 defaultProps 生成。
  8. 你可以在偏好设置中自定义你的代码风格。
  9. 支持自动推断代码中的函数和数组类型，可以在设置中打开。
  10. 现在已经支持了所有的类型

未来的计划

  1. 开发VSCode版本的类似插件
  2. 支持生成Flow风格或者TypeScript风格的类型检测，并且不使用PropTypes