CodeSnippet Pro

A powerful VS Code extension for managing code snippets with text and image support.

Features

Text Snippets

• Add, edit, delete, and insert text snippets
• Categorize by language and tags
• Autocomplete integration
• Favorite snippets
• Versioning support
• Import/export snippets (JSON)

Image Snippets

• Capture screenshots from clipboard
• Add annotations (text, highlights, colors)
• Edit screenshots with canvas tools
• Store images locally
• Preview and manage image snippets

Snippet Management

• Search by name, tag, language
• Favorite snippets for quick access
• Drag-and-drop reordering
• Unified webview panel

Export & Share

• Export snippets as PDF (multiple snippets)
• Export as PNG/JPG (single snippet)
• Copy snippet image to clipboard

VS Code Integration

• Command Palette commands
• Keyboard shortcuts
• Status bar integration
• Autocomplete suggestions

Installation

1. Clone this repository
2. Run npm install
3. Run npm run compile
4. Press F5 to launch extension development host

Usage

Getting Started

1. After installation, look for the "Snippets" button in VSCode's status bar (bottom right corner)
2. Click the button to open the Snippet Management Panel
3. Alternatively, use Command Palette (Ctrl+Shift+P) and search for "CodeSnippet Pro"

Adding Text Snippets

Method 1: Keyboard Shortcut

1. Select code in your editor
2. Press Ctrl+Shift+T
3. Fill in the details:
   • Title: Name for your snippet
   • Content: The code (auto-filled if selected)
   • Language: Programming language
   • Tags: Comma-separated tags for organization

Method 2: Command Palette

1. Press Ctrl+Shift+P
2. Type "CodeSnippet Pro: Add Text Snippet"
3. Fill in the snippet details

Method 3: Snippet Panel

1. Open snippet panel from status bar
2. Click "Add Text Snippet" button
3. Fill in details and save

Adding Image Snippets

Method 1: Keyboard Shortcut

1. Take a screenshot or copy image to clipboard
2. Press Ctrl+Shift+I
3. Add title, tags, and notes
4. Use annotation tools if needed

Method 2: Command Palette

1. Press Ctrl+Shift+P
2. Type "CodeSnippet Pro: Add Image Snippet"
3. Select image source and add metadata

Method 3: Snippet Panel

1. Open snippet panel
2. Click "Add Image Snippet" button
3. Upload or paste image

Managing Snippets

Opening Snippet Panel:

• Click status bar button (clippy icon with "Snippets")
• Command Palette: "CodeSnippet Pro: Open Snippet Panel"

In the Panel:

• Search: Use search box to find snippets by title, tag, or content
• Filter: Filter by type (text/image), language, or tags
• Edit: Click edit button or use "CodeSnippet Pro: Edit Snippet"
• Delete: Click delete button or use "CodeSnippet Pro: Delete Snippet"
• Insert: Click insert button or use "CodeSnippet Pro: Insert Snippet"
• Export: Select multiple snippets and click "Export Selected"

Inserting Snippets

Method 1: From Panel

1. Open snippet panel
2. Click "Insert" button next to any snippet

Method 2: Keyboard Shortcut

1. Place cursor where you want to insert
2. Press Ctrl+Shift+S
3. Select snippet from quick pick menu

Method 3: Auto-complete

1. Type . in your code
2. Select snippet from auto-complete suggestions
3. Works only for text snippets

Exporting Snippets

1. Open snippet panel
2. Select one or more snippets (checkboxes)
3. Click "Export Selected" button
4. Choose export format:
   • PDF: Creates a document with all selected snippets
   • PNG: Exports first selected image snippet as PNG
5. Choose save location
6. Click "Export"

Image Annotation Tools

When adding/editing image snippets:

• Text Tool: Add text annotations
• Highlight: Highlight areas
• Rectangle/Circle: Draw shapes
• Arrow: Point to specific areas
• Color Picker: Choose annotation colors
• Eraser: Remove annotations

Keyboard Shortcuts Summary

• Ctrl+Shift+T: Add Text Snippet
• Ctrl+Shift+I: Add Image Snippet
• Ctrl+Shift+S: Insert Snippet
• .: Auto-complete trigger for text snippets

Commands

• codeSnippetPro.addTextSnippet - Add text snippet
• codeSnippetPro.addImageSnippet - Add image snippet
• codeSnippetPro.editSnippet - Edit snippet
• codeSnippetPro.deleteSnippet - Delete snippet
• codeSnippetPro.insertSnippet - Insert snippet
• codeSnippetPro.exportSnippets - Export snippets
• codeSnippetPro.openSnippetPanel - Open snippet panel

Keyboard Shortcuts

• Ctrl+Shift+T - Add text snippet
• Ctrl+Shift+I - Add image snippet
• Ctrl+Shift+S - Insert snippet

Configuration

• codeSnippetPro.storagePath - Custom storage path
• codeSnippetPro.maxSnippets - Maximum number of snippets

Tech Stack

• VS Code API
• TypeScript
• Node.js
• HTML5 Canvas for image editing
• PDFKit for PDF export

Author

Raj Dev

• GitHub: @codewithevilxd
• Twitter: @raj_dev_X
• Discord: Raj.dev_

Contributing

1. Fork the repository
2. Create a feature branch
3. Make changes
4. Submit a pull request

License

MIT License