{"id":15782346,"url":"https://github.com/dpzxsm/react-proptypes-generate","last_synced_at":"2025-04-30T07:49:49.768Z","repository":{"id":37734961,"uuid":"158326111","full_name":"dpzxsm/react-proptypes-generate","owner":"dpzxsm","description":"A Vscode extension for react PropTypes, Support command line","archived":false,"fork":false,"pushed_at":"2023-01-07T19:10:27.000Z","size":3503,"stargazers_count":26,"open_issues_count":6,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-30T07:49:44.853Z","etag":null,"topics":["ast","command-line","command-line-tool","plugin","proptypes","react","react-native","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dpzxsm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-20T03:32:31.000Z","updated_at":"2024-02-11T14:49:02.000Z","dependencies_parsed_at":"2023-02-07T22:16:56.406Z","dependency_job_id":null,"html_url":"https://github.com/dpzxsm/react-proptypes-generate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dpzxsm%2Freact-proptypes-generate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dpzxsm%2Freact-proptypes-generate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dpzxsm%2Freact-proptypes-generate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dpzxsm%2Freact-proptypes-generate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dpzxsm","download_url":"https://codeload.github.com/dpzxsm/react-proptypes-generate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251666226,"owners_count":21624290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ast","command-line","command-line-tool","plugin","proptypes","react","react-native","vscode","vscode-extension"],"created_at":"2024-10-04T19:06:03.513Z","updated_at":"2025-04-30T07:49:49.745Z","avatar_url":"https://github.com/dpzxsm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-proptypes-generate [![npm version](https://badge.fury.io/js/react-proptypes-generate.svg)](https://badge.fury.io/js/react-proptypes-generate)\n  This is the VS Code's extension that automatically generates PropTypes code for React components, like [ReactPropTypes](https://github.com/dpzxsm/ReactPropTypes-Plugin) in the Jetbrains's Platform.\n  Also a command line tool, you don’t have to be limited to use in vscode. If you want fully automatic PropTypes generation, You can also use with lint-staged in your project.\n\n## Installation\n\nYou have three type to use the plugin, optional installation as required。\n\n### VS Code\nSearch react-proptypes-generate in Marketplace and install it.\n\n### Command Line\nIf you want to use it directly on the command line and not use the VS Code, you can install cli by npm install.\n```\nnpm install react-proptypes-generate -g\n```\n\n### Project with lint-staged\nIf you want to auto generate PropTypes when `git` commit changes, you need to install lint-staged and husky for your project\n```\n    npm install --save-dev react-proptypes-generate lint-staged husky\n    or\n    yarn add react-proptypes-generate lint-staged husky -D\n```\n\n## Usage\n### VS Code\n1. Select your Component's name\n2. Press \u003ckbd\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003e.\u003c/kbd\u003e (Windows is \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003e.\u003c/kbd\u003e) show Code Actions and select PropTypesGenerate, or press \u003ckbd\u003eshift\u003c/kbd\u003e + \u003ckbd\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003ealt\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e (Windows is \u003ckbd\u003eshift\u003c/kbd\u003e + \u003ckbd\u003ectrl\u003c/kbd\u003e + \u003ckbd\u003ealt\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e) in the macOS\n3. Input propType to replace default type\n\n![img](./ScreenShot.gif)\n\n### Command Line\n1. `rpg-cli -h` show Help\n2. `rpg-cli \u003cJsFilePath\u003e \u003cComponentName\u003e` to generate `PropTypes`\n3. `rpg-cli config \u003cJsonFilePath\u003e` to config generated `Settings`\n4. `rpg-cli project \u003cDirPath\u003e` to batch generated `PropTypes` for Project\n5. `rpg-cli fix \u003cfiles...\u003e` to batch generated `PropTypes` for many files\n\nIf you want ian to always use the latest version, you can use npx to instead of `rpg-cli`, like：\n```\nnpx react-proptypes-generate -h\nnpx react-proptypes-generate ./examples/index.jsx Test\nnpx react-proptypes-generate setting.json\nnpx react-proptypes-generate project ./examples/\nnpx react-proptypes-generate fix index.jsx index2.jsx src/index3.js\n```\n\nIf you want to every project have different config, you can create a json file named `rpg.config.json` and put it in root folder.\n`rpg.config.json` examples:\n```json5\n{\n  \"autoImport\": \"ES6\",\n  \"codeStyle\": \"default\",\n  \"noMergeOld\": false,\n  \"mergeOldIfExist\": true,\n  \"noShape\": false,\n  \"tabWidth\": 2,\n  \"quote\": \"double\",\n  \"trailingComma\": false,\n  \"semicolon\": true,\n  \"arrayLike\": true,\n  \"isRequired\": false,\n  \"include\": [\n    \"src/**/*\"  // support glob\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n```\n\n### Project with lint-staged\nedit package.json file\n\n#### Config Git precommit hooks\n```json\n{\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"npm run lint-staged\"\n    }\n  }\n}\n```\n\n#### Config lint-staged, like: \n```json\n{\n    \"lint-staged\": {\n        \"**/*.{js,jsx,ts,tsx}\": [\n          \"rpg-cli fix\"\n        ]\n    }\n}\n```\n\n### TypeScript Need to Know\nBecause of the ast parser is `flow-parser`, so TypeScript sometimes generates strange types.\n####  Already known Case\n+ use `as` in the props's ES6 destruct, will generate redundant error types, like: \n ```javascript\n   let { age = 0 as number, students = [] } = props;\n   // will generated\n   Test.propTypes = {\n      number: PropTypes.any,\n      age: PropTypes.number,\n      students: PropTypes.array\n   }\n ```\n+ Not Support convert Typescript’s type to PropType, like:\n```typescript\n    let age:number = props.age\n    // will generated\n    Test.propTypes = {\n       age: PropTypes.any,\n    }\n```\n\n## Examples case\n```jsx harmony\nimport React from 'react'\nfunction Test(props) {\n  let { school: schoolAlias = \"schoolName\", info = { name: 2 }, year = 33 , onClick } = props;\n  return \u003cdiv onClick={() =\u003e onClick()} /\u003e\n}\n//will generate \nTest.propTypes = {\n  info: PropTypes.shape({\n    name: PropTypes.number\n  }),\n  onClick: PropTypes.func,\n  school: PropTypes.string,\n  year: PropTypes.number\n} \n```\n\n## Special case\nTo prevent the `array` type may be prejudged to `shape` type, you should set a default value.\n```jsx harmony\nimport React from 'react'\nfunction Test(props) {\n  let { students = [] } = props;\n  let length = students.length;\n  return \u003cdiv/\u003e\n}\n//will generate \nTest.propTypes = {\n  students: PropTypes.array\n} \n```\n\n## Keep PropTypes's Comments\nIf you want to keep PropTypes's comments, you must put the comments in the every PropTypes's end, like:\n```javascript\nTest.propTypes = {\n  students: PropTypes.array, // students\n  teacher: PropTypes.shape({\n     name: PropTypes.string, // teacher 's name\n  }) // teacher\n} \n```\n\n## Common settings\n\n* `autoImport`: Auto import or require PropTypes module(disabled|commonJS|ES6)\n* `codeStyle`: PropTypes Generate Style(default|class)\n* `tabWidth`: Number of spaces the pretty-printer should use per tab for indentation (number)\n* `quote`: Override the quotes used in string literals(single|double|auto|null)\n* `trailingComma`: Controls the printing of trailing commas in object literals, array expressions and function parameters(boolean)\n* `semicolon`: If true, there will be a semicolon after PropType statement\n* `noMergeOld`: Defaults is merge old PropTypes, if true, will generate new PropTypes(boolean)\n* `mergeOldIfExist`: If true, old PropTypes different with new PropTypes will be deleted, only used when `noMergeOld` is false(boolean)\n* `noShape`: Defaults is generate shape type, if true, will generate object type(boolean)\n* `arrayLike`: If true, some shape type which is similar to Array will be set array type instead(boolean)\n* `isRequired`: If true, all PropTypes is will be set to isRequired(boolean)\n* `sort`: If true, all PropTypes is sort by name(boolean)\n\n## Extension Special Settings\n\nThis extension contributes the following settings:\n\n* `propTypes.afterFormat`: If true, after generate propTypes, trigger vscode's formatting for PropTypes(boolean)\n\n## Command Line Special Settings\n\nCommand Line can config the following settings:\n* `include`: Match need generated files, only used in `fix` and `project`(array)\n* `exclude`: Match node need generated files, only used in `fix` and `project`(array)\n\n## CHANGELOG\n\n[Look it](./CHANGELOG.md) \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdpzxsm%2Freact-proptypes-generate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdpzxsm%2Freact-proptypes-generate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdpzxsm%2Freact-proptypes-generate/lists"}