React File Boilerplate Extension

A Visual Studio Code extension that generates React component boilerplate code with a simple trigger word. This extension streamlines the process of creating new React components with pre-configured hooks, error handling, and basic component structure.

Features

• 🚀 Quick component generation using the edge trigger word
• 📁 Works with both .jsx and .tsx files
• ⚡ Includes common React hooks (useState, useEffect)
• 🔄 Built-in loading state handling
• ❌ Error state management
• 🧩 Automatic component naming based on file name
• ✨ Clean and modern boilerplate structure

Installation

1. Open Visual Studio Code
2. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac) to open the Quick Open dialog
3. Type ext install react-file-boilerplate and press Enter
4. Restart VS Code when prompted

Usage

1. Create a new file with .jsx or .tsx extension (e.g., Example.jsx)
2. Inside the file, type edge
3. Press Tab or Enter when the snippet suggestion appears
4. The boilerplate code will be automatically generated using the file name as the component name

Generated Boilerplate Structure

The generated component includes:

• React imports with commonly used hooks
• Component state management using useState
• Data fetching setup with useEffect
• Loading and error state handling
• Basic event handler example
• Conditional rendering patterns
• Default export statement

Example of generated code:

import React, { useState, useEffect } from 'react';

const Example = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                // Add your async logic here
                // const response = await fetch('your-api-endpoint');
                // const result = await response.json();
                // setData(result);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchData();

        return () => {
            // Cleanup code here
        };
    }, []);

    const handleClick = () => {
        console.log('Button clicked!');
    };

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

    return (
        <div className="container">
            <h1>Example</h1>
            <button onClick={handleClick}>Click me</button>
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
};

export default Example;

Requirements

• Visual Studio Code version 1.60.0 or higher
• React project setup

Extension Settings

This extension doesn't require any additional settings. It works out of the box with React files.

Known Issues

• Component names must start with an uppercase letter (following React conventions)
• The extension only works in .jsx and .tsx files

Release Notes

0.0.1

Initial release of React File Boilerplate extension:

• Basic boilerplate generation with 'edge' trigger
• Support for JSX and TSX files
• Included common React patterns and hooks

Contributing

Found a bug or have a feature request? Please open an issue on our GitHub repository.

Enjoy! 🚀