React Auto Template

Automatically generate React component templates, wrap components with memo, and intelligently manage your component structure.

Features

🎯 Auto-Generate Components

• Automatically generates boilerplate when you create a .tsx or .jsx file
• Converts filenames to proper naming conventions (PascalCase, camelCase, snake_case, kebab-case)
• Examples:
  • button.tsx → Button component
  • user_profile.tsx → UserProfile component
  • modal_dialog.tsx → ModalDialog component

🎨 Code Formatting (Optional)

• Optional feature - disabled by default for maximum control
• Automatically formats code following professional standards when enabled
• Applies consistent 2-space indentation
• Proper spacing around imports, function declarations, and JSX
• Clean, readable code on save, template generation, and rename
• Enable in settings: "reactAutoTemplate.enableAutoFormatting": true
• Compatible with standard JavaScript/React coding styles

📦 Auto-Wrap with Memo

• Automatically wraps React components with memo() on save
• Intelligently handles React imports (default, named, and mixed imports)
• Examples:
  • import React from 'react' → import React, { memo } from 'react'
  • import { useState } from 'react' → import { useState, memo } from 'react'
  • Creates new import if none exists

🔄 Smart File Renaming

• Automatically updates component names when you rename files
• Preserves naming convention:
  • Rename userProfile.tsx to profileCard.tsx → userProfile becomes profileCard
  • Rename user_profile.tsx to profile_card.tsx → naming convention preserved

🚫 Respects User Preferences

• Permanently skips files where you manually remove memo
• Won't re-add memo if you deliberately remove it
• When you delete and recreate a file → memo is re-added (fresh start)

💾 Project-Wise Settings

• Tracking data is workspace-specific (per project)
• Same filename in different projects treated independently
• Switching projects? Settings are per-workspace!

🔧 Highly Configurable

• Easy to disable/enable features
• Smart performance optimizations

Configuration

Settings

Control the extension behavior in VS Code settings:

{
  "reactAutoTemplate.enableMemo": true,
  "reactAutoTemplate.enableMemoOnSave": true,
  "reactAutoTemplate.enableAutoTemplate": true,
  "reactAutoTemplate.enableAutoFormatting": false
}

Options:

Supported Naming Conventions

The extension automatically detects and preserves your naming convention:

• PascalCase - MyComponent (React standard)
• camelCase - myComponent
• snake_case - my_component
• kebab-case - my-component

Smart Memo Handling

Auto-Wrap Examples

Before (on save):

import React from 'react'

const Button = () => {
  return <button>Click me</button>
}

export default Button

After (auto-wrapped with formatting):

import React, { memo } from 'react'

const Button = () => {
  return <button>Click me</button>
}

export default memo(Button)

Formatting Examples

The extension can optionally apply standard code formatting (disabled by default).

To Enable Formatting: Add this to your VS Code settings:

{
  "reactAutoTemplate.enableAutoFormatting": true
}

When Formatting is DISABLED (default):

// Generated template (as-is, no formatting)
import React, { memo } from 'react'

const MyButton = () => {
  return (
    <div>MyButton</div>
  )
}

export default memo(MyButton)

When Formatting is ENABLED:

// Before: User code (messy)
import React,{memo}from'react'
const MyButton=()=>{return<div>MyButton</div>}
export default memo(MyButton)

// After: Automatically formatted
import React, { memo } from 'react'

const MyButton = () => {
  return (
    <div>MyButton</div>
  )
}

export default memo(MyButton)

Formatting Benefits (when enabled):

• ✅ Consistent 2-space indentation
• ✅ Clean import statements with proper spacing
• ✅ Professional code appearance
• ✅ Normalized spacing throughout
• ✅ Automatic cleanup on save

Manual Removal Respect

If you manually remove memo():

// You change this:
export default memo(Button)

// To this:
export default Button

// Extension will remember and never re-add memo to this file

Performance Optimizations

• ✅ Regex pattern caching
• ✅ Debounced saves (300ms)
• ✅ Early file filtering
• ✅ Efficient memory management
• ✅ Smart import detection
• ✅ Automatic code formatting on save

How It Works

File Creation

1. Create new .tsx or .jsx file (empty)
2. Extension auto-generates component template
3. Component name matches filename in proper case

File Save

1. Save a .tsx or .jsx file
2. Extension checks if memo is needed
3. Auto-wraps with memo if not present
4. Respects user preferences for files with memo removed

File Rename

1. Rename a .tsx or .jsx file
2. Extension updates component name and exports
3. Preserves original naming convention

File Deletion

1. Delete a .tsx or .jsx file
2. Extension clears memo removal tracking
3. If recreated, file gets fresh treatment

Workspace Storage

• Memo removal preferences are stored per-workspace
• Each project has independent settings
• Data persists across:
  • ✅ Extension updates
  • ✅ VS Code restarts
  • ✅ File operations

React Detection

The extension automatically detects if React is installed:

• If React is available - Imports import React, { memo } from 'react'
• If React is not available - Imports only import { memo } from 'react'

Example Workflow

# 1. Create a new component file
$ touch user_profile.tsx

# On creation, extension auto-generates:
# import React, { memo } from 'react'
# const UserProfile = () => {
#   return <div>UserProfile</div>
# }
# export default memo(UserProfile)

# 2. Edit the component
# (User adds functionality)

# 3. Save the file
# Extension verifies memo is present ✓

# 4. Rename the file to profile_card.tsx
# Extension updates:
# const ProfileCard = () => { ... }
# export default memo(ProfileCard)

# 5. Manually remove memo (user choice)
# export default ProfileCard
# Extension remembers and won't re-add it

# 6. Delete and recreate profile_card.tsx
# New file gets memo again (fresh start)

Keyboard Shortcuts

• F5 - Launch Extension Development Host (if developing)
• Ctrl+Shift+P → "Developer: Reload Window" - Reload extension

Tips & Tricks

1. Disable for specific files - Simply remove memo() from the component, extension will respect your choice
2. Different projects, different rules - Each workspace maintains independent settings
3. Switch naming conventions - Extension detects and preserves your style
4. Configure auto-formatting - See FORMATTING_QUICK_REFERENCE.md or FORMATTING_CONFIG.md for detailed options

Additional Documentation

For detailed configuration and examples:

• FORMATTING_QUICK_REFERENCE.md - Quick reference and configuration options
• FORMATTING_CONFIG.md - Comprehensive guide for auto-formatting feature

Requirements

• VS Code 1.85.0 or later
• React project (for full functionality)

License

MIT

Made with ❤️ for React developers