Component template generator

VS Code React Component Generator

This VS Code extension simplifies the process of creating new React components within your TypeScript or TSX files.

IT IS STILL IN BETA VERSION

Features:

• Effortless Component Creation:

  • Place your cursor within any .ts,.js,.jsx,.tsx file.
  • Execute the command (default: Ctrl+Shift+P > "Create React Component").
  • A new component file will be created in the same directory with the same base name as the current file.
    • For example, if you're in MyComponent.tsx or MyComponent.jsx, it will overwrite the content.

• Basic Component Structure:

  • The generated component includes a basic structure:
    • A functional React component using the React.FC interface.
    • An empty div for rendering content.

• TypeScript Support:

  • Seamlessly integrates with TypeScript projects, providing a solid foundation for type-safe component development.

Installation:

1. Open the VS Code Extensions panel (Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on macOS).
2. Search for "React Component Generator" and install the extension.

Usage:

1. Open any .js,.jsx,.ts,.tsx file in your VS Code workspace.
2. Use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
3. Type "Create React Component" and select the command.
4. A new component file will be created in the same directory.

Example Generated Component:

import React from 'react';

export const MyComponent = () => {
    return (
        <div>
        </div>
    )
};