sergeche/emmet-sublime
Emmet Sublime
This project is a Sublime Text plugin and web development editor extension that functions as a markup abbreviation expander. It allows for the rapid creation of structured HTML and CSS code blocks by transforming concise, CSS-like shorthand tokens into full markup and stylesheets.
The tool provides advanced automation for web workflows, including the generation of nested HTML elements, BEM class names, and CSS vendor prefixes. It also includes specialized utilities for generating CSS gradients with browser compatibility fallbacks and converting image paths into base64 encoded data URLs.
Beyond code generation, the extension covers markup structure manipulation and navigation. This includes capabilities for balancing tag selections, jumping between matching tag pairs, performing arithmetic calculations within the code, and generating dummy text for visual testing.
The system is configurable through abbreviation alias mapping, custom snippet definitions, and plugin extensions to modify internal filters and actions.
Features
- Markup Abbreviations - Transforms concise shorthand strings into full HTML, XML, or CSS blocks based on active syntax.
- Shorthand Code Expansions - Expands abbreviated markup syntax into full HTML structures with support for nesting and grouping.
- Web Development Extensions - Provides a suite of navigation and manipulation tools to streamline HTML, CSS, and frontend development workflows.
- Frontend Development Environments - Enhances frontend development productivity by reducing keystrokes through automated calculations and shorthand.
- HTML and CSS Code Generators - Provides a system for rapidly creating structured HTML and CSS code blocks using concise shorthand tokens.
- Markup Selection Wrapping - Encloses selected content within a generated markup structure based on a shorthand abbreviation.
- Markup Tag Manipulators - Provides utilities to add, remove, split, or join HTML tags to modify the document structure.
- Interactive Snippet Expansion - Injects static code blocks with dynamic tabstops and variables for rapid post-insertion navigation.
- CSS Shorthand Definitions - Enables efficient CSS authoring through shorthand tokens and expanded snippet definitions.
- Shorthand Attribute Assignments - Provides shorthand syntax for rapidly assigning IDs, classes, and data attributes to HTML elements.
- Frontend Workflow Automations - Accelerates the creation of web layouts by automating repetitive markup tasks and boilerplate generation.
- Code Expanders - Functions as a text expander that transforms shorthand abbreviations into full HTML and CSS code blocks.
- Balanced Tag Matching - Adjusts selection bounds to highlight content or containing elements using balanced tag matching.
- Balanced Bracket Matching - Selects matching tags or brackets by expanding the selection outward from the cursor.
- Custom Abbreviations - Creates shorthand triggers that expand into complex code blocks to override default snippets.
- Markup Boundary Navigation - Provides navigation utilities for jumping between the start and end of nested markup tags.
- Markup Edit Point Navigation - Jumps the cursor between tags and empty attributes to accelerate navigation during authoring.
- Markup Hierarchy Restructuring - Manages the document tree during expansion to insert elements at precise nesting levels.
- Markup Structure Manipulation - Deno Emmet deletes the enclosing tag at the current position and adjusts the remaining indentation.
- Markup Syntax Converters - Transforms expanded abbreviations into different markup languages based on file types or flags.
- Numeric Code Modifiers - Increments, decrements, or evaluates mathematical expressions for numeric values found directly in the code.
- Snippet Tabstop Navigation - Places tabstop marks within expanded code blocks to allow quick traversal between elements.
- Structural Code Navigation - Moves the selection to the next or previous significant item in the document for faster traversal.
- Tag Attribute Editing - Allows rapid editing by cycling through tag names, attributes, and selectors within markup.
- Tag Inference Engines - Infers the correct HTML element based on the parent context to enable shorter abbreviations.
- Snippet Matching - Resolves imprecise abbreviations against predefined snippet names to determine which template to expand.
- Context-Aware Suggestions - Determines missing tag names by analyzing the surrounding document hierarchy for context-aware expansion.
- Editor Plugin Extensions - Allows developers to extend the plugin's core functionality by loading custom actions and filters from external files.
- Gradient CSS Builders - Converts shorthand gradient definitions into complete CSS properties with vendor prefixes.
- Markup - Allows clustering multiple elements to apply multiplication or nesting to the entire group.
- Hierarchical Text Selections - Expands or shrinks text selections by calculating the boundaries of nearest matching markup pairs.
- Dynamic Element Generation - Generates multiple copies of an element with optional sequential numbering for lists and headers.
- Markup Text Insertions - Allows adding plain text content directly into generated HTML elements using curly brace notation.
- BEM-Based Naming - Automates the generation of BEM-compliant class names by resolving parent node names.
- Syntax Transformers - Converts abstract abbreviation tokens into language-specific output via configurable flags and mappings.
- Vendor Prefix Managers - Automates the application of CSS values to all corresponding vendor-prefixed variants.
- Editor Plugins - Fast HTML and CSS coding via abbreviations.
- Develop Tools - Listed in the “Develop Tools” section of the Awesome Laravel Education awesome list.
