nerdy-vscode

Nerd glyph picker for VS Code 🔍🧑‍💻

nerdy-vscode is a VS Code extension that allows developers to quickly search and insert Nerd Font glyphs into their code.

✨ Features

• Search from thousands of Nerd Font icons.
• Instant insertion into the active editor.
• Recently Used: Quick access to your most frequently used icons.
• Automatic Clipboard Copy: Selected icons are automatically copied to your clipboard.
• High Performance: Optimized data caching and SVG rendering for smooth UI.

⚡ Setup

⚙️ Requirements

• VS Code version 1.96.0 or higher.
• A Nerd Font installed and configured in VS Code for proper icon rendering.

🔡 Recommended Fonts

To see the icons correctly, you must have a Nerd Font installed on your system. We recommend:

• FiraCode Nerd Font (Highly Recommended)
• JetBrainsMono Nerd Font
• Hack Nerd Font

After installing, make sure to update your VS Code settings:

"editor.fontFamily": "'FiraCode Nerd Font', 'FiraCode Nerd Font Mono', monospace"

💻 Installation

Marketplace

Search for "nerdy-vscode" in the VS Code Extension Marketplace and click Install.

Local Installation (for development)

If you'd like to run the extension from source:

1. Clone the repository:

   git clone https://github.com/2kabhishek/nerdy-vscode
   cd nerdy-vscode
   

2. Install dependencies:

   pnpm install
   

3. Open the project in VS Code:

   code .
   

4. Press F5 to start a new VS Code window with the extension enabled.

Developer Commands

• pnpm run update-glyphs: Updates the glyphnames.json data file from the official Nerd Fonts repository.

🚀 Usage

Insert Icon

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
2. Type "Nerdy: Insert Icon" and press Enter.
3. Search for the icon you want and select it to insert.

Insert Recent Icon

1. Open the Command Palette.
2. Type "Nerdy: Insert Recent Icon" and press Enter.
3. Select from your recently used icons for even faster access.

🏗️ What's Next

• You tell me! :)

🧑‍💻 Behind The Code

🌈 Inspiration

nerdy-vscode was born out of the need for a quick and easy way to find and insert Nerd Font glyphs without leaving the editor or searching through external websites.

💡 Challenges/Learnings

• Performance: Handling thousands of glyphs efficiently in VS Code's QuickPick required implementing a caching layer to avoid redundant disk I/O.
• VS Code API: Learned the nuances of the showQuickPick API and how to handle asynchronous user selections effectively.

🧰 Tooling

• dots2k — Dev Environment
• nvim2k — Personalized Editor
• sway2k — Desktop Environment
• qute2k — Personalized Browser

🔍 More Info

• nerdy.nvim — Nerdy for Neovim