Editor setup

JOPS works in any editor. Two small additions make writing views noticeably more comfortable: HTML support inside layout templates, and type information for the API.

HTML in layout templates (VS Code)

Inline layouts are written in a layout`...` tagged template. By default, editors show that as a plain string. The lit-html extension turns it into real HTML editing.

Install the lit-html extension.

Add this to your project’s .vscode/settings.json:

{
  "lit-html.tags": ["layout"],
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "invalid.illegal.unrecognized-tag.html",
        "settings": { "foreground": "#569CD6" }
      }
    ]
  }
}

You now get HTML syntax highlighting, Emmet and autocomplete inside every layout`...` template:

import { View, layout } from "jops-core";

export default class Card extends View {
  constructor() {
    super();
    this.layout = layout`
      <article class="card">
        <h3 id="title" class="card__title"></h3>
      </article>
    `; // highlighted as HTML
    this.inflate();
  }
}

The textMateRules entry colours custom view tags such as <MyView> blue, like standard HTML elements, instead of red as unknown tags.

API autocomplete and inline docs

The package ships TypeScript declarations (lib/jops-core.d.ts) for every public class, method and lifecycle hook. Your editor reads them through the "types" field of the package and shows signatures and documentation as you type, in plain JavaScript files too.

npm projects already have them in node_modules/jops-core.
CDN projects can add them without changing how the page loads the library:
Terminal window
```
npm i -D jops-core
```
The browser still loads JOPS from the CDN; the package in node_modules is only read by your editor.

For the full API, see the API reference.