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

📝 License
MIT
| |