Nix.js VS Code Toolkit

Editor tooling for Nix.js: syntax highlighting for html tagged templates, event binding autocomplete, and practical snippets for fast component authoring.

Features

HTML highlighting inside html tagged template literals
SVG highlighting inside svg tagged template literals
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 Nix event bindings and directive attributes inside html templates
Chained modifier autocomplete after . with key-aware suggestions for keyboard events
Diagnostics for invalid modifier combinations (for example .passive + .prevent) and unknown modifiers
Quick fixes for modifier diagnostics (remove duplicates, resolve passive/prevent conflict, replace unknown modifiers)
Hover help for modifiers (for example .prevent, .stop, .enter)
Configurable template tags for editor autocomplete (nixjs.tags)
TypeScript template language service integration via typescript-lit-html-plugin
Command to inspect active TextMate scopes in template code (Nix.js: Inspect Template Scopes)
Snippets for common Nix 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>
  `;
}

Without the extension, the template is usually treated like a plain string. With the extension, tags, bindings, and expressions are colorized and contextual suggestions appear while typing attributes.

Snippets

Built-in snippet prefixes:

nix:component
nix:effect-cleanup
nix:computed
nix:router
nix:store

Settings

nixjs.tags (default: ['html', 'raw', 'svg'])
nixjs.completions.enableEventBindings (default: true)
nixjs.completions.enableModifierSuggestions (default: true)
nixjs.diagnostics.enable (default: true)
nixjs.diagnostics.enableStyleHints (default: true)

Commands

Nix.js: Inspect Template Scopes

Local Testing (Before Publishing)

From this extension folder:

npm install
npm test
npx vsce package

This generates a .vsix file. Install it locally:

code --install-extension vscode-nix-0.3.2.vsix --force

For this release branch, prefer installing the latest local package (currently vscode-nix-0.3.2.vsix).

Then reload VS Code and test in a .ts or .js file:

Write an html template and verify highlighting.
Write an svg template and verify XML-style highlighting.
Type @ inside a tag and confirm event autocomplete appears.
Type . after an event (for example @keydown.) and confirm modifier suggestions appear.
Try an invalid combination like @wheel.passive.prevent=... and confirm diagnostics appear.
Apply a quick fix on a modifier diagnostic.
Hover a modifier (for example .prevent) and verify contextual help appears.
Open snippets and type a prefix like nix:component.
Run Nix.js: Inspect Template Scopes in a template line.

Manual smoke checklist is tracked in tests/SMOKE_TESTS.md and targets the real docs entry file ../nix-js-docs/src/main.ts.

Troubleshooting: Other Template Extensions

If highlighting still looks broken, disable or uninstall other extensions that also inject grammar into html tagged templates (for example bierner.lit-html). Two template injectors active at the same time can conflict and produce broken colors.

Publish to Marketplace

npm run publish:marketplace

Make sure your publisher is authenticated first:

npx vsce login deijose

Road To 1.0.0

Execution checklist and Definition of Done:

RELEASE_1_0_0_CHECKLIST.md

License

MIT

Nix-js VS Code Toolkit

DeijoseDevelop