general-component-creator README

Step 1.

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

Inside you can put the following for example:

rootFolder: The folder where you want to create your components based on the root of your project. files: An array of files you want to create for each component. You can use $component_name to use the name of the component as a placeholder.

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.

{
  "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 */}",
            "    </div>",
            "  );",
            "}",
            "",
            "export default $Component_Name;"
          ],
          "register": {
            "path": "test/index.js",
            "regitercode": [
              {
                "line": 1,
                "code": "import $Component_Name from './$component-name';"
              },
              {
                "line": "// Components",
                "code": "import $Component_Name yolo './$component_name';"
              }
            ]
          }
        },
        {
          "name": "$component_name.module.scss",
          "body": [".$component_name {", "  display: flex;", "}"]
        }
      ]
    },
    {
      "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

Thats it!