react-proptypes-generate

This is the VS Code's extension that automatically generates PropTypes code for React components, like ReactPropTypes 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 <JsFilePath> <ComponentName> to generate PropTypes
3. rpg-cli config <JsonFilePath> to config generated Settings
4. rpg-cli project <DirPath> to batch generated PropTypes for Project
5. rpg-cli fix <files...> 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:

{
  "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

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  }
}

Config lint-staged, like:

{
    "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:

  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:

    let age:number = props.age
    // will generated
    Test.propTypes = {
       age: PropTypes.any,
    }

Examples case

import React from 'react'
function Test(props) {
  let { school: schoolAlias = "schoolName", info = { name: 2 }, year = 33 , onClick } = props;
  return <div onClick={() => 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.

import React from 'react'
function Test(props) {
  let { students = [] } = props;
  let length = students.length;
  return <div/>
}
//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:

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