🚀 QuickChars

A Visual Studio Code extension that provides quick access to special characters, symbols, emojis, and code snippets through a convenient sidebar panel.
If you enjoy this extension, you can:
✨ Features
- ⚡ Quick Character Insertion: Insert special characters and symbols with a single click
- 📝 Code Snippets: Insert predefined code snippets with placeholders
- 📁 Collapsible Groups: Organize items into groups that can be expanded/collapsed
- 💾 Persistent State: Groups remember their expanded/collapsed state between sessions
- 🔄 Dual Panel Support: Available in both Activity Bar and Explorer sidebar
- 🎨 Fully Customizable: Configure your own groups and items through VS Code settings
📦 Default Groups
QuickChars comes with these pre-configured example groups:
- 🔤 Special Characters: Arrows, copyright, checkmarks, currency symbols, mathematical operators
- 🇪🇸 Spanish Accents: Accented letters and Spanish punctuation (¿, ¡)
- 😀 Emojis: Common emojis for documentation and comments
- 💻 Code Snippets: Console.log and arrow function templates
🎯 How to Use
- 📍 Access the Panel: Look for the QuickChars icon in the Activity Bar or Explorer sidebar
- ✨ Insert Items: Click any button to insert the character or snippet at your cursor position
- 📂 Expand/Collapse Groups: Click on group headers to show/hide their contents
- 🔕 Hide Info Banner: Uncheck "Show Info Banner" in settings once you're familiar with the extension
⚙️ Customization
📝 Adding Your Own Groups and Items
- Open VS Code Settings (
Ctrl/Cmd + ,
)
- Search for "QuickChars"
- Edit the "Groups" configuration
{
"quickChars.groups": [
{
"name": "My Custom Group",
"items": [
{ "label": "✓", "text": "✓" },
{ "label": "My Snippet", "text": "console.log('$1');", "isSnippet": true }
]
}
]
}
🔧 Configuration Example
{
"quickChars.groups": [
{
"name": "Math Symbols",
"items": [
{ "label": "α", "text": "α" },
{ "label": "π", "text": "π" }
]
},
{
"name": "JS Snippets",
"items": [
{ "label": "Log", "text": "console.log('$1');", "isSnippet": true }
]
}
]
}
🏷️ Item Properties
label
: Text displayed on the button
text
: Text to be inserted
isSnippet
(optional): Set to true
for full-width snippet buttons
📝 Placeholder Support
$1
, $2
, etc. for tab stops
${1:placeholder}
for default text
$0
for final cursor position
🎮 Commands
- QuickChars: Toggle QuickChars in Activity Bar - Show/hide the Activity Bar panel
- QuickChars: Toggle QuickChars in Explorer - Show/hide the Explorer panel
💡 Tips
- 💾 Groups remember their expanded/collapsed state - your preferred layout persists between sessions
- 📄 Use
isSnippet: true
for multi-line code templates that need full-width buttons
- 🔲 Regular characters work best as square buttons without the
isSnippet
property
- 🔄 You can completely replace the default configuration with your own groups
- 🏠 The first group is expanded by default, others start collapsed
📋 Requirements
- Visual Studio Code 1.102.0 or higher
⚡ Extension Settings
This extension contributes the following settings:
quickChars.showInfoBanner
: Enable/disable the configuration tips banner
quickChars.showInActivityBar
: Show/hide QuickChars in Activity Bar
quickChars.showInExplorer
: Show/hide QuickChars in Explorer
quickChars.groups
: Define your custom groups and items
📄 License
This extension is provided as-is without warranty. Feel free to modify and distribute according to your needs.