Emoji Names - VS Code Extension

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
• Global & Local Mappings: Set up mappings globally (all projects) or locally (current project only)
• Duplicate Handling: Control how consecutive duplicate words are handled (both, first-only, second-only)
• 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):

Global Mappings (affect all projects)

• Add Emoji Mapping: Add a new word-emoji mapping to global settings
• Remove Emoji Mapping: Remove an existing word-emoji mapping from global settings

Local Mappings (affect current project only)

• Add Local Emoji Mapping: Add a new word-emoji mapping to workspace settings
• Remove Local Emoji Mapping: Remove an existing word-emoji mapping from workspace settings

Display Settings

• Toggle Emoji Position: Switch between left and right positioning
• Toggle Duplicate Handling: Cycle through duplicate handling modes (both → first-only → second-only → both...)
• Refresh Emoji Decorations: Manually refresh all decorations

Configuration

You can customize the extension behavior through VS Code settings:

{
    "emojiNames.enabled": true,
    "emojiNames.position": "right",
    "emojiNames.duplicateHandling": "first-only",
    "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.duplicateHandling: How to handle consecutive duplicate words ("both", "first-only", or "second-only", default: "first-only")
• emojiNames.mappings: Object mapping words to emojis

Global vs Local Mappings

The extension supports two types of mappings:

1. Global Mappings: Stored in user settings, apply to all projects
2. Local Mappings: Stored in workspace settings (.vscode/settings.json), apply only to the current project

Local mappings override global mappings for the same word. This allows you to:

• Set up common mappings globally (e.g., User → 👤)
• Override specific mappings for individual projects (e.g., User → 🧑‍💻 in a specific project)

Duplicate Handling

When the same word appears consecutively in a line, you can control which occurrences get emojis:

• first-only (default): Only the first occurrence in each consecutive group gets an emoji
• second-only: Only the second occurrence in each consecutive group gets an emoji
• both: All consecutive occurrences get emojis

Examples:

// With first-only setting:
public User User { get; set; } public User User2 { get; set; }
// Result: public User👤 User { get; set; } public User👤 User2 { get; set; }

// With second-only setting:
public User User { get; set; } public User User2 { get; set; }
// Result: public User User👤 { get; set; } public User User2 { get; set; }

// With both setting:
public User User { get; set; } public User User2 { get; set; }
// Result: public User👤 User👤 { get; set; } public User👤 User2 { get; set; }

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>
        );
    }
}

Duplicate Handling Examples

// With first-only setting:
User User User { get; set; } User User2 { get; set; }
// Result: User👤 User User { get; set; } User👤 User2 { get; set; }

// With second-only setting:
User User User { get; set; } User User2 { get; set; }
// Result: User User👤 User { get; set; } User User2 { get; set; }

// With both setting:
User User User { get; set; } User User2 { get; set; }
// Result: User👤 User👤 User👤 { get; set; } User👤 User2 { get; set; }

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.)
• ✅ Global and local mappings with proper override behavior
• ✅ Intelligent duplicate handling for consecutive word groups

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.