🌟 Zog.js Support for VS Code
An extension providing essential tooling and syntax support for the minimal reactive framework, Zog.js.
This extension significantly improves the development experience by offering proper syntax highlighting and basic IntelliSense for Zog.js directives within HTML files.
✨ Features
This extension supports key Zog.js features inspired by modern reactive frameworks:
- Syntax Highlighting: Properly colors and highlights all Zog.js directives and interpolation tags in HTML.
z-if, z-for, z-model, z-text, z-html, z-show, and z-else.- Event handlers like
@click, @input, etc.
- Dynamic attributes using shorthand notation like
:class, :style, etc.
- Text Interpolation:
{{ expression }}.
- Basic IntelliSense (Code Completion): Provides suggestions for common directives when typing inside an HTML tag.
- Snippets: Quick access to common directive structures (e.g., typing
z-for suggests the full z-for="item in items" structure).
🚀 Installation
1. Through the VS Code Marketplace (Recommended)
- Open VS Code.
- Go to the Extensions view (
Ctrl+Shift+X or Cmd+Shift+X).
- Search for
Zog.js Support.
- Click Install.
2. Manual VSIX Installation
If you compiled the extension yourself:
- Download the
.vsix file.
- Open the Extensions view in VS Code.
- Click the
... (More Actions) menu and select Install from VSIX...
- Select the downloaded
.vsix file.
🛠️ Usage Examples
The extension automatically activates in standard HTML files (.html).
1. Text Interpolation
Code within the interpolation brackets will be highlighted as JavaScript.
<div>Hello, {{ user.name }}! Today's count is {{ count + 1 }}.</div>
2. Directives
Directives are highlighted distinctly, and the values (which are JavaScript expressions) are colored appropriately.
<div z-if="isVisible" :class="{ 'active-class': isActive }">
<input type="text" z-model="message" @input="updateCount($event)">
<div z-for="item in items" z-text="item.name"></div>
<div z-else>The element is hidden.</div>
</div>
📜 Supported Directives
| Directive |
Type |
Description |
z-if |
Structural |
Conditionally renders the element. |
z-else |
Structural |
Renders if the preceding z-if condition is falsy. |
z-for |
Structural |
Iterates over an array to render a list of elements. |
z-model |
Two-Way |
Binds an input's value to a reactive reference (ref). |
z-text |
Content |
Sets the element's textContent to an expression result. |
z-html |
Content |
Sets the element's innerHTML to an expression result (use with caution). |
z-show |
Display |
Toggles the element's visibility via CSS display: none. |
@event |
Events |
Shorthand for event listeners (e.g., @click, @input). |
:attr |
Attributes |
Shorthand for dynamic attribute binding (e.g., :href, :class). |
🤝 Contributing
Found a bug or have a suggestion? Feel free to open an issue or submit a Pull Request on the GitHub repository.
