Class Attribute Collapser

A VS Code extension that visually collapses verbose HTML/JSX class attributes into an inline ellipsis (...), while preserving full discoverability via hover tooltips and enabling seamless click-to-edit workflows.

Features

• Visual Collapse: Replace the value of class (HTML) and className (JSX/TSX) attributes with ... when the number of classes exceeds a configurable threshold (default: 3)
• Hover Tooltip: When hovering over the collapsed ..., display a tooltip showing the full attribute value with CSS syntax highlighting and an "Edit Attribute" command link
• Click-to-Edit: Clicking on the collapsed ... allows you to edit the original attribute value
• Smart Expand on Cursor: When your cursor intersects a collapsed attribute range, it temporarily expands (removes decoration) and re-collapses automatically when you move away
• Edit Preservation: When editing an attribute, it remains expanded during the entire editing session and only collapses after you move the cursor away

Usage Example

Before

<div class="op1 op2 op3 op4 op5"></div>

After (visual only)

<div class="..."></div>

Commands

• Edit Collapsed Attribute: Opens an input box to edit the class attribute value

  • Keyboard Shortcut: Ctrl+Shift+E (Windows/Linux) / Cmd+Shift+E (Mac)
  • Also available in the editor context menu

• Toggle Attribute Collapse: Enable/disable the collapsing feature

Supported Languages

Configuration

Development

Prerequisites

• Node.js (version 18.x or higher)
• VS Code

Setup

1. Clone this repository
2. Install dependencies: npm install
3. Compile the extension: npm run compile
4. Launch the extension in debug mode: F5

Building

• Compile: npm run compile
• Watch mode: npm run watch
• Lint: npm run lint

Implementation Details

Core Components

1. Parser (src/providers/Parser.ts): Scans documents and identifies target attributes using language-appropriate parsing strategies
2. Decoration Manager (src/providers/DecorationManager.ts): Creates and manages TextEditorDecorationType instances for visual collapsing
3. Hover Provider (src/providers/HoverProvider.ts): Provides tooltips with the full attribute value and edit link
4. Edit Attribute Command (src/commands/EditAttributeCommand.ts): Handles the edit workflow via input box
5. Config Manager (src/utils/ConfigManager.ts): Type-safe configuration wrapper with change notifications

Key Features

• Purely Visual: Uses VS Code's decoration system with after content injection - never modifies the underlying file content
• Performance: Debounced updates (150ms) and viewport-only decoration for large files
• Smart Interactivity: Temporary expansion when cursor intersects collapsed ranges
• Edit Preservation: Attributes remain expanded during editing sessions and only collapse after cursor moves away
• Configurable: Extensive configuration options for different workflows

License

MIT