# No.JS LSP — v1.13.2

[![jsDelivr hits](https://data.jsdelivr.com/v1/package/gh/erickxavier/nojs-lsp/badge)](https://www.jsdelivr.com/package/gh/erickxavier/nojs-lsp)

VS Code extension providing full language server support for the [No.JS](https://github.com/ErickXavier/no-js) HTML-first reactive framework.

Also works as a standalone language server (`--stdio`) for **Neovim**, **Sublime Text**, **Emacs**, and any LSP-compatible editor.

## Features

### Completions
- **Directive completions** — All 40+ No.JS directives (`state`, `if`, `get`, `foreach`, `model`, etc.)
- **Dynamic directives** — `bind-*`, `on:*`, `class-*`, `style-*` with common targets/events
- **Companion attributes** — Context-aware: shows `as`, `loading`, `error` only when `get` is present
- **Event modifiers** — `.prevent`, `.stop`, `.once`, `.debounce`, `.throttle`, key modifiers
- **Filter completions** — All 32 built-in filters after `|` in expressions
- **Filter argument hints** — Shows argument name, type, and defaults after `:`
- **Validator completions** — Built-in validators for `validate` attribute
- **Animation completions** — All built-in animation names
- **Context keys** — `$store`, `$refs`, `$route`, `$router`, `$i18n`, `$form`
- **i18n key completions** — Scans `locales/` for translation keys and suggests them in `t="..."` attributes
- **Route completions** — Scans `pages/` directory for file-based routes
- **Wildcard route** (`route="*"`) completions, hover, and diagnostics
- **Store property completions** — Parses `store` declarations to suggest `$store.name.prop`
- **Template var completions** — Suggests `var-*` attributes matching template slot declarations
- **Custom directive completions** — Detects `NoJS.directive()` calls in workspace JS files
- **Head management directives** — `page-title`, `page-description`, `page-canonical`, `page-jsonld` completions and hover
- **Plugin system support** — Plugin snippets, interceptor patterns, and TypeScript type references

### Hover Documentation
- Directive purpose, syntax, and examples
- Companion attribute descriptions
- Filter documentation with arguments
- Context key (`$store`, `$refs`) and loop variable (`$index`, `$count`) descriptions

### Diagnostics
- Unknown directive warnings (with "did you mean?" suggestions)
- Orphaned `else` / `else-if` detection
- Unknown filter warnings
- Empty required values
- Invalid event modifiers
- Duplicate state declarations
- Duplicate `ref` names
- Duplicate wildcard route detection per outlet
- Template ID referenced but not defined
- Missing `as` for HTTP directives
- Expression syntax validation
- `model` on non-form elements
- Invalid animation name
- Unknown validator name
- Head management directive validation

### Go-to-Definition
- `use="id"` → jump to `<template id="id">`
- `$refs.name` → jump to `ref="name"` element
- `$store.name` → jump to `store` declaration
- Template-referencing attributes (`then`, `else`, `loading`, `error`, `empty`, `success`, `error-boundary`)

### Find References
- Find all usages of a template ID across the document
- Find all references to a ref name (`$refs.x` ↔ `ref="x"`)
- Find all store accesses (`$store.x` ↔ `store`)

### Document Symbols
- `state` → Variable, `store` → Module, `ref` → Field
- `<template id>` → Class, `route-view` → Namespace
- `computed` → Property, `watch` → Event, HTTP methods → Function

### Document Links
- HTTP directive URLs as clickable links
- Template `src` and `route-view src` as file/directory links
- `call` URLs and `redirect` paths as clickable links

### Semantic Highlighting
- Directive names → keyword
- Dynamic prefixes (`bind-`, `on:`, `class-`, `style-`) → decorator
- Filter names → function, pipe `|` → operator
- Store references → variable.readonly
- Loop context vars → variable.builtin

### Code Actions
- Quick fix: add missing `as` for HTTP directives
- Quick fix: "did you mean?" for typos in directive names

### Inlay Hints
- Loop variable names for `foreach` / `each` / `for` (`→ $index, $count, $first, $last`)
- HTTP method badge for `get`/`post`/`put`/`patch`/`delete` with `as`

### Snippets
- 31 built-in snippets for common patterns (`if`, `foreach`, `each`, `for`, `get`, `store`, `form`, `call`, `notify`, `page-title`, `plugin`, etc.)

## Configuration

| Setting | Default | Description |
|---------|---------|-------------|
| `nojs.validation.enabled` | `true` | Enable/disable all No.JS diagnostics |
| `nojs.completion.filters` | `true` | Show filter completions in pipe expressions |
| `nojs.customFilters` | `[]` | Additional custom filter names for completions |
| `nojs.customValidators` | `[]` | Additional custom validator names for completions |
| `nojs.trace.server` | `"off"` | Trace communication between client and server |
| `nojs.devtools.enabled` | `false` | Enable live DevTools Protocol connection |
| `nojs.devtools.port` | `9222` | Chrome DevTools Protocol port |
| `nojs.devtools.host` | `"localhost"` | Chrome DevTools Protocol host |

## Development

```bash
# Install dependencies
npm install

# Build
npm run compile

# Run tests
npm test

# Package extension
npm run package
```

## Ecosystem

| Package | Description |
|---------|-------------|
| [No.JS](https://github.com/ErickXavier/no-js) | Core framework — 40+ directives, 32 filters, routing, forms, i18n, animations |
| [NoJS Elements](https://elements.no-js.dev) | UI element plugins — `drag`, `drop`, `drag-list`, `drag-multiple`, `validate` (migrated from core in v1.13.0) |
| [No.JS LSP](https://github.com/ErickXavier/nojs-lsp) | This extension — language server for VS Code and other editors |
| [No.JS Skill](https://github.com/ErickXavier/nojs-skill) | Claude Code AI skill for No.JS development |

## License

MIT © [Erick Xavier](https://github.com/ErickXavier)