HTML Element Namer
Auto-generate unique class/id names for HTML elements and provide CSS selector autocomplete.
Features
- Generate unique class/id names from a command.
- Auto-insert class/id names when you type an empty class="" / className="" or id="" attribute.
- Use HTML tag names as the prefix (optional).
- CSS/SCSS/LESS autocomplete for class and id selectors.
- Emmet-style completions in HTML/JSX/TSX/Vue (e.g.,
div. or section#).
Usage
Generate a name manually
- Run HTML Element Namer: Generate Unique Class/ID Name from the Command Palette.
- Default keybinding: Cmd+Shift+G (macOS) / Ctrl+Shift+G (Windows/Linux).
Auto-generate names while typing
- Enable the setting
html-element-namer.autoGenerate.
- Type
class="", className="" (React), or id="" in HTML/JSX/TSX/Vue.
- A unique name is inserted automatically.
Extension Settings
html-element-namer.autoGenerate: Enable auto-insertion when typing empty class/id attributes.html-element-namer.autoPrefix: Prefix for generated names (default: elem).html-element-namer.autoPrefixMode: fixed or element to use the HTML tag name.
Release Notes
0.0.1
| |
