Auto generate react's propTypes
npm install react-proptypes-generate
npm install react-proptypes-generate -g
`
$3
`
npm install --save-dev react-proptypes-generate lint-staged husky
or
yarn add react-proptypes-generate lint-staged husky -D
`
Usage
$3
1. Select your Component's name
2. Press command + . (Windows is Ctrl + .) show Code Actions and select PropTypesGenerate, or press shift + command + alt + P (Windows is shift + ctrl + alt + P) in the macOS
3. Input propType to replace default type
!img
$3
1. rpg-cli -h show Help
2. rpg-cli to generate PropTypes
3. rpg-cli config to config generated Settings
4. rpg-cli project to batch generated PropTypes for Project
5. rpg-cli fix to batch generated PropTypes for many files
If you want ian to always use the latest version, you can use npx to instead of rpg-cli, like:
`
npx react-proptypes-generate -h
npx react-proptypes-generate ./examples/index.jsx Test
npx react-proptypes-generate setting.json
npx react-proptypes-generate project ./examples/
npx react-proptypes-generate fix index.jsx index2.jsx src/index3.js
`
If you want to every project have different config, you can create a json file named rpg.config.json and put it in root folder.
rpg.config.json examples:
`json5
{
"autoImport": "ES6",
"codeStyle": "default",
"noMergeOld": false,
"mergeOldIfExist": true,
"noShape": false,
"tabWidth": 2,
"quote": "double",
"trailingComma": false,
"semicolon": true,
"arrayLike": true,
"isRequired": false,
"include": [
"src/*/" // support glob
],
"exclude": [
"node_modules"
]
}
`
$3
edit package.json file
#### Config Git precommit hooks
`json
{
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
}
}
`
#### Config lint-staged, like:
`json
{
"lint-staged": {
"*/.{js,jsx,ts,tsx}": [
"rpg-cli fix"
]
}
}
`
$3
Because of the ast parser is flow-parser, so TypeScript sometimes generates strange types.
#### Already known Case
+ use as in the props's ES6 destruct, will generate redundant error types, like:
`javascript
let { age = 0 as number, students = [] } = props;
// will generated
Test.propTypes = {
number: PropTypes.any,
age: PropTypes.number,
students: PropTypes.array
}
`
+ Not Support convert Typescript’s type to PropType, like:
`typescript
let age:number = props.age
// will generated
Test.propTypes = {
age: PropTypes.any,
}
`
Examples case
`jsx harmony
import React from 'react'
function Test(props) {
let { school: schoolAlias = "schoolName", info = { name: 2 }, year = 33 , onClick } = props;
return onClick()} />
}
//will generate
Test.propTypes = {
info: PropTypes.shape({
name: PropTypes.number
}),
onClick: PropTypes.func,
school: PropTypes.string,
year: PropTypes.number
}
`
Special case
To prevent the array type may be prejudged to shape type, you should set a default value.
`jsx harmony
import React from 'react'
function Test(props) {
let { students = [] } = props;
let length = students.length;
return
}
//will generate
Test.propTypes = {
students: PropTypes.array
}
`
Keep PropTypes's Comments
If you want to keep PropTypes's comments, you must put the comments in the every PropTypes's end, like:
`javascript
Test.propTypes = {
students: PropTypes.array, // students
teacher: PropTypes.shape({
name: PropTypes.string, // teacher 's name
}) // teacher
}
`
Extension Settings
This extension contributes the following settings:
* propTypes.autoImport: Auto import or require PropTypes module(disabled|commonJS|ES6)
* propTypes.codeStyle: PropTypes Generate Style(default|class)
* propTypes.tabWidth: Number of spaces the pretty-printer should use per tab for indentation (number)
* propTypes.quote: Override the quotes used in string literals(single|double|auto|null)
* propTypes.trailingComma: Controls the printing of trailing commas in object literals, array expressions and function parameters(boolean)
* propTypes.semicolon: If true, there will be a semicolon after PropType statement
* propTypes.afterFormat: If true, after generate propTypes, trigger vscode's formatting for PropTypes(boolean)
* propTypes.noMergeOld: Defaults is merge old PropTypes, if true, will generate new PropTypes(boolean)
* propTypes.mergeOldIfExist: If true, old PropTypes different with new PropTypes will be deleted, only used when noMergeOld is false(boolean)
* propTypes.noShape: Defaults is generate shape type, if true, will generate object type(boolean)
* propTypes.arrayLike: If true, some shape type which is similar to Array will be set array type instead(boolean)
* isRequired: If true, all PropTypes is will be set to isRequired(boolean)
Command Line Settings
Command Line can config the following settings:
* autoImport: Auto import or require PropTypes module(disabled|commonJS|ES6)
* codeStyle: PropTypes Generate Style(default|class)
* tabWidth: Number of spaces the pretty-printer should use per tab for indentation (number)
* quote: Override the quotes used in string literals(single|double|auto|null)
* trailingComma: Controls the printing of trailing commas in object literals, array expressions and function parameters(boolean)
* semicolon: If true, there will be a semicolon after PropType statement
* noMergeOld: Defaults is merge old PropTypes, if true, will generate new PropTypes(boolean)
* mergeOldIfExist: If true, old PropTypes different with new PropTypes will be deleted, only used when noMergeOld is false(boolean)
* noShape: Defaults is generate shape type, if true, will generate object type(boolean)
* arrayLike: If true, some shape type which is similar to Array will be set array type instead(boolean)
* isRequired: If true, all PropTypes is will be set to isRequired(boolean)
* include: Match need generated files, only used in fix and project(array)
* exclude: Match node need generated files, only used in fix and project`(array)
CHANGELOG
Look it