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) andclassName(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
- Keyboard Shortcut:
-
Toggle Attribute Collapse: Enable/disable the collapsing feature
Supported Languages
| Language | File Extensions | Attribute Names |
|---|---|---|
| HTML | .html, .htm | class |
| JSX | .jsx | className, class |
| TSX | .tsx | className, class |
| Vue | .vue | class |
| Svelte | .svelte | class |
Configuration
| Setting | Type | Default | Description |
|---|---|---|---|
classCollapser.enabled |
boolean | true | Enable attribute collapsing |
classCollapser.attributes |
string[] | ["class", "className"] | Attribute names to collapse |
classCollapser.threshold |
number | 3 | Minimum number of classes before collapsing |
classCollapser.collapseMode |
string | "ellipsis" | Visual mode: ellipsis (...), class count (5), or first class name |
classCollapser.languages |
string[] | ["html", "javascriptreact", "typescriptreact", "vue", "svelte"] | Language IDs where the extension is active |
Development
Prerequisites
- Node.js (version 18.x or higher)
- VS Code
Setup
- Clone this repository
- Install dependencies:
npm install - Compile the extension:
npm run compile - 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
- Parser (
src/providers/Parser.ts): Scans documents and identifies target attributes using language-appropriate parsing strategies - Decoration Manager (
src/providers/DecorationManager.ts): Creates and managesTextEditorDecorationTypeinstances for visual collapsing - Hover Provider (
src/providers/HoverProvider.ts): Provides tooltips with the full attribute value and edit link - Edit Attribute Command (
src/commands/EditAttributeCommand.ts): Handles the edit workflow via input box - Config Manager (
src/utils/ConfigManager.ts): Type-safe configuration wrapper with change notifications
Key Features
- Purely Visual: Uses VS Code's decoration system with
aftercontent 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