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
- Open Visual Studio Code
- Press
Ctrl+P
(Windows/Linux) or Cmd+P
(Mac) to open the Quick Open dialog
- Type
ext install react-file-boilerplate
and press Enter
- Restart VS Code when prompted
Usage
- Create a new file with
.jsx
or .tsx
extension (e.g., Example.jsx
)
- Inside the file, type
edge
- Press
Tab
or Enter
when the snippet suggestion appears
- 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! 🚀