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:
@event
bindings 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
under editor.tokenColorCustomizations (scopes
entity.other.attribute-name.wrn.directive and …wire.event).
- Diagnostics. Parse errors from the real
@wrnexus/compiler are 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 helpers mount,
for, show, t.
- Completions. Block keywords at file scope,
data-* runtime attributes and
@event bindings inside a view, and HTTP methods after api.
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.
| |
