86 lines
3.3 KiB
Markdown
86 lines
3.3 KiB
Markdown
# WRNexus Language Support
|
|
|
|
Language support for [WRNexus](https://wrnexusjs.dev) `.wrn` files — the SSR-first,
|
|
Bun-powered full-stack framework.
|
|
|
|
## Installation
|
|
|
|
After the first Marketplace release, search for **WRNexus Language Support** in
|
|
VS Code or run:
|
|
|
|
```text
|
|
ext install wrnexus.wrnexus
|
|
```
|
|
|
|
For a local package, open the Command Palette, choose **Extensions: Install from
|
|
VSIX**, and select the generated `wrnexus-<version>.vsix` file.
|
|
|
|
## 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.
|
|
- **Formatting.** Format Document and format-on-save normalize WRN block, HTML,
|
|
CSS, and function indentation without rewriting application expressions.
|
|
- **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. |
|
|
| `wrnexus.format.enable` | `true` | Enable the built-in formatter for `.wrn`. |
|
|
|
|
To format automatically when saving, add this to VS Code settings:
|
|
|
|
```json
|
|
"[wrn]": {
|
|
"editor.defaultFormatter": "wrnexus.wrnexus",
|
|
"editor.formatOnSave": true
|
|
}
|
|
```
|
|
|
|
## Privacy
|
|
|
|
The extension does not collect telemetry and does not send source code or usage
|
|
data over the network. Formatting, completion, and diagnostics run locally.
|
|
|
|
## Development
|
|
|
|
Diagnostics use a bundled copy of the compiler. Build and validate everything
|
|
after changing the extension or `@wrnexus/compiler`:
|
|
|
|
```bash
|
|
bun install
|
|
bun run check
|
|
bun run package
|
|
```
|
|
|
|
`bun run package` creates `wrnexus-<version>.vsix`. The extension still
|
|
highlights, provides snippets, and completes without the compiler bundle; only
|
|
inline error reporting requires it.
|
|
|
|
Open this folder in VS Code and press <kbd>F5</kbd> to launch an Extension
|
|
Development Host, then open any `.wrn` file.
|
|
|
|
See the
|
|
[Marketplace publishing guide](https://git.workroot.in/WorkRoot/WRNexusJS/src/branch/main/editors/vscode/PUBLISHING.md)
|
|
for the release procedure.
|