Zing Template Syntax

Syntax highlighting and snippets for Zing (.zing) template files in VS Code.

Get it on the Marketplace →

Features

• 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

1. Clone this repo and open it in VS Code.
2. Press F5 to launch an Extension Development Host with the extension active.
3. 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.

License

MIT