Evolution Injector

Evolution Injector is a VS Code extension with two core purposes: quickly injecting React components at the caret position, and providing a searchable coding snippets library across multiple languages.

The component injector features a prebuilt library of template components and also allows the user to inject their own components from their /components folder. It is project-aware and automates the process of importing components and rendering them in JSX.

The snippets library ships with curated examples covering common patterns (searching, sorting, inheritance, collections) in JavaScript, React, Python, and C#. Users can also create and save their own snippets, either to the current workspace or globally across all projects. More languages and snippet examples are planned for future releases.

Developed by james-evolution on GitHub.

Features

Components

• Sidebar UI for searching and inserting React components
• Supports both prebuilt template components and user-created components
• Automatic detection and creation of the best components folder location
• Real-time listing of user components in the sidebar
• Automated import statement insertion and JSX rendering
• Handles component creation, import conflicts, and naming
• File watcher for real-time updates

Snippets Library

• Searchable reference library of common coding patterns across JavaScript, React, Python, and C#
• Syntax-highlighted snippet viewer with Copy to Clipboard and Inject at Cursor actions
• Create, edit, delete, and save your own snippets, scoped to the current workspace or globally across all projects
• More languages and snippets planned for future releases

General

• Multiple built-in themes (Evolution Dark, Evolution Vampire, Evolution Luna) and an auto theme that inherits your VS Code color scheme
• Persistent theme and tab state across reloads

Component Folder Detection & Usage

When searching for or creating components, the extension:

1. Checks for /src/components (the standard location in React projects)
2. If not found, checks for /components in the project root
3. If still not found, searches the entire project directory for any components folder
4. If no folder exists, creates /components in /src (if /src exists), otherwise creates /components in the project root

All component imports, file operations, and sidebar listings use the detected folder.

User Component Discovery

• The extension scans the detected components folder for .jsx files
• User components are listed in the sidebar alongside template components
• Real-time updates are provided via a file watcher

Automated Component Import, Render, and Creation

When you insert a component:

1. The extension checks if the component exists in the detected components folder
2. If missing (for templates), it copies the template from the extension’s internal list
3. Handles naming conflicts and prompts for renaming if needed
4. Inserts the correct import statement at the top of the file
5. Renders the component JSX at the caret position
6. Provides user feedback and error handling

Template vs User Components

• Template components are shipped with the extension and are always listed in the sidebar, regardless of whether a user components folder exists. The sidebar UI requests both template and user components from the backend, which ensures template components are available for insertion at all times.
• User components are discovered from the project’s components folder and can be injected, imported, and rendered just like templates. The sidebar updates in real time as user components are added, removed, or changed.

Snippets Library

The Snippets tab is accessible from the top-level tab bar alongside the Components tab. It provides a curated reference library and a flow for saving your own snippets.

Supported Languages

More languages are planned for future releases.

Built-in Snippet Categories

Each language ships with snippets covering the following patterns:

• Searching — find/filter/query an array or list
• Sorting — sort with a comparator, key function, or LINQ ordering
• Inheritance — subclassing, calling the parent constructor, and method overriding
• Collections — declare and initialize arrays, lists, dicts, sets, and maps with default values

Viewing & Using Snippets

Click any snippet in the list to open the snippet modal. The modal displays syntax-highlighted code and two action buttons:

• Copy to Clipboard — copies the raw snippet text to your clipboard.
• Inject at Cursor — inserts the snippet text at the current editor caret position.

Editing & Deleting Your Snippets

You can now edit or delete any custom snippet you have created:

• Edit — Right-click your snippet and select "Edit" to update its name, language, description, or code. The edit form opens pre-filled with the current details.
• Delete — Right-click your snippet and select "Delete". A confirmation modal will appear before the snippet is permanently removed.

These options are available for both Workspace and Global snippets you own. Built-in snippets cannot be edited or deleted.

Creating Your Own Snippets

Click + Create Snippet at the bottom of the Snippets tab. A two-step form opens:

1. Choose a scope:

   • This Workspace Only — saved to workspaceState. The snippet is available only in the current project and is not synced.
   • Global (All Projects) — saved to globalState. The snippet is available across all workspaces on the machine and is synced if VS Code Settings Sync is enabled.

2. Fill in the details: name (required), language, optional description, and code (required).

Saved snippets appear in the list immediately with a badge indicating their scope (📁 Workspace or 🌐 Global).

Planned Features

• Future updates will include importing/exporting, so that users can import components from other projects.

Icon Attribution

Needle icon created by Abbasi - Flaticon