Skip to content

feat: editor plugin Phase 1: VSCode extension foundation (grammar + bundled tsserver plugin + packaging) #382

Description

@vivek7405

Problem

Phase 1 of #381. webjs has no first-class editor extension: highlighting inside html``/css`` templates needs the third-party lit-html VSCode extension, and the tsserver features live in @webjsdev/ts-plugin which the user must wire into tsconfig. Ship a single webjs VSCode extension (also installable in Cursor / Antigravity / Windsurf via Open VSX) that gives the complete experience out of the box.

Design / approach

New monorepo package packages/vscode, extension name webjs (marketplace id webjsdev.webjs):

  • Own TextMate injection grammar so html``/css (and `svg) tagged-template contents are highlighted as HTML/CSS WITHOUT the lit-html extension. Adapt the injection grammars from the local lit/lit clone (packages/labs/vscode-extension/syntaxes/), which target the same html/css tag names webjs uses; ship our own copy so there is no Lit-extension dependency.
  • Auto-register the tsserver plugin via contributes.typescriptServerPlugins pointing at the bundled @webjsdev/ts-plugin, with enableForWorkspaceTypeScriptVersions so it loads with no tsconfig edit. (Still bundles ts-lit-plugin under the hood at this phase; the parity rebuild + Lit-dep removal are epic: all-in-one webjs editor plugin (VSCode + Neovim), retire ts-plugin + Lit dep #381 phases 2-3.)
  • Snippets for the common recipes (page, dynamic route, server action, component, module), mirroring the MCP prompts.
  • Commands: run webjs check, scaffold (webjs create), open docs.
  • Packaging: vsce package (VS Marketplace) + ovsx publish (Open VSX, which Cursor / Antigravity / Windsurf / VSCodium pull from). Icon, README, LICENSE, engines.vscode, categories/keywords for discoverability.

Acceptance criteria

  • Installing the extension highlights html``/css/`svg template contents (HTML/CSS tokens) with NO Lit extension present.
  • The webjs tsserver features (go-to-def, attribute autocomplete, register('tag') diagnostic suppression) work without the user editing tsconfig (auto-registered by the extension).
  • Snippets + commands are available; the extension activates on .ts/.js webjs files.
  • vsce package produces a valid .vsix; an ovsx-compatible package is producible; manifest declares publisher/categories/keywords/icon for marketplace discoverability.
  • Tests: grammar tokenization test (an `html``` block tokenizes as HTML), and a manifest/contributions validation test.
  • Docs: packages/vscode/README.md (marketplace-facing) + a note in the root AGENTS.md / cli AGENTS.md pointing at the extension; the webjs mcp and ts-plugin docs cross-reference it.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

  • Status
    Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions