general-component-creator README

New in 0.2.2

You can add new placeholders in the body array:

$component_name: lowercase all words

$Component_Name: Uppercase the first letter of every word

$component_Name: Camelcase every word

New in 0.3.2

$component-name: lowercase all words and keep dashes (used form imports if you create a component with a dash in the name) only used in body array files.name remains as is.

You now can have multiple types of different components and register them to a file based on line number or a comment in the file. This will not overwrite lines in the file but add them to the file.

New in 0.3.5

$component name: Replace dash with space good for titles

Fixed typo regitercode is now -> registercode

Step 1.

Create a file called componentconfig.json in the root of your project.

Inside you can put the following for example:

• types: (array) //array of objects containing components
  • name: (string) //Name of component
  • description: (string) //A short description
  • rootFolder: (string) //path to root folder where you want this component created
  • files: (array) //array of objects containing each file you want created in this new folder
    • name: (string) //name of file for dynamic name use $component_name + extension
    • body: (array) /* array of strings containing template code.
      Can contain the following:
      $component_name: lowercase all words
      $Component_Name: Uppercase the first letter of every word
      $component_Name: Camelcase every word
      $component-name: lowercase all words and keep dashes good for imports
      $component name: Replace dash with space good for titles
      */
    • register: (object) //Contains information on how to import/register this file
      • path: (string) //path of file where you want to import/register this file
      • registercode: (array) //array of objects containing code that imports/registers file
        • line: (integer||string) /*Can be a line number on the file or a comment for example // Components where the code will be added one line after the comment */
        • code: (string) //code to be inserted at the line/comment

See example below.

{
  "types": [
    {
      "name": "Functional Component",
      "description": "A functional component",
      "rootFolder": "components",
      "files": [
        {
          "name": "$component_name.js",
          "body": [
            "import React from 'react';",
            "import Styles from './$component-name.module.scss';",
            "",
            "function $Component_Name() {",
            "  return (",
            "    <div className={Styles.$component_name}>",
            "      {/* insert code here $component name */}",
            "    </div>",
            "  );",
            "}",
            "",
            "export default $Component_Name;"
          ],
          "register": {
            "path": "test/index.js",
            "registercode": [
              {
                "line": 1,
                "code": "import $Component_Name from './$component-name';"
              },
              {
                "line": "// Components",
                "code": "import $Component_Name from './$component-name';"
              }
            ]
          }
        },
        {
          "name": "$component_name.module.scss",
          "body": [".$component_name {", "  display: flex;", "}"],
          "register": {
            "path": "test/main.scss",
            "registercode": [
              {
                "line": 1,
                "code": "@import '../$component-name/$component-name.module.scss';"
              }
            ]
          }
        }
      ]
    },
    {
      "name": "Class Component",
      "description": "A class component",
      "rootFolder": "components2",
      "files": [
        {
          "name": "$component_name.js",
          "body": [
            "import React from 'react';",
            "import Styles from './$component_name.module.scss';",
            "",
            "class $component_Name extends React.Component {",
            "  render() {",
            "    <div className={Styles.$component_name}>",
            "      {/* insert code here */}",
            "    </div>",
            "  };",
            "};",
            "",
            "export default $Component_Name;"
          ]
        }
      ]
    }
  ]
}

Step 2. Run the command in vscode (ctrl + shift + p) windows (cmd + shift + p) mac and type "Create component" and press enter.

Step 3. Choose the component type.

Step 4. Enter the name of the component you want to create.

The component will be created in the folder you specified in the componentconfig.json file.

Result:

• components
  • ComponentName
    • ComponentName.js
    • ComponentName.module.scss
• test
  • index.js //imports ComponentName.js
  • main.scss //imports ComponentName.module.scss

Thats it!