Syntax highlighting for {{ }}, {!! !!}, {{-- --}}, and @directive(...) blocks on top of embedded HTML, including nested parentheses and string literals inside directive expressions (e.g. @if(strtoupper($name) === 'JOHN')).
Bracket matching and auto-closing for {{ }}, {!! !!}, {{-- --}}, and standard (){}[]/quote pairs.
Comment toggling — Ctrl+/ / Cmd+/ wraps a line in {{-- --}}.
Snippets for every directive pair in Zing (@if, @foreach, @switch, @section, @verbatim, etc.), plus echo and comment shorthands.
Directive highlighting is name-agnostic (@\w+), so new directives added to Zing's registry highlight automatically without an update to this extension.
Install
Search "Zing Template Syntax" in VS Code's Extensions panel, or install directly:
code --install-extension RexLLins.zing-syntax
Usage
Open any .zing file — highlighting and snippets are active immediately. Type a directive prefix like @if or @foreach and press Tab to expand the snippet.
Local development
Clone this repo and open it in VS Code.
Press F5 to launch an Extension Development Host with the extension active.
Open a .zing file in that window.
Releasing a new version
vsce package
Upload the resulting .vsix directly through the publisher management page — no Azure DevOps PAT required for manual uploads.
Syncing with Zing's directive set
Directive highlighting requires no updates as Zing's directive list grows. Snippets are hand-written per directive and need a manual addition when a new directive ships.
