Elur VS Code Toolkit

Editor tooling for Elur: syntax highlighting for html tagged templates and raw() function-wrapped templates, event binding autocomplete, diagnostics, quick fixes, formatting, and snippets.

Architecture

This extension is a thin LSP client that launches @elurjs/language-server. All editor intelligence (diagnostics, completion, hover, code actions, formatting) lives in the LSP server, which also powers Neovim, Helix, Zed, and Emacs.

vscode-elur (this extension)
├── extension.js          ← thin LSP client (~95 lines)
├── syntaxes/*.json       ← TextMate grammars (VS Code native)
├── snippets/             ← code snippets
└── @elurjs/language-server  ← LSP server (bundled in .vsix)

Features

• HTML highlighting inside html tagged template literals and raw() function-wrapped templates
• Event bindings highlighted as first-class attributes (@click, @input, @submit, ...)
• Event modifier highlighting with dedicated scopes (@click.prevent.stop, @keydown.enter)
• Template expressions (${...}) highlighted inside templates
• Nested templates support (html inside ${...})
• Autocomplete for common Elur event bindings and directive attributes inside html templates
• Chained modifier autocomplete after . with key-aware suggestions for keyboard events
• Diagnostics for invalid modifier combinations (.passive + .prevent, unknown modifiers, duplicates, key modifiers on non-key events, non-canonical order)
• Quick fixes for modifier diagnostics (remove duplicates, resolve conflicts, replace unknowns, normalize order)
• Hover help for modifiers (.prevent, .stop, .enter, etc.)
• Document formatting for html templates
• Configurable template tags (elur.tags)
• Command to inspect active TextMate scopes (Elur: Inspect Template Scopes)
• Snippets for common Elur patterns (component, effect cleanup, computed, router, store)
• Works in .ts, .tsx, .js, .jsx

Quick Example

function App() {
  const count = signal(0);

  return html`
    <p>Count: ${() => count.value}</p>
    <button @click=${() => count.value++}>+1</button>
  `;
}

Snippets

• elur:component — function component with signal + html template
• elur:effect-cleanup — effect with listener cleanup
• elur:computed — computed value
• elur:router — basic router setup
• elur:store — store with actions

Settings

Commands

• Elur: Inspect Template Scopes — inspect active TextMate scopes
• Elur: Format html`` Templates — format all templates in the current file

Development

npm install
npm test
npx vsce package

Install the generated .vsix locally:

code --install-extension vscode-elur-0.6.0.vsix --force

Other Editors

The same LSP server works in:

• Neovim: :MasonInstall elur-language-server
• Helix: configure languages.toml
• Zed: configure settings.json
• Emacs: via eglot

For CI formatting, use prettier-plugin-elur.

Links

• npm: www.npmjs.com/package/@elurjs/core
• LSP: www.npmjs.com/package/@elurjs/language-server
• GitHub: github.com/elurjs/elur
• Website: elur.dev

License

MIT