Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>ComponentGeneratorNew to Visual Studio Code? Get it now.
ComponentGenerator

ComponentGenerator

baoloc008

|
1 install
| (0) | Free
ComponentGenerator
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Component Generator

A simple yet powerful Visual Studio Code extension to quickly scaffold React components with customizable templates.

✨ Features

  • ✅ Right-click in the Explorer to generate a new component.
  • ✅ Input a name like Button or a nested path like components/Button.
  • ✅ Automatically creates the directory structure and files.
  • ✅ Supports customizable file templates via .vscode/settings.json.
  • ✅ If no folder is selected, components are created in the workspace root.

📦 Generated Files

By default, when you generate a component named Button, the following files are created:

components/
└── Button/
    ├── Button.tsx
    ├── Button.module.scss
    └── index.ts

All contents are customizable.

⚙️ Custom Templates

You can override the default templates in your workspace settings.

Example:

// .vscode/settings.json
{
  "new-component-generator.templates": {
    "{{ComponentName}}.tsx": "import React from \"react\";\n\ntype {{ComponentName}}Props = {};\n\nfunction {{ComponentName}}({}: {{ComponentName}}Props) {\n  return (\n    <div className=\"\">\n      {{ComponentName}}\n    </div>\n  );\n}\n\nexport default {{ComponentName}};\n",
    "index.ts": "export { default } from \"./{{ComponentName}}\";\n"
  }
}
  • Use {{ComponentName}} as a placeholder in your templates.
  • You can define any filenames and contents.

🚀 How to Use

  • Open a folder in VS Code.
  • Right-click on a folder in the Explorer and choose Generate Component.
  • Enter a component name like MyComponent or shared/Card.
  • The component will be generated with the specified templates.
  • If you trigger the command via the Command Palette or without right-clicking, the component will be created in the root of the workspace.

🧱 Requirements

  • VS Code version ^1.70.0 or later.
  • Node.js if you want to build it locally.

📸 Demo

demo-generate-component

📝 License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft