Show HN: VS Code extension that adds emojis to your code (without breaking it)

A VS Code extension that displays emojis next to specific words in your code without injecting them into the text. This is perfect for adding visual indicators to class names, type names, or any other identifiers in your code.

Features

• Visual Emoji Decorations: Shows emojis next to specific words without modifying the actual text
• Case-Sensitive Matching: Only matches exact word boundaries (e.g., User won't match user or UserProfile)
• Configurable Position: Choose whether emojis appear to the left or right of words
• Easy Management: Add or remove word-emoji mappings through commands
• Real-time Updates: Decorations update automatically as you type or change files

Installation

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Press F5 in VS Code to launch the extension in a new Extension Development Host window

Usage

Default Mappings

The extension comes with several pre-configured mappings:

• User → 👤
• Product → 📦
• Order → 🛒
• Payment → 💳
• Database → 🗄️
• Config → ⚙️
• Utils → 🔧
• Helper → 🛠️
• Service → 🔌
• Controller → 🎮
• Model → 📊
• View → 👁️
• Component → 🧩
• Interface → 📋
• Type → 🏷️
• Class → 🏛️
• Function → ⚡
• Variable → 📝
• Constant → 🔒
• Array → 📚
• Object → 📦
• String → 📄
• Number → 🔢
• Boolean → ✅
• Null → ❌
• Undefined → ❓

Commands

The extension provides several commands that you can access via the Command Palette (Ctrl+Shift+P):

• Add Emoji Mapping: Add a new word-emoji mapping
• Remove Emoji Mapping: Remove an existing word-emoji mapping
• Toggle Emoji Position: Switch between left and right positioning

Configuration

You can customize the extension behavior through VS Code settings:

{ "emojiNames.enabled": true, "emojiNames.position": "right", "emojiNames.mappings": { "User": "👤", "Product": "📦", "CustomWord": "🎯" } }

Settings

• emojiNames.enabled: Enable or disable the extension (default: true)
• emojiNames.position: Position of emojis relative to words ("left" or "right", default: "right")
• emojiNames.mappings: Object mapping words to emojis

Examples

TypeScript/JavaScript

class User { private name: String; private age: Number; private isActive: Boolean; constructor(name: String, age: Number) { this.name = name; this.age = age; this.isActive = true; } } interface Product { id: String; name: String; price: Number; } function createOrder(user: User, products: Array<Product>): Order { // Implementation }

React Components

function UserProfile({ user }) { return ( <div> <h1>{user.name}</h1> <UserAvatar user={user} /> <UserSettings config={user.config} /> </div> ); } class ProductCard extends Component { render() { return ( <div className="product-card"> <ProductImage src={this.props.image} /> <ProductInfo data={this.props.data} /> </div> ); } }

How It Works

The extension uses VS Code's decoration API to overlay emojis on top of the text without actually modifying the document content. This means:

• ✅ No compilation errors
• ✅ No syntax highlighting issues
• ✅ No interference with other extensions
• ✅ Works with any file type
• ✅ Preserves all text functionality (search, replace, etc.)

Development

Building

npm install npm run compile

Testing

npm run test

Packaging

npm run vscode:prepublish

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.