Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>General Component CreatorNew to Visual Studio Code? Get it now.
General Component Creator

General Component Creator

Dan Mello

|
4 installs
| (0) | Free
Make templates for components so you can easily create new ones without having to rewrite the same code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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.

{
  "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;"
      ]
    },
    {
      "name": "$component_name.module.scss",
      "body": [".$component_name {", "  display: flex;", "}"]
    }
  ]
}

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

Step 3. 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!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft