Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dpzxsm/react-proptypes-generate
A Vscode extension for react PropTypes, Support command line
https://github.com/dpzxsm/react-proptypes-generate
ast command-line command-line-tool plugin proptypes react react-native vscode vscode-extension
Last synced: 3 months ago
JSON representation
A Vscode extension for react PropTypes, Support command line
- Host: GitHub
- URL: https://github.com/dpzxsm/react-proptypes-generate
- Owner: dpzxsm
- License: mit
- Created: 2018-11-20T03:32:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:10:27.000Z (about 2 years ago)
- Last Synced: 2024-04-29T20:20:21.328Z (9 months ago)
- Topics: ast, command-line, command-line-tool, plugin, proptypes, react, react-native, vscode, vscode-extension
- Language: JavaScript
- Size: 3.34 MB
- Stars: 26
- Watchers: 0
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-proptypes-generate [](https://badge.fury.io/js/react-proptypes-generate)
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.
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.
## Installation
You have three type to use the plugin, optional installation as required。
### VS Code
Search react-proptypes-generate in Marketplace and install it.
### Command Line
If you want to use it directly on the command line and not use the VS Code, you can install cli by npm install.
```
npm install react-proptypes-generate -g
```
### Project with lint-staged
If you want to auto generate PropTypes when `git` commit changes, you need to install lint-staged and husky for your project
```
npm install --save-dev react-proptypes-generate lint-staged husky
or
yarn add react-proptypes-generate lint-staged husky -D
```
## Usage
### VS Code
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
### Command Line
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"
]
}
```
### Project with lint-staged
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"
]
}
}
```
### TypeScript Need to Know
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
}
```
## Common 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)
* `sort`: If true, all PropTypes is sort by name(boolean)
## Extension Special Settings
This extension contributes the following settings:
* `propTypes.afterFormat`: If true, after generate propTypes, trigger vscode's formatting for PropTypes(boolean)
## Command Line Special Settings
Command Line can config the following settings:
* `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](./CHANGELOG.md)