WrNexus for VS Code
Language support for WrNexus .wrn files — the SSR-first,
Bun-powered full-stack framework.
Features
- Syntax highlighting ("color-full code"). Keywords (
page,component,state,view,api,realtime, …) plus embedded highlighting for the languages inside each block:view { … }→ HTML, with{expr}interpolation and{t:key}translations and@event="…"bindings picked out.style { … }→ CSS.functions { … },api … { … },ssr/client,realtime on(…) { … }→ TypeScript.
- WrNexus attributes in distinct colors. A grammar injection recolors the
framework's own attributes so they pop even inside plain HTML:
@eventbindings and{t:…}in one accent, runtime directives (data-component,data-for,data-show,data-text,data-scope,data-slot,data-on-*,data-wire-*) in another. Default colors ship with the extension; change them undereditor.tokenColorCustomizations(scopesentity.other.attribute-name.wrn.directiveand…wire.event). - Diagnostics. Parse errors from the real
@wrnexus/compilerare shown inline as you type, anchored to the exact offset. - Snippets.
page,component,view,state,props,seo,api,ssr,client,realtime,functions,style, plus view helpersmount,for,show,t. - Completions. Block keywords at file scope,
data-*runtime attributes and@eventbindings inside aview, and HTTP methods afterapi.
Settings
| Setting | Default | Description |
|---|---|---|
wrnexus.diagnostics.enable |
true |
Show parse errors for .wrn files. |
Building the diagnostics engine
Diagnostics use a bundled copy of the compiler. Regenerate it after changing
@wrnexus/compiler:
bun run build:compiler # writes src/compiler.cjs
The extension still highlights, snippets and completes without the bundle; only inline error reporting requires it.
Development
Open this folder in VS Code and press F5 to launch an Extension
Development Host, then open any .wrn file.