Genet: Code Snippet

Easily insert code snippets from configurable folders into your active editor. Features multi-folder support, live preview, keyboard navigation, and pagination for large snippet collections.

Demo

Features

• 📁 Multiple Snippet Folders - Configure and use multiple folders with recursive subfolder support
• � Smart Search - Search by filename or folder path for quick snippet discovery
• �👁️ Live Preview - See snippet content before inserting with arrow key navigation
• ⌨️ Keyboard Navigation - Full keyboard support with arrow keys, Enter to select, Esc to cancel
• 📄 Syntax Highlighting - Automatic syntax highlighting for 20+ languages
• 🔄 Pagination - Efficiently browse large collections with 50 items per page
• ♿ Accessibility - Full keyboard support and screen reader compatibility
• 🎯 Smart Insertion - Insert at cursor, replace selection, or open in new file

Quick Start

1. Configure Snippet Folders

Open VS Code settings (Cmd+,) and configure genetCodeSnippet.snippetFolders:

{
  "genetCodeSnippet.snippetFolders": [
    "/path/to/your/snippets",
    "/path/to/more/snippets",
    "/workspace/shared-snippets"
  ]
}

2. Run the Command

Press Cmd+Shift+P and type "Genet" to run Genet: Insert Code Snippet

3. Select and Insert

• Use ↑↓ arrows to navigate
• Press Enter to insert
• Press Esc to cancel
• Use Next/Previous Page for large collections

Usage

The extension creates a searchable list of all files in your configured folders:

1. Navigate with arrow keys (↑↓)
2. Search by typing - matches both filename and folder path
3. Preview appears below as you navigate
4. Insert by pressing Enter
5. Page through large folders with pagination buttons (when not searching)

Search Functionality

Type to search across your snippet collection:

• Search by filename: Type react to find react-hook.ts
• Search by folder path: Type python to find all Python files in snippets/python/
• Case-insensitive: Searches ignore case, so PYTHON finds python files

Folder Path Display

Each snippet shows:

• Filename in normal text (e.g., react-hook.ts)
• Folder and path in grey italic below (e.g., snippets/hooks/react-hook.ts)

Configuration

genetCodeSnippet.snippetFolders (Required)

Array of paths to folders containing code snippet files. Each folder can have subfolders.

Type: string[]
Default: []

Example:

{
  "genetCodeSnippet.snippetFolders": [
    "/Users/username/snippets",
    "/workspace/shared-snippets",
    "/projects/templates"
  ]
}

Supported Languages

The extension supports all text-based files and includes syntax highlighting for:

• Web: HTML, CSS, JSON, XML, YAML
• Scripting: Python, Ruby, PHP, Shell, Bash, Zsh
• Compiled: TypeScript, JavaScript, Java, Go, Rust, C, C++, C#, Swift, Kotlin
• Markup: Markdown, SQL

Keyboard Shortcuts

Troubleshooting

"No snippet folders are accessible"

Check that:

• Folder paths are configured in settings
• Paths exist and you have read permissions
• No typos in folder paths

"Some folders not accessible"

• Check the warning message
• Verify folder permissions
• Only accessible folders will be used

"No files found"

• Ensure your snippet folders contain files
• Check that files are text-based (not binary)
• Verify subfolder structure

Tips

• Large Collections: Use pagination (50 items per page) to browse efficiently
• Organization: Organize snippets in subfolders for better navigation
• Multiple Folders: Combine personal, team, and project-specific snippet folders
• Naming: Use descriptive filenames for better searchability

Requirements

• VS Code 1.105.0 or higher

License

MIT - See LICENSE file

Enjoy using Genet: Code Snippet!