React Snippets & Scaffolding Tool 🚀

React Snippets & Scaffolding Tool is a premium, fully-integrated, production-ready VS Code extension designed to accelerate modern React development workflows. It offers interactive, multi-framework project scaffolding, responsive Tailwind CSS layouts, smart component generation, and a gorgeous, category-filtered Visual Snippets Explorer dashboard.

🌟 Key Features

🚀 1. Interactive Project Scaffolder (Vite & Next.js App Router)

Kickstart optimized, production-ready codebases in seconds. Simply right-click any folder in your Explorer Sidebar or open the Command Palette to deploy:

• Framework Choices:
  • React + Vite (JavaScript): Ultra-fast hot-reloading bundler.
  • React + Vite (TypeScript): Fully configured static typing.
  • React + Next.js App Router (JavaScript): Server-side rendering (SSR), optimized route layouts, and production-ready server components.
  • React + Next.js App Router (TypeScript): Standard Next.js server/client component boundaries with enterprise-grade typing.
• Premium Defaults Pre-installed:
  • Vibrant Styling: Modern Tailwind CSS, PostCSS, and Autoprefixer pre-configured.
  • Dark Mode: Hydration-safe ThemeToggle synced with client/server boundary systems and persistent localStorage.
  • Polished Layouts: Pre-packaged sticky Navbar (with mobile hamburger toggle menu), custom branding logo, and multi-column Footer layout.
  • SEO Ready: Auto-configured OpenGraph tags, responsive titles, site keywords, and descriptive search-engine metadata inside all Next.js App Router configurations.

🎨 2. Visual Snippets Explorer

No more memorizing cryptic syntax shortcuts. Right-click inside any React editor file and select "React Snippets: Open Visual Explorer":

• Live Search: Instantly query snippets by title, autocomplete prefix, description content, or code segments.
• Tag Filters: Quickly filter through specialized categories including Components, Hooks & Events, Router, Layouts, Other.
• Prism.js Syntax Highlighting: View clear, colorized code previews matching your VS Code editor theme.
• Quick Actions: One-click Insert straight into your active cursor selection, or Copy code blocks to your clipboard with temporary visual feedback.
• Secure Environment: Runs under sandboxed Webview settings with strict Content Security Policy (CSP) compliance.

🛠️ 3. Smart Component & Unit Test Scaffolder

Standardize and speed up component creation. Right-click any folder in your workspace and click "Create React Component":

• Auto-Language Detection: Scans your workspace root directory for tsconfig.json to decide between TypeScript (.tsx) or JavaScript (.jsx) files automatically.
• Modern Boilerplate: Creates a functional UI component styled with custom responsive Tailwind CSS classes.
• Unit Testing Out-Of-The-Box: Generates a matching test file (e.g., MyComponent.test.tsx) pre-configured with Vitest and React Testing Library to mock events (vi.fn()) and assert rendering.

⌨️ Prefix Autocomplete Shortcuts

If you prefer keeping your hands on the keyboard, simply type these shortcuts in any JavaScript or TypeScript React file to trigger instant code snippet insertions:

📖 Usage & Setup Guide

Running Project Starters

1. Right-click a folder in the VS Code Explorer panel.
2. Select Create React Starter Project.
3. Pick one of the Vite or Next.js starters (JS or TS).
4. Wait for the automatic npm install progress notification to finish.
5. Launch the local environment:
   • Vite: Run npm run start or npm run dev
   • Next.js: Run npm run dev

Creating Components & Tests

1. Right-click your desired destination folder (e.g. src/components).
2. Select Create React Component.
3. Type in the component's name (e.g., Button).
4. Instantly receive your UI file and your matching unit test file.

Opening Visual Explorer

1. Open any React file (.js, .jsx, .ts, .tsx).
2. Right-click inside your code editor pane.
3. Select React Snippets: Open Visual Explorer.

📋 Requirements

• VS Code v1.85.0 or higher.
• Node.js v18.x or higher (required for executing scaffolded template packages locally).

📦 Version History

v0.0.7 (Current Release)

• README Overhaul: Rewrote the full extension documentation to cover all four starter templates (Vite JS/TS, Next.js App Router JS/TS), the Visual Snippets Explorer, Smart Component Scaffolder, and complete prefix autocomplete reference table.

v0.0.6

• Windows Dev Server Stability: Upgraded templates Next.js dependency to ^14.2.15 to resolve a critical Node 22.x/20.x watchpack relative-path crash on Windows.
• Tailwind Snippet Upgrade: Upgraded all layout snippets (!nav, !landingpage, !testimonial, !slider, !footer) to fully responsive utility-first Tailwind CSS designs.
• React Router Integration: Configured modern Router future flags (v7_startTransition and v7_relativeSplatPath) inside Vite templates.
• Accessibility Enhancements: Standardized form validation tags (autoComplete, matching inputs, and unique IDs) across starter contact flows.

v0.0.5

• Next.js Integration: Introduced two new advanced Next.js App Router templates (JS/TS configurations) with pre-configured multi-page indexing keywords, layout containers, and hydration-safe theme togglers.

v0.0.4

• CSP Security Tuning: Configured strict CSP headers for the Webview panels to shut down console warnings.

v0.0.3

• Router Optimizations: Added Vite template future flag overrides.

v0.0.2

• Package Context mapping: Enabled optional explorer target uri parameter triggers for all command selections.

v0.0.1

• Initial Release: Basic React structure scaffolding and standard functional hooks autocomplete.

Boost your React layout & component design workflow today! 🚀 Designed and built with passion by Ali Ihtsham.