Snippet Composer 📝

Supercharge your workflow with modular, multi-file snippet management for VS Code

🚀 Features

Multi-File Snippet Templates

Create complex snippets that generate multiple files at once - perfect for component libraries, design patterns, and boilerplate code.

Powerful Variable System

Define custom variables to make your snippets truly reusable. Transform variables with built-in modifiers:

• {{ComponentName}} - Use as provided
• {{ComponentName|lowercase}} - Convert to lowercase
• {{ComponentName|uppercase}} - Convert to uppercase
• {{ComponentName|capitalize}} - Capitalize first letter
• {{ComponentName|camelcase}} - Convert to camelCase

Visual Editor

No more hand-editing JSON files! Our intuitive editor provides syntax highlighting, auto-completion, and real-time preview.

Organized Management

• 📂 Folder organization
• 🏷️ Tag-based filtering
• 🔍 Fast search capabilities
• 🔄 Drag-and-drop reordering

Built-in Snippet Library

Get started immediately with pre-made snippets for popular frameworks and languages:

• React components and hooks
• Express API routes
• TypeScript classes and interfaces
• HTML/CSS templates
• ... and more!

📥 Installation

From VS Code Marketplace

1. Open VS Code
2. Click on the Extensions icon in the Activity Bar
3. Search for "Snippet Composer"
4. Click Install

From Command Line

code --install-extension Phantasm.snippet-composer

🎮 Usage

Creating a new snippet:

1. Click the Snippet Composer icon in the Activity Bar
2. Click the "+" button to create a new snippet
3. Fill in the details, add files, and define variables
4. Click "Save Snippet"

Inserting a snippet:

1. Right-click in the explorer view or editor
2. Select "Insert Snippet" from the context menu
3. Choose your snippet from the list
4. Fill in the variable values when prompted

Managing folders:

1. Right-click on any folder in the Snippets Explorer
2. Use "Rename Folder" or "Delete Folder" options
3. Drag and drop snippets between folders to reorganize

⚙️ Configuration

Customize Snippet Composer through VS Code settings:

"snippetComposer.storage.location": "local", // Where to store snippets: "local" or "cloud"
"snippetComposer.author": "Your Name" // Default author name for snippets

🔗 Use Cases

React Developers: Generate component files with tests, styles, and stories

Backend Developers: Create API routes, controllers, and models in one go

Team Leads: Standardize code patterns across your team

Open Source Maintainers: Provide official snippets for your libraries

🛠️ Advanced Features

Use built-in transformations to manipulate variable values:

{{ComponentName|lowercase}} => mycomponent
{{ComponentName|capitalize}} => Mycomponent

Snippet Import/Export

Share snippets with your team or across devices:

1. Click "Export Snippets" in the explorer view
2. Save the JSON file
3. On another device, click "Import Snippets"

Snippet Organization:

1. Create folders and subfolders to categorize snippets
2. Add tags for easier searching
3. Drag and drop to rearrange

📊 Why Use Snippet Composer?

🤝 Contributing

Contributions are welcome! Check out our contributing guidelines to get started.

📣 Support

• Report Issues

📝 Release Notes

0.1.0

• Initial release
• Multi-file snippet support
• Variable system with transformations
• Visual editor with syntax highlighting
• Folder organization
• Built-in snippet library

📜 License

MIT © Aditya Tiwari